How can I create a line break in the Dawn theme's image banner text?

Store Design
1

So, I’m trying to get the image banner text to break into two lines in the Dawn theme - see the attached image. I’ve tried half a dozen solutions but none have worked. Does anyone have a working solution?

BANNER.jpg
BANNER.jpg1920×708 18.5 KB

1 Like
2

@JGWILLIE

Please share your store URL!

Thanks!

3

Hi @JGWILLIE

you can try this solution.

https://community.shopify.com/c/shopify-design/dawn-theme-image-banner-section-how-to-create-line-breaks-for/m-p/1700509#M454629

4

Hi @JGWILLIE ,

Please follow the instructions below.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Section folder, open the image-banner.liquid
  3. Find the {{ block.settings.heading | escape }},(refer to image below to where the code is), and replace it with the code below
{% assign headings = block.settings.heading | split: "|" %}
{% for heading in headings %}
 {{ heading | escape }}

{% endfor %}

made4Uo_0-1662145351582.png
made4Uo_0-1662145351582.png966×789 42.9 KB

  1. Then click SAVE

The code should look like this.

made4Uo_1-1662145407127.png
made4Uo_1-1662145407127.png1001×839 47.5 KB

  1. Go to the theme editor, and whenever you want a line break, place a pipeline | in between. It is the key above the ** in your keyboard. See image below

made4Uo_2-1662145481797.png
made4Uo_2-1662145481797.png1915×759 88.7 KB

5

Hello everyone. Is there a way to add a code so I can use that feature in all kind of text boxes of my website? Or do I have to add a different code in each different heading, text box, sub-text etc. That should be a basic feature of all themes in my opinion.