How can I properly render HTML in a product metafield?

Store Design
1

I’m trying to add a list of text to a metafield for a product and when I add it as HTML, it doesn’t render it properly on the front end. Other posts have solved this problem by using a single line text metafield rather than a multi line metafield. But i’ve created a new one, plugged in some HTML, and it still displays as straight html.

See screenshot.

Any guidance would be appreciated.

screen 1.png
screen 1.png1920×1080 374 KB

2

Hi @linpin ,

Text won’t support this, you can just change it to “Reference Page”. https://i.imgur.com/ZN7kVQX.png

Then you create pages and select it in products. Finally, you just need to get it with the content of the page, it will work fine with HTML.

Code: {{ product.metafields.my_fields.namespace.value.content }}

Hope it helps!

3

Hi @LitCommerce

But does that solution mean that i need to create a page for every product given that the product details are different for every product? That seems cumbersome…I thought the point of the metafields was exactly for the purpose i’m describing.

Thanks for your help.

Lindy

4

Hi @linpin ,

Or you can create metafields as ‘Multi-line text’: https://i.imgur.com/18DLCjt.png

Then you just need to enter the html for it, everything will display fine: https://i.imgur.com/4NLVCzT.png

Hope it helps!

5

Hi Litcommerce

I’ve tried both single and multi line metafields and it doesn’t work for either. I’ve used an online html generator to make sure i’ve got the code correct and it’s still displaying html.

My theme is 2.0.

Any other ideas?

Thanks so much for replying

Untitled.png
Untitled.png1592×703 97.4 KB

Lindy

6

Hi @linpin ,

Can you send me the code of Metafield you enter or create a staff account.

I will check it. Because I checked ‘Multi-line text’ and it works fine.

7

Hi @linpin ,

I checked and metafield when added by Customize it wont work well. So you need to add it directly to the code.

https://i.imgur.com/kgY3lu1.png , https://i.imgur.com/ow1wP51.png

Hope it is clear to you.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

8

Hi @LitCommerce ,

How can I make this exact fix in the product liquid but for the theme “Dawn”?

Thank you,

Thomas

9

Hi @tclapmarketing ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

10

Hi @linpin did you find a solution for that?

2 Likes
11

You can display HTML using metafield.