product Metafield Rich text not outputting HTML

Hunter11
Tourist
8 0 0

Hello, 

I'm updating our website to use Metafields on the product page for "Product Directions". 

The products have lengthy directions and need to be formatted with the rich text option to allow lists, bold, etc.

 

The issue is the metafield does not read HTML on the webpage. Please see the screenshot for reference.

If I create a new metafield using a single line or multi-line, HTML is fine. However, does not work with rich text. I think a simple piece of code is all that's needed, but I would need to know what code and where to put it.

 

Any help is appreciated. Thanks.

Screen Shot 2023-10-20 at 12.54.15 PM.png

Replies 5 (5)

Hunter11
Tourist
8 0 0

@AsadBaig Here is my post where I have a screenshot of the raw code being displayed on the front end of the website. 

Store URL: https://accceramics.com/

I only have 1 product using this product template currently, that URL Is: https://accceramics.com/collections/detail-products-1/products/motorcycle-ceramic-spray?variant=4377...Screen Shot 2023-10-22 at 4.49.03 PM.png

AsadBaig
Shopify Partner
43 1 2

Thanks for your response @Hunter11 .
Let me check and then get back to you very soon.

Get your e-commerce solutions
If you have any queries get in touch:
Email: baigasadullah4@gmail.com
Linkedin: https://www.linkedin.com/in/shopifystore-development-customization/
AsadBaig
Shopify Partner
43 1 2

Hi @Hunter11 ,
I think you need to have some custom code. Like

{{ product.metafields.custom.your-metafield | metafield_tag }}

Also, you can get help through this video:
https://www.youtube.com/watch?v=z_HL82_6Ank

If you're still facing any issues let me know.

Thanks

Get your e-commerce solutions
If you have any queries get in touch:
Email: baigasadullah4@gmail.com
Linkedin: https://www.linkedin.com/in/shopifystore-development-customization/
Hunter11
Tourist
8 0 0

@AsadBaig That video was very helpful. However, in my theme, Booster Theme, there is no liquid block under the product page content section. In the video he mentions being able to code in a liquid or rich text block, but does not show how to do so.

 

Thank you for your continued help.

rm-philmells
Shopify Partner
6 0 3

Not sure if you still need help on this (and I think I replied to you on another thread). You will need to edit the raw theme code for this, usually this is Online Store > Themes > Three dots button next to "Customize" > Edit Code. You'd have to find the file where this was being displayed and edit the output there, there should be a section file for the tabs somewhere (though I don't know the booster theme, all V2 themes have similar structures).