How can I get the image-with-text.liquid to accept<br/> in the description?

Technical Q&A
,
1

as the title suggests I am trying to insert line breaks in a description of image with text, this is for an about page. now I have tried
and
but neither work as it just displays in raw text. I want to remove the escape for this section as it would make my life a lot easier, I tried telling the stackable-text.liquid as that is where I tracked the description down too… and tell the description | raw. but apparently raw is not recognized in shopify liquid. am I looking in the raw place? essentially I am trying to be like Hello I am blah, and I am a content creator and furniture maker.

and new paragraph. but it won’t let me. I am using the beyond theme, though I think that is based on the dawn theme. not sure.

2

You could try to add
in content of text to check if it works.

3

To resolve the issue with line breaks in Shopify's Liquid template, you can try using the {{ your_text_variable | newline_to_br }} filter, which is commonly used to convert newlines in Liquid variables into
tags. Here’s how you can adjust the description for the image-with-text.liquid:

1. Find the line in your image-with-text.liquid file where the description is rendered.
2. Replace the current rendering logic with {{ section.settings.text | newline_to_br }}.

This method ensures that each new line in your text input will be converted into a line break, giving you control over how paragraphs are displayed.

Read more: Prayer Times Dubai

4

Hi @Cshor ,

Thanks for reaching out to the community. We are MooseDesk, a comprehensive Live Chat, FAQ & Helpdesk App designed to elevate your customer support experience.

It sounds like you’re trying to add line breaks in a Liquid template for a Shopify theme, specifically in an image-with-text section. The issue you’re encountering is that HTML tags are being escaped and displayed as raw text instead of being rendered. Let’s break down the problem and explore some solutions:

  1. Liquid filtering:
    Instead of using raw, which isn’t recognized in Shopify Liquid, you can try using the newline_to_br filter combined with the allow_html filter. This approach converts newline characters to <br/> tags and then allows the HTML to be rendered.

Try modifying your Liquid code like this:

{{ description | newline_to_br | allow_html }}

  1. Theme settings:
    Some themes have built-in settings to allow HTML in certain fields. Check your theme’s settings (usually in the theme editor) to see if there’s an option to allow HTML in descriptions or text fields.

  2. Custom Liquid snippet:
    If the above solutions don’t work, you might need to create a custom Liquid snippet to handle the line breaks. Here’s an example:

{% assign paragraphs = description | split: '<br/><br/>' %}
{% for paragraph in paragraphs %}
<p>{{ paragraph | strip | newline_to_br }}</p>
{% endfor %}

This snippet splits the description by double line breaks, then wraps each resulting part in a paragraph tag, converting single line breaks to <br/> tags.

  1. JavaScript solution:
    If you can’t modify the Liquid templates directly, you could use JavaScript to replace the line breaks after the page loads:
document.addEventListener('DOMContentLoaded', function() {
let descriptions = document.querySelectorAll('.your-description-class');
descriptions.forEach(function(desc) {
desc.innerHTML = desc.innerHTML.replace(/<br\/>/g, '<br/>');
});
});

Replace .your-description-class with the actual class or ID of your description elements.

  1. Theme file location:
    You mentioned looking in stackable-text.liquid. The correct file might be image-with-text.liquid or something similar, depending on your theme structure. Look for files related to sections or blocks that handle image and text combinations.

  2. Theme customization:
    If you’re using a modified version of the Dawn theme, you might need to check how the Beyond theme has implemented these sections. Some customizations might interfere with standard Liquid filters or HTML rendering.

To troubleshoot further:

  1. Check if HTML is allowed in your theme’s settings for text fields.
  2. Verify you’re editing the correct Liquid file for your image-with-text section.
  3. Try the newline_to_br | allow_html filter combination.
  4. If that doesn’t work, try implementing the custom Liquid snippet or JavaScript solution.

Remember to always backup your theme before making changes. If you’re not comfortable modifying theme files, consider reaching out to the theme developer for support or hiring a Shopify expert to assist you.

If this is helpful for you, please let me know by giving MooseDesk a ‘LIKE’. If your question is answered please mark this as 'SOLUTION’.

If you are looking for a customer support solution to help drive more conversion to your Shopify store, I suggest exploring MooseDesk, a FREE LiveChat, FAQ & Helpdesk App that can help your support experience easier, better, faster!

With MooseDesk, you can engage with customers through omnichannel support, manage inquiries with a robust ticket system, and provide quick responses.

MooseDesk_1-1726479283884.png
MooseDesk_1-1726479283884.png1600×900 185 KB

  • Or you can let customers resolve questions faster with in-built FAQ, Order tracking module, and more.

MooseDesk_2-1726479283879.png
MooseDesk_2-1726479283879.png815×1600 174 KB

Once again, thank you for reading. Wishing you a great day ahead!

5

I tried to modify the description to have the {{section.settings.description | newline_to_br}} however that did not work. here is the existing render:
{%-
render ‘featured-content’,
white_text: section.settings.white-text,
description: section.settings.description{{ section.settings.description | newline_to_br }},
heading_type: section.settings.heading-type,
id: section.id,
image: section.settings.image,
image_display_type: display_type,
image_aspect_ratio: aspect_ratio,
link_text: section.settings.link-text,
link_url: section.settings.link-url,
mobile_hide_description: section.settings.mobile-hide-description,
mobile_image: section.settings.mobile-image,
mobile_image_display_type: mobile_display_type,
mobile_image_aspect_ratio: mobile_aspect_ratio,
mobile_text_alignment: section.settings.mobile-text-alignment,
mobile_overlay: section.settings.mobile-overlay,
overlap: section.settings.overlap,
overlay_style: section.settings.overlay-style,
overline: section.settings.overline,
parallax_enabled: section.settings.parallax-enabled,
sizes: ‘100vw’,
text_style: section.settings.text-style,
text_bg_color: section.settings.text-background-color,
text_position: text_position,
text_width: section.settings.text-width,
title: section.settings.title,
text_x_alignment: section.settings.text-horizontal-alignment,
text_y_alignment: section.settings.text-vertical-alignment
-%}

