Banner: Custom version with HTML description and line breaks in heading

This is a custom version of Image with text overlay that allows you to add line breaks in the title and use HTML in the description area. 

Example:

The heading has be changed to two lines and the word Groupthought in the description uses a color style. 

How to:

1

Create a new section

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

In the Sections folder, choose Add a new section:

Call the section:

index-banner-html

Example:

Use the Create section button to complete. 

Erase all the default code that generated:

Replace the default code with one of these options - Choose your version of Pipeline:

If you're unsure of your version:
What version of Pipeline am I using?

Pipeline 4.2 and higher, use:

Click to view code

Pipeline 4.0 and Pipeline 4.1, use:

Click to view code

Earlier versions of Pipeline, use:

Click to view code

Save the file after replace code.

2

Add the new section

Open the Theme Editor:

Quick link if your theme is live/published:
Open Theme Editor

Under Sections:

Choose Add section:

Add the new Banner with HTML section:

This version allows you to add line breaks in the title and HTML code for the description:

To break a line, use the code: <br> between words,. 

This produces:

Example of two buttons on the banner:

To produce:

Use some HTML like this:

(Change the # to a real URL for the link)

Code sample:

<a href="#" class="btn">Button One</a> <span><a href="#" class="btn">Button Two</a></span>

Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing. 

Still need help? Contact Us Contact Us