Solved

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

alexmorris
Shopify Partner
37 2 23

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? 

Accepted Solution (1)

alexmorris
Shopify Partner
37 2 23

This is an accepted solution.

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 }}

View solution in original post

Replies 15 (15)

alexmorris
Shopify Partner
37 2 23

This is an accepted solution.

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 }}

LDO1
Tourist
4 0 6

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?

MadeByField
Shopify Partner
7 0 13

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 }}

 

 

Alexgvb
Shopify Partner
4 0 0

thanks so much

farreal
Shopify Partner
12 0 5

Thanks!

mcqua007
Shopify Partner
11 0 9

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

alishahzad
Shopify Partner
13 0 3

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.

Muhammad Ali
benhu
Shopify Partner
4 0 3

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

mcqua007
Shopify Partner
11 0 9
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 ?

benhu
Shopify Partner
4 0 3

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? 

 

 

GemPages
Shopify Partner
5589 1261 1218

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.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
KuznetsEnvy
Shopify Partner
38 0 11

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 %}
              <h4>{{ item.children[0].value }}</h4>
            {% endif %}
            {% if item.type == 'paragraph' %}
              {% comment %} Print HTML for paragraphs {% endcomment %}
              <p>{{ item.children[0].value }}</p>
            {% endif %}
          {% endfor %}

 

alexmorris
Shopify Partner
37 2 23
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

devlife
Shopify Partner
9 0 5

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

Gijs_shopprosNL
Shopify Partner
5 0 1

Hi Devlife, should be better documented indeed.

 

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

https://shoppros.nl - Shopify Migrations and E-commerce Consultancy