How can I use HTML in product page meta text fields?

[NinaLowman]

I am trying to create a list and to add a link in a meta text field on the product page but it doesn't appear to allow HTML.  Is there some way to use HTML in these boxes? 

Thank you in advance for any help  🙂   

[Mircea_Piturca]

Meta fields do allow HTML strings. Just make sure that your metafiled is type text.

[NinaLowman]

Hello Mircea,  Thank you so much for your help.   I added the metafield as a multi line text field but when I add code it shows the code on the front end.  The box doesn't have a "code/view" toggle.  I am using the Dawn theme and the metafield is in a collapsible block.  Does that make a difference?   

[Mircea_Piturca]

In the admin you will just get a normal text box, no code view or markup format.

However, if you add HTML in that field, your theme should render it.

Not exactly sure about your setup and how the metafield is included in your theme.

[NinaLowman]

Hello Mircea,  Thank you for your continued help  🙂 

I created this video to show you how I have set up the meta fields and how I am using them.   They are definitely not allowing HTML.  😞 

https://youtu.be/qEw206ihWjI

[Mircea_Piturca]

Hey Nina,

Thanks for the video. In the theme code, can you find where that metafield is added?

Would be great to see the code how exactly that meta is added.

Thanks

[NinaLowman]

In the product.json file one of the metafields looks like this.  I looked through the main-product.liquid but didn't see any mention of the metafiles added.   

"e5f5939a-f28e-486a-b73b-c9f702a0aeba":{
"type": "collapsible_tab",
"settings": {
"heading": "DETAILS",
"content": "<p>{{ product.metafields.my_fields.details | metafield_tag }}<\/p>",
"page": "",
"icon": "none"
}
},

[NinaLowman]

This is the HTML that is generated on the front end.

<div class="product__accordion accordion">
<details open="">
<summary>
<div class="summary__title">

<h2 class="h4 accordion__title">
DETAILS
</h2>
</div>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</path></svg>

</summary>
<div class="accordion__content rte">
<p><span class="metafield-multi_line_text_field">• Made with HEMP, lavender essential oil, lavender buds, and coconut milk powder: Promote relaxation and sleep while moisturizing your skin.<br>
<br>
• 100% hemp-derived HEMP: We guarantee there’s less than 0.3% THC in every HEMP bath bomb.<br>
<br>
• Tested 3x: Every batch is tested three times for potency, safety, and THC levels.<br>
<br>
• Whole-plant benefits with full-spectrum HEMP: Absorb all the natural goodness of the hemp plant (with less processing!).<br>
<br>
• CO2 extracted: Safe for the environment and for you.<br>
<br>
• Vegan: Our bath bombs are in alignment with a plant-based lifestyle.</span></p>

</div>
</details>
</div>

[aaron_ecomplete]

Hi @NinaLowman did you have any luck with getting this to work?

I did a little bit of digging as we're having the same issue here, when we put html in a multiline text field metafield and attach that to a 'Collapsable tab' it shows html as a string on the site's frontend.

I had a look in the product.json file to see how the data is being passed in

Here's an example: 

"cbbaa8be-f459-4e85-a595-77799f53d86f": {
    "type": "collapsible_tab",
    "settings": {
        "heading": "Key Benefits",
        "content": "<p>{{ product.metafields.my_fields.product_overview | metafield_tag }}<\/p>",
        "page": "",
        "icon": "check_mark"
    }
},

metafield_tag is being used here which according to the documentation should output the content as HTML, not a string.

https://shopify.dev/api/liquid/filters/metafield-filters

https://shopify.dev/api/liquid/objects/metafield

As a quick fix replacing content value here with:

"content": "<p>{{ product.metafields.my_fields.product_overview.value }}<\/p>",

seems to do the trick however this is regularly reverted back when you change the product template settings via shopify customize.

I wonder if @Mircea_Piturca could shed some light on why metafield_tag outputs as a string and not the expected HTML here.

Thanks,
Aaron

[Rowby]

For those struggling to add full HTML in Shopify, you might want to check out the Shopify app  Metafield Guru.

I have used Guru before and it works pretty good.  And in their most recent update to the app it supports Shopify Editor 2.0

I am currently experimenting with it for a client who needs HTML in her blog posts and when I see how it works I will report back her to the community forum.  But others here might want to check it out.  They have a free plan and other paid plans.

Here's a link to the app https://apps.shopify.com/metafields-editor-2

Also to guru's FAQ https://support.metafields.guru/support/home

As I said, while I will be experimenting with adding full HTML, others might want to also jump in and try out GURU for their needs -- and also report back on the forum with their experiences.

I have used Guru for a past client and found the app to work well -- and am happy that they are also supporting the new 2.0 Shopify editor.

FYI from Guru's app page when installed:

New metafield types

There used to be 3 metafield types: 

1. string
2. integer  
3. json_string

Now that Shopify has totally redesigned metafields, Guru now has 18 different types: 

1. Single line text
2. Multi-line text
3. Page reference
4. Product reference
5. Variant reference
6. File reference
7. Integer
8. Decimal
9. Date
10. Date and time
11. URL
12. JSON string
13. Boolean
14. Color
15. Weight
16. Volume
17. Dimension
18. Rating

