Allowing <br> line breaks in custom text field

[piccolo21]

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

Instead it shows the tag literally like this:

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"
      },

[piccolo21]

Appreciate any help!!!

[EnriqueMelero]

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.

[piccolo21]

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. 😞

Any ideas?

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

[piccolo21]

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

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

[LitExtension]

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! 

[piccolo21]

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

So puzzling...

[PaulNewton]

---

@piccolo21 wrote:

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

So puzzling...

---

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.

[muhraff]

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 🙂

[bismuth_studio]

This is amazing thank you