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

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

{{ 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 ! :slightly_smiling_face:

Best regards,

Sasha Kachkovskyi

Co-founder and CEO

256 Development