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:
Pipeline 4.0 and Pipeline 4.1, use:
Earlier versions of Pipeline, use:
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.