in fact, when I put that in there, now the description doesn’t display at all… so I have put back to:
description: section.settings.description,

6

Really appreciate the suggestions, I tried putting that into the stackable-text.liquid however it said in the liquid editor that “allow html is an unknown filter” so it did nothing. I then looked in theme editor, don’t see anything in there regarding html unless it is directly related to cart which it is not. so I went into the custom liquid thing put the custom liquid inside of the content, then it said “you are not allowed to use more than one filter ‘{{ paragraph | strip | newline_to_br }}’” and told me to remove it. would not really like to use js if I can help it… I have this code which is the entire

section of the image-with-text.liquid file, I went down a rabit hole to find it in the stackable-text.liquid.:

{%- render 'featured-content', white_text: section.settings.white-text, description: section.settings.description, heading_type: section.settings.heading-type, id: section.id, image: section.settings.image, image_display_type: display_type, image_aspect_ratio: aspect_ratio, link_text: section.settings.link-text, link_url: section.settings.link-url, mobile_hide_description: section.settings.mobile-hide-description, mobile_image: section.settings.mobile-image, mobile_image_display_type: mobile_display_type, mobile_image_aspect_ratio: mobile_aspect_ratio, mobile_text_alignment: section.settings.mobile-text-alignment, mobile_overlay: section.settings.mobile-overlay, overlap: section.settings.overlap, overlay_style: section.settings.overlay-style, overline: section.settings.overline, parallax_enabled: section.settings.parallax-enabled, sizes: '100vw', text_style: section.settings.text-style, text_bg_color: section.settings.text-background-color, text_position: text_position, text_width: section.settings.text-width, title: section.settings.title, text_x_alignment: section.settings.text-horizontal-alignment, text_y_alignment: section.settings.text-vertical-alignment -%}

then I found it here in the stackable-text.liquid:
{%- if description != blank -%}

{{- description -}}
{%- endif -%}
7

Thank you for providing that additional context and code snippets. It’s clear now that you’re working with a more complex theme structure, which is common in advanced Shopify themes. Let’s try to address this issue step by step:

  1. First, let’s focus on the stackable-text.liquid file, as this seems to be where the description is actually rendered. We can modify this part to allow for line breaks:
{%- if description != blank -%}
<div class="stacked-text--description"
data-item="{{ description_type }}"
{% if mobile_hide_description %} data-mq="medium-large" {% endif %}
{% unless settings.transitions--text %} data-transition-item="{{ id }}" {% endunless %}>
{{- description | newline_to_br -}}
</div>
{%- endif -%}

The key change here is replacing {{- description -}} with {{- description | newline_to_br -}}. This should convert newline characters in your description to <br> tags.

  1. If the above doesn’t work, it’s possible that the description variable is being processed or escaped somewhere before it reaches this template. In that case, we might need to look at where the description is being set or passed to this template.

  2. Since you mentioned you’re using the Beyond theme (which is based on Dawn), it’s possible that there are theme-specific settings or filters being applied. Let’s check the image-with-text.liquid file:

<div class="image-with-text--root"
data-section-id="{{ section.id }}"
data-top-border="{{ top_border }}"
data-background-color="{{ section.settings.background-color }}"
data-container-width="{{ section.settings.container-width }}"
data-spacing-above="{{ section.settings.spacing-above }}"
data-spacing-below="{{ section.settings.spacing-below }}"
{% if text_position == 'overlay' or text_position == 'bottom' %} data-transparent-header-compatible {% endif %}>
{%- render 'featured-content',
white_text: section.settings.white-text,
description: section.settings.description | newline_to_br,
heading_type: section.settings.heading-type,
id: section.id,
image: section.settings.image,
image_display_type: display_type,
image_aspect_ratio: aspect_ratio,
link_text: section.settings.link-text,
link_url: section.settings.link-url,
mobile_hide_description: section.settings.mobile-hide-description,
mobile_image: section.settings.mobile-image,
mobile_image_display_type: mobile_display_type,
mobile_image_aspect_ratio: mobile_aspect_ratio,
mobile_text_alignment: section.settings.mobile-text-alignment,
mobile_overlay: section.settings.mobile-overlay,
overlap: section.settings.overlap,
overlay_style: section.settings.overlay-style,
overline: section.settings.overline,
parallax_enabled: section.settings.parallax-enabled,
sizes: '100vw',
text_style: section.settings.text-style,
text_bg_color: section.settings.text-background-color,
text_position: text_position,
text_width: section.settings.text-width,
title: section.settings.title,
text_x_alignment: section.settings.text-horizontal-alignment,
text_y_alignment: section.settings.text-vertical-alignment
-%}
</div>

In this snippet, I’ve added the newline_to_br filter to the description parameter:

description: section.settings.description | newline_to_br,

This should apply the filter before the description is passed to the featured-content snippet.

  1. If these changes don’t work, we might need to look at the featured-content snippet as well, as it might be processing the description further.

  2. Lastly, make sure you’re entering line breaks in the actual content. In the Shopify admin, when you’re editing the section content, press Enter where you want line breaks to appear, rather than typing <br> or <br/>.

If none of these solutions work, it might be worth reaching out to the theme developer for Beyond, as there could be theme-specific handling of text that we’re not seeing in these snippets.

Remember to always back up your theme before making changes, and test thoroughly on a development or staging version of your store before applying changes to your live site.