Shopify themes, liquid, logos, and UX
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 🙂
Meta fields do allow HTML strings. Just make sure that your metafiled is type text.
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?
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.
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
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
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"
}
},
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>
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
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:
Now that Shopify has totally redesigned metafields, Guru now has 18 different types:
Rowby Goren
Shopify Expert and Shopify Partner
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
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
It worked for me too. Thank you so much!!!
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
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!
This is the solution, thanks so much! I wonder why other people in the discussion, didn't flag it.
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.
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.
Not a best solution. But it worked for me.
SOLUTION:
Use single line text. It accepts html.
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.
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?
Hi I still have the same problem
This works like a charm! Thank you!
it worked for me, thanks
Yes. It's actually pretty simple in Dawn.
{{ 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.
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)
Amazing! Works!
thank you 🙂 seems that Dawn support them well now directly from the dynamic content menu as well
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.
Weird, yes i still don't know when it works or not 🙂 But glad the manual solution is working!
Finally someone with a solution. Thanks mate.
Please mark this answer as PRIMARY!
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!
Quite Helpful, It worked.
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
I have solved it. You can follow this tutorial:
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024