[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.

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 +=…

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

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:

You could maybe try this one: https://www.npmjs.com/package/@novatize-mattheri/shopify-richtext-renderer?activeTab=readme It works by creating React nodes allowing you to pass props (classNames, ids, etc…).

Convert rich text into readable HTML format

Retired Boards Appdev Custom Storefronts

Figumari July 5, 2023, 10:42am 9

Here is a package for this purpose: shopify-rich-text-renderer

Like @Lokiii mentioned before, it would be nice to have an official serialiser.

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

Convert rich text into readable HTML format

Related topics