How can I output HTML from the rich text collection metafield?

Store Design
1

Hi I’m using the new collection metafields to add some extra content on collection pages.

All works as expected except for the rich text metafield.

When I use

{% if collection.metafields.custom.collection_quick_links.value %}

        {{ collection.metafields.custom.collection_quick_links.value }}
          
      {% endif %}

This outputs raw JSON to the page, what I want is to output the HTML from the rich text metafield.

Any ideas?

3 Likes
2

Figured it out, needed a metafield filter for some reason, not sure why some metafields need these for output and some don’t? Just need to add

{{ collection.metafields.custom.collection_quick_links.value | metafield_tag }}

23 Likes
3

Hello @alexmorris

It’s GemPages support team and glad to support you today.

You can try with the following code:

{% if collection.metafields.custom.collection_quick_links.value %}
         {{ collection.metafields.custom.collection_quick_links.value | metafield_tag }}     
{% endif %}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

4

Don’t work for me unfortunately. I get the error:

metafield_tag can only be used with a metafield drop

This is a metafield Rich Text for a collection. When I remove | metafield_tag it just show the JSON indeed. Any help?

2 Likes
5

I think you need to remove “.value”

This will work:

{{ product.metafields.custom.field | metafield_tag }}

But this won’t:

{{ product.metafields.custom.field.value | metafield_tag }}
21 Likes
6

thanks so much

7

The above worked for me. Is this referenced on the Shopify docs anywhere?

8

Thanks!

9

Is there a way to iterate through children of rich_text_field?
Something like this (my code doesn’t work) could be useful to build a per-product FAQ, building accordion interface around the parsed rich-text:

{% for item in product.metafields.custom.faq.children %}
            {% if item.type == 'heading' %}
              {% comment %} Print HTML for heading {% endcomment %}
              #### {{ item.children[0].value }}
            {% endif %}
            {% if item.type == 'paragraph' %}
              {% comment %} Print HTML for paragraphs {% endcomment %}
              

{{ item.children[0].value }}

            {% endif %}
          {% endfor %}
10

You don’t want to be parsing the rich text, so brittle if anyone changes formatting. Just run each accordion field as its own custom metafield

11

Hi Devlife, should be better documented indeed.

https://shopify.dev/docs/api/liquid/filters/metafield_tag

12

A solution/npm package, for anyone look for converting a Metaobject’s rich text type to HTML using Javascript (i.e. you are querying the Metaobject using the storefront API or using Hydrogen. I built the package to make it super easy to convert it Shopify rich text AST to HTML.

I am posting this in this thread as I had searched for a Shopify Official solution far and wide without success ( one would think they would have one since they must be converting it themselves internally. So I just had to build it myself. We have been using it since internally since Feb. without any issues. Hopefully this is helpful for those looking far and wide as I did.

NPM Package:
shopify-rich-text-renderer

1 Like
13

Rich Text type:-
metafield_tag filter is specifically needed for rich text metafields in Shopify.

Rich text metafields store formatted text content, including HTML tags for elements like paragraphs, bold text, or lists.
The metafield_tag filter acts as a parser, interpreting these HTML tags and converting them into the actual formatted text you see on the storefront.

Other types:-
All other metafield types don’t contain HTML tags, so there’s no need for parsing or rendering with metafield_tag. The data is presented directly based on its type.

1 Like
14

I am surprised this is not mentioned in any docs as far as i am aware.

1 Like
15

Right ?!? The do mention the filter here (https://shopify.dev/docs/api/liquid/filters/metafield_tag), but they could do a better job letting it be known that it is needed in the appropriate places.

It is also surprising there storefront API used for hydrogen only returns an AST rather than having the option to output the corresponding HTML or the fact the community had to create a package ( https://www.npmjs.com/package/@thebeyondgroup/shopify-rich-text-renderer ) for that.

Also what’s the point if not just outputting the HTML ? How many people need to manipulate the AST ?

1 Like
16

Hey @mcqua007 ,

I can’t agree with you more. Liquid filters would normally the last place I will dig through if I cannot access the correct format no matter how. This one in particular what stops us from putting it on the liquid api metafield / metaobject docs?

Another thing I never feel clear enough is between the type definition in liquid schema and metafield data source types. For instance I want some html from metafield data source and render as it is in liquid. Which type in metafield for the field (likely rich text area or multi lines text) and which type in liquid schema (rich-text)? How may I make them compatible with each other so that I can use the dynamic data source in Customizer?

And don’t even mention the headless communication with metafield yes it requires a package to do the conversion.

lastly please allow me to double ask, what’s the point of not to output html from rich text field?

1 Like