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

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

NinaLowman
Tourist
8 0 4

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  🙂   

Replies 37 (37)

Mircea_Piturca
Shopify Partner
1548 44 347

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

Finally—Add variant descriptions to your products
NinaLowman
Tourist
8 0 4

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
Shopify Partner
1548 44 347

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.

Finally—Add variant descriptions to your products
NinaLowman
Tourist
8 0 4

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
Shopify Partner
1548 44 347

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

Finally—Add variant descriptions to your products
NinaLowman
Tourist
8 0 4

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
Tourist
8 0 4

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
Shopify Partner
3 0 7

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
Shopify Partner
94 0 19

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)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

 

www.Rowby.com
Specializing in Shopify Solutions including CBD
aaron_ecomplete
Shopify Partner
3 0 7

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
Shopify Partner
160 32 102

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: 1.png

​Next, I created a definition for this metafield:

2.png

And it got HTML code displayed as plain text too:

4.png

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:

3.png

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

Check out Metafields Guru, the #1 ranked metafields app.

Bulk editor | Data import/export | Metafield sets | Browser extension
halo42
Visitor
1 0 1

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

Nardu_M
Shopify Partner
9 0 1

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
New Member
10 0 0

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
Shopify Partner
295 17 29

@aaron_ecomplete

 

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

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com

KateChaffins
Visitor
1 0 1

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
Shopify Partner
3 0 7

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
Shopify Partner
3 0 1

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
Tourist
4 0 3

SOLUTION:

Use single line text. It accepts html.

linpin
Tourist
4 0 1

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.

 

 

screen 1.png

hauser-co
Shopify Partner
4 0 2

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
Excursionist
20 0 13

Hi I still have the same problem

igorsouza
Shopify Partner
6 0 0

This works like a charm! Thank you!

Data is the key to achieving online success. Get in touch if you need any help!
w-vnt
Tourist
5 0 1

it worked for me, thanks 

UPLONE
Shopify Partner
12 0 19

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.

— Was my reply helpful? Click Like to let me know! ✔
— Was your question answered? Mark it as an Accepted Solution! ★

UPLONE | Create Reach
Florian2
Shopify Partner
11 0 13

The above solution works well, so if it is not clear:
1. get your metafield full namespace and key
Xnip2022-08-23_12-51-18.jpg

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:
Xnip2022-08-23_12-57-04.jpg

 

5. save and check, it should work like it did on mine (Third party theme)
Xnip2022-08-23_12-58-34.jpg

King-Kang
Trailblazer
148 8 78

@Florian2  for president!

Thank you very much!

marvic
Explorer
66 4 19

Amazing! Works!

Florian2
Shopify Partner
11 0 13

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

Florian2_0-1688948951281.png

 

marvic
Explorer
66 4 19

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
Shopify Partner
11 0 13

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

theshopdude
Tourist
3 0 1

Finally someone with a solution. Thanks mate.

alibaloi
Shopify Partner
1 0 1

Please mark this answer as PRIMARY!

ElenaItaly
Visitor
1 0 1

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
Shopify Partner
1 0 1

Quite Helpful, It worked.

Appfinz
Visitor
3 0 0

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

Kishan Kumar

MRamzan
Shopify Partner
339 3 35

I have solved it. You can follow this tutorial:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112