Screen Capture. (Customers and Orders are avail on the regular plan. I am currently on Guru's free plan)

Rowby Goren
Shopify Expert and Shopify Partner

[aaron_ecomplete]

Hi @Rowby 

Thanks for your input here, I am indeed using Metafields guru app to create the HTML formatting. However it doesn't make any difference the website still shows the html on the front end of the site. (Same scenario as my previous post).

Let me know how you get on. I'm a dev so not only installing apps here I'm building with the Dawn theme and this to me feels like a bug for sure.

Cheers in advance
Aaron

[MetafieldsGuru]

Hi there,

Sasha here from Metafields Guru team.

That's correct, multi line text metafields do allow merchants to add HTML as metafield values. The issue is a bit different. There is an issue with HTML formatting for metafields used as "dynamic data source" in Online store 2.0 themes.

I've created a multi line text metafield with a HTML table for value on my test store:

​Next, I created a definition for this metafield:

And it got HTML code displayed as plain text too:

So I edited theme code manually and replaced the code generated by Shopify with proper Liquid code generated by our app ( https://apps.shopify.com/metafields-editor-2 ) : 😞

{{ product.metafields.custom_data.nutrition_information.value }}

and it worked like a charm:

Apparently, Shopify generates code that fails to render HTML correctly. Luckily, you can avoid running into this issue with a pretty simple workaround: you can use Liquid code reference of a metafield instead of connecting it as a dynamic data source. Or, if you're familiar with theme customization, you can place the Liquid code directly in a product page template file (or any other template page: collection, blog post, CMS/static page etc).

We've got a great step-by-step tutorial showing how to display a metafield on product page for both Online store 2.0 and non-OS 2.0 themes on our help portal: https://support.metafields.guru/support/solutions/articles/44002276080

Hope this helps !🙂

Best regards,

Sasha Kachkovskyi

Co-founder and CEO

256 Development

[halo42]

It worked for me too. Thank you so much!!!

[Nardu_M]

Yo Yo Yo, I'm enjoying the tool and have been fiddling.  
It looks like a bug, But I got it figured 🚀
First copy table to be pasted.
Paste in Metafields as multiline text, but on the view source code view.
Short video attached if my description is not quite clear

[MattG01]

Hi MetafieldsGuru.   Thank you for your solution.    The HTML shows on the page but I was hoping to have it show in a collapsible tab instead of always displayed like it is with the custom liquid.  Any suggestions?   Thanks! 

[AvidBrio]

@aaron_ecomplete

This is the solution, thanks so much! I wonder why other people in the discussion, didn't flag it. 

[KateChaffins]

Are you a using multi-line or single-line metafield? The html formatting worked for us on the single-line field but not the multi-line field.

[aaron_ecomplete]

Hi @KateChaffins you're right, it works with a single-line metafield. We wanted to use multi-line field as it's much easier for a none developer to edit via metafields guru. 

@MetafieldsGuru thank you for the thorough explanation and for providing a solution. 

@NinaLowman I believe it would be useful to mark the answer as a solution so others can easily find the answer they're looking for going forward. 

[Malaw_Manandhar]

Not a best solution. But it worked for me.

<script>

var stringToHTML = function (str) {

var parser = new DOMParser();

var doc = parser.parseFromString(str, 'text/html');

return doc.body;

};

var meta_specification = document.querySelectorAll(".metafield-multi_line_text_field")[1].innerText;

document.querySelectorAll(".metafield-multi_line_text_field")[1].innerHTML = stringToHTML(meta_specification)['innerHTML'];

</script>

[CJSINGH]

SOLUTION:

Use single line text. It accepts html.

[linpin]

I'm having problems with this too. I've changed my metafield to be a single line metafield but it's still displaying the html as html. I've added a screenshot. 

Any help would be appreciated as i'm totally new to Shopify, moving over from Big Commerce.

[hauser-co]

Jumping on the wagon here, metafields rendering HTML doesn't work for me either. Single or Multi line text. Is this theme related? Or is it just not possible?

[meo_me]

Hi I still have the same problem

[igorsouza]

This works like a charm! Thank you!

[w-vnt]

it worked for me, thanks 

[UPLONE]

Yes. It's actually pretty simple in Dawn.

1. Just find your "Namespace and key" (i.e. my_fields.assembly_manual) in your Metafield definition
2. Place that into this code formula

{{ product.metafields.my_fields.assembly_manual.value }}

And then copy all this code and paste it into the Description field of your Block in the Customizer.

[Florian2]

The above solution works well, so if it is not clear:
1. get your metafield full namespace and key

2. then add ".value" at the end of it like so in my case: 

product.metafields.my_fields.tab_content_2.value 

3. add the usual liquid brackets before and after:

{{ product.metafields.my_fields.tab_content_2.value }}

4. copy the whole code line and paste it in your theme editor in lieu of the current metafield connector:

5. save and check, it should work like it did on mine (Third party theme)

[King-Kang]

@Florian2  for president!

Thank you very much!

[marvic]

Amazing! Works!

[Florian2]

thank you 🙂 seems that Dawn support them well now directly from the dynamic content menu as well

[marvic]

For whatever weird reason this did not work for me. When selecting from the list it would not accept HTML. I had to manually assign it as described above.

[Florian2]

Weird, yes i still don't know when it works or not 🙂 But glad the manual solution is working!

[theshopdude]

Finally someone with a solution. Thanks mate.

[alibaloi]

Please mark this answer as PRIMARY!

[ElenaItaly]

I'm using a maestroo template.
in file "product-json" I've changed from this:

"content": "<p>{{ product.metafields.my_fields.EXAMPLE | metafield_tag }}<\/p>",

to this:

"content": "<p>{{ product.metafields.custom.EXAMPLE.value }}<\/p>",

(EXAMPLE is the name of your metafield)
Now I can display a table and html in general!
But it is not a prefect solution from a code point of view, because my <table> is included in a <p> now..
Please update this post if someone finds the solution! (I do not want to use an addition app to fix it)
Thank you!

[AnujNegi31]

Quite Helpful, It worked.

[Appfinz]

Hey have tried using this strip_html tag ??

https://shopify.github.io/liquid/filters/strip_html/

and now i am able to add html into my multi-line text meta-feilds column, Please try once

[MRamzan]

I have solved it. You can follow this tutorial: