Metafield richtext not rendering line breaks "Shift + Enter"

[Jordz_Joestar]

Hi All,

I have a Rich Text Metafield setup for products to display product specifications.

I am using the below to display this Metafield - Although if I add a newline “Shift + Enter” it doesn’t display this in the frontend, it just keeps the text as one line. Can anyone let me know why I cant seem to get line breaks to work when displaying the Metafield?

 {%- if product.metafields.custom.product_specifications != blank -%}
  {{product.metafields.custom.product_specifications | metafield_tag}}
{%- endif -%}

[GemPages]

Hello @Jordz_Joestar ,

It’s the GemPages Support Team and we are glad to assist you today!

You could please try adding the code like that

{%- if product.metafields.custom.product_specifications != blank -%}
  {{product.metafields.custom.product_specifications | metafield_tag | newline_to_br}}
{%- endif -%}

Let us know how it works for you.

Best regards,
GemPages Support Team

[Jordz_Joestar]

Works perfectly, thank you!

[GemPages]

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team

[eno]

Hi,

would you be so kind to explain me where I can find this line in code.
I have same problems.

Thanks.

Eno

[eno]

Hi,

would you care to explain me where I can find this line in code and change it to your definition.
I’d like to make some line breaks in the metafield’s rich text.

Thanks.

Eno

[GemPages]

Hi @eno ,

In this case, you need to use the “enter” key to break the line in the metafield’s content, for example:

After that, you add “| newline_to_br” code to your metafield’s code such as the code of the comment above

{{product.metafields.custom.product_specifications | metafield_tag | newline_to_br}}

Let us know how it works for you.

Best regards,
GemPages Support Team

[eno]

Thanks for your reply.
I’d like to know where should i enter:
{{product.metafields.custom.product_specifications | metafield_tag | newline_to_br}}

Which part of the code?

Please specify the name of the file (code).
I’m just a designer with a bit of code knowledge.

Best regards,

Eno

[eno]

Shopify support sent me this instructions:

To add the code snippet for the metafield in your Shopify theme, you’ll need to edit the theme’s Liquid files. Here’s a step-by-step process to add the code in the right place:

1. Log in to your Shopify admin.
2. Go to Online Store > Themes.
3. Find the theme you want to edit and click on the Actions dropdown menu, then select Edit code.
4. To display the metafield on the product page, search for the file product-template.liquid or product.liquid in the Sections folder. Alternatively, you may find a similar file name in the Templates folder (like product.liquid or product-custom.liquid).
5. Once you’ve opened the appropriate file, look for an appropriate section of the code where you’d like to display the metafield. You might want to place it near other product information, like the product description or product specifications.
6. Insert this code snippet in the desired location within the file:

{%- if product.metafields.custom.product_specifications != blank -%}

{{product.metafields.custom.product_specifications | metafield_tag | newline_to_br}}

{%- endif -%}

2. Save the file by clicking the ‘Save’ button in the top right corner.

Now, when a product has a value for the specified metafield, it will be displayed on the product page. Remember to replace custom and product_specifications with the appropriate namespace and key for your metafield.

Problem is that I can’t find any of the mentioned file to add the code.

To display the metafield on the product page, search for the file product-template.liquid or product.liquid in the Sections folder. Alternatively, you may find a similar file name in the Templates folder (like product.liquid or product-custom.liquid).

[GemPages]

Hi @eno ,

Shopify’s instructions are completely correct. You can find your code file in the Edit Code of your current theme

Besides, you also try using the custom code in the theme’s customize

I hope my answer can be helpful to you.

Best regards,
GemPages Support Team

[eno]

I understand that I should place the code in the ‘Edit code’.

Shopify specifies:

To display the metafield on the product page, search for the file product-template.liquid or product.liquid in the Sections folder. Alternatively, you may find a similar file name in the Templates folder (like product.liquid or product-custom.liquid).

I’m trying the Prestige theme 7.0 (upgraded) and can’t find any of those files. There are no mentioned files in Section or Templates folder.

Sections folder

product-template.liquid

product.liquid

Templates folder

product.liquid

product-custom.liquid).

I’ll ask developers for help.

Thanks for your time!

Best,

Eno