[Jeffrey13_0-1676460361017.png] Hi, when I query rich text from a product metafield I get a liquid format. But i m using Hydrogen and i would like to know if it possible to convert it into a HTML format.

Hi, I have the same issue but I’m using the headless Storefront API. I’m getting this format when I declare a custom field as a rich text. Any idea how to get it formatted? (like the description field, with or without HTML for example). Or do we have access to a JS helper to parse the RichText type?…

Hey mate, did you find a solution for this, I have the same issue.

I actually built it myself at first. I would have loved to give you the React code I wrote, but since we actually changed our mind in the content type, we did it differently. To give you a bit of context, I’m using Shopify flow to push data into my custom field. However, the RichText type was not su…

Thanks mate, I appreciate you taking the time to answer.

Not the most elegant thing in the world, but anyone reading this looking for a solution, you can just grab that :grimacing: export function toHTML(content) { let parsed = JSON.parse(content); let html = ''; parsed.children.forEach((node) => { switch (node.type) { case 'heading': html +=…

Here is a package for this purpose: shopify-rich-text-renderer Like @Lokiii mentioned before, it would be nice to have an official serialiser.

For anyone who is interested, I figured out that there is one ‘feature’ missing from the metafield_tag solution: respecting newlines. To add that functionality use an additional newline_to_br tag: {{ product.metafields.custom.info | metafield_tag | newline_to_br }} And whoever is looking to modify…

Hi there, if it can help, here is a recursive (needed for the children type) React + Typescript implementation which should be relatively easy to turn into any other language you need (or in Liquid?). Can work easily with any CSS framework with the classNames provided as well. type ShopifyRichTextR…

Great solution for TS, thanks for sharing :grinning_face_with_smiling_eyes:

Convert rich text into readable HTML format

Retired Boards Appdev Custom Storefronts

rb_sss May 8, 2023, 4:30pm 8

Appreciate this! Worked for our use case too, thank you!

Topic		Replies	Views
How can I output HTML from the rich text collection metafield? Store Design collection-page	15	2873	May 7, 2024
Render richtext metefield html in Flow? No access to metafield_tag Shopify Apps shopify-apps	4	175	January 8, 2024
Rich Text metafield JSON input via GraphQL Metafields troubleshooting , Setting-Up	2	385	October 4, 2025
Product Metafield Rich text not outputting HTML Store Design product-page	5	900	March 1, 2024
Retrieve metafield with metaobject type rich text Store Design	6	547	October 23, 2024

Convert rich text into readable HTML format

Related topics