Allowing <br> line breaks in custom text field

Technical Q&A
1

In the Customize dashboard for my site, I would like to have the
tag to behave like a proper line break.

Instead it shows the tag literally like this:

Screen Shot 2021-03-09 at 9.49.25 AM.png
Screen Shot 2021-03-09 at 9.49.25 AM.png1420×890 81.5 KB

Is it a matter of changing the input type within the respective .liquid file?

Right now I’m seeing it’s this under {% schema %}:

{
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Image with text overlay"
      },
      {
        "type": "text",
        "id": "subheading",
        "label": "Subheading",
        "default": "Tell your story with images"
      },
2

Appreciate any help!!!

3

U can use the HTML setting type to include html tags that needs to be rendered.

More info on https://shopify.dev/docs/themes/settings#html

Even the RichText setting type would work for you if only a br tag is needed.

1 Like
4

Thank you for replying!

So I’m looking through documentation now, wondering if I’m missing a piece of the puzzle.

Updated the heading type but it still doesn’t seem to work. :disappointed_face:

Any ideas?

{
        "type": "html",
        "id": "heading",
        "label": "Heading",
        "default": "Image with text overlay"
      },
5

Why would changing the field to “type”: “html” not work?

So puzzling…

6

Thanks for the reference but the solution in the example did not work.

My store - viewable on mobile: http://fibonacho.co

7

Hi @piccolo21 ,

This is my recommendation for your issue. Please change type to “textarea”:

{

“type”: “textarea”,

“id”: “heading”,

“label”: “Heading”,

“default”: “Image with text overlay”

}

Please take a look at our screenshot here:

https://prnt.sc/10kfrnf

https://prnt.sc/10kfs9x

Hope this helps!

8

Hi mate.

Thanks for asking.

Instead of using type text we can use type textarea in your liquid file add a string filter called newline_to_br.

Example

// .liquid

{{ section.settings.heading | newline_to_br }}

{
  "type": "textarea",
  "id": "heading",
  "label": "Heading",
  "default": "Image with text overlay"
}

Hope its helps :slightly_smiling_face:

1 Like
9

It should just work https://shopify.dev/themes/architecture/settings/input-settings#html as long as

  • Your working in the same theme as the code you edited
  • you’ve edited the correct section and it’s setting (temporarily edit the heading and label text to be sure)
    • checked the block logic used in that section; something may be checking for something like the following shape ,loosely, {% if block.type == text %}
  • There’s no cache issues, (wait a bit and try again)

If those troubleshootings don’t surface the true issue , then DM me your store info, and a link to theme setting and I’ll send a request to see.

10

This is amazing thank you