Rich text metafield rendering error: "type": "root", "children":…

Are you encountering a rendering error when trying to display rich text metafield values on your Shopify pages? Sometimes, you might see an error like this:

{ "type": "root", "children": ["children": [{"type": "paragraph","children": [{"type": "text","value":…

You might face this error when trying to render content from a rich text metafield directly in liquid code. So, what’s causing this issue, and how can you resolve it?

Use the metafield_tag liquid filter

The answer lies in utilizing the metafield_tag liquid filter, which generates an HTML element to host the metafield data. The type of element that’s generated differs depending on the type of metafield.

To implement the fix, simply integrate the metafield_tag liquid filter into your code. Let’s take a look at how you can do this:

    <div class="sb-person__bio">
      <h2>
        What are your personal values?
      </h2>
      {{ metaobject.personal_values | metafield_tag }}
    </div>

And that’s it! If you’re still facing challenges in displaying rich text metafield values on your pages, be sure to check out our guide on: How to display rich text metafield value on Shopify? for further help.