ALLOW HTML in METAFIELD

NinaLowman
Tourist
8 0 2

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 23 (23)
Mircea_Piturca
Shopify Partner
1540 43 333

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 2

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
1540 43 333

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 2

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
1540 43 333

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 2

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 2

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 4

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 Expert
93 0 18

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 4

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
123 20 55

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
KateChaffins
New Member
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 4

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

SOLUTION:

Use single line text. It accepts html.

linpin
New Member
4 0 0

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

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?

halo42
New Member
1 0 1

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

meo_me
Excursionist
18 0 8

Hi I still have the same problem