My Metafields are not displaying correctly. They are showing raw data

[Arun_O]

Hey All.

My store URL is https://caresmith-india-cd1f.myshopify.com/ I am using Ella theme for shopify and somehow all my metafields are displaying in what I believe is JSON format instead of how they should be displayed. 

They are rich text metafields and this is the output they are giving on the front end. 

{"type":"root","children":[{"listType":"unordered","type":"list","children":[{"type":"list-item","children":[{"type":"text","value":"Item 1"}]},{"type":"list-item","children":[{"type":"text","value":"Item 2"}]},{"type":"list-item","children":[{"type":"text","value":"Item 3"}]}]}]}

On the product page in the metafield editor it shows perfectly fine as 

• Item 1
• Item 2
• Item 3

but on the product page on the front end it shows that unformatted metafield code

Would appreciate any help

[JHKCreate]

Add .value at the end of your metafield variable. Let us know if that does it!

[Arun_O]

At the end of the variable name? or in the product-tab.liquid where the metafield is referenced?

[Arun_O]

Here's the liquid for the metafield tab

			{%- liquid
				assign title = block.settings.title
				assign has_tab = false
				assign source = block.settings.product_custom_source
				assign key = block.settings.product_tab_key_metafield

				if source == 'dynamic'
                   assign meta_ref = key
                else 
                   assign meta_ref = product.metafields.c_f[key]
                endif 
                
				if block.type == 'custom'
					if block.settings.type == 'metafield'
						if meta_ref
			                assign has_tab = true
			                assign content = meta_ref
			            else
			            	assign has_tab = false
			            endif
			        else
			        	assign has_tab = true
			        	assign content = block.settings.content
			        endif
				else
					assign has_tab = true
					if block.type == 'description'
						assign content = product.description
					else block.type == 'review'
						assign content = product.metafields.spr.reviews
					endif
				endif

				if block.type == 'description' or block.type == 'review' or block.type == 'custom'
					assign style_mobile = false
					if block.settings.open_tab_mobile
						assign style_mobile = 'show-mobile'
					endif
					if tab_layout_mobile == 'popup'
						assign style_mobile = 'popup-mobile'
					endif
				endif
			-%}

[Arun_O]

Still looking for a solution for this. Would appreciate any help

[Arun_O]

Bumping for visibility

[Hunter11]

Did you ever solve this issue? I am facing the same problem.

[AsadBaig]

Hi @Hunter11 
Please Share your store url, and meta fields data

[rm-philmells]

This is a relatively easy one to fix. When you want to render/output the content you need to apply the metafield_tag filter to it.

In liquid this is just: 

{{ RTE_METAFIELD_REFERENCE | metafield_tag }}

to output it. If you need it as a variable you can use the following (or you can capture it): 

{% assign VARIABLE_NAME = RTE_METAFIELD_REFERENCE | metafield_tag %}

You won't be able to do anything with these fields without delving into a bit of template modification.

[Hunter11]

I am attaching the code snippet for the product page tab. Hopefully, by looking at it, you'll be able to indicate where to put one of these lines of code to fix this issue. Thank you for your assistance.

<div class="product--tab__content {% if first %}tab--show{% endif %} {% if block.settings.content == 'description' or block.settings.content contains 'page' %}{% endif %}" id="tab--{{-block.id}}">
    {%- case block.settings.content %}
        {% when 'description' %}
            {{product.description}}
        {% when 'reviews' %}
            {% if settings.reviewApp == "loox" %}
                <div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default">{{ product.metafields.loox.reviews }}</div>
            {% elsif settings.reviewApp == "shopifyReviews" %}
                <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
            {% elsif settings.reviewApp == "alireviews" %}
                <div id="shopify-ali-review" product-id="{{ product.id }}"> {{ shop.metafields.review_collector.review_code }} </div>
            {% endif %}
        {% when 'custom' %}
            {{block.settings.customContent}}
        {% when 'metafield' %}
            {% assign metafield = product.metafields[block.settings.metafieldNS][block.settings.metafieldKey] %}
            {{metafield}}
        {% when 'page' %}
            {% assign page = pages[block.settings.page] %}
            {{page.content}}
        {% when 'productPage' %}
            {% assign handle = 'content-' | append: product.handle %}
            {% assign page = pages[handle] %}
            {% assign price = product.price | money | strip_html %}
            {% assign prediscount = product.compare_at_price_max | money | strip_html %}
            {{page.content | replace: '%product%', product.title | replace: '%brand%', product.vendor | replace: '%price%', price | replace: '%prediscount%', prediscount}}
    {% endcase %}
</div>

{% comment %}
{% blockdef %}

{% endblockdef %}
{% endcomment %}

[rm-philmells]

Assuming that the metafield is always a Rich Text metafield, you can edit the code to the following:

<div class="product--tab__content {% if first %}tab--show{% endif %} {% if block.settings.content == 'description' or block.settings.content contains 'page' %}{% endif %}" id="tab--{{-block.id}}">
    {%- case block.settings.content %}
        {% when 'description' %}
            {{product.description}}
        {% when 'reviews' %}
            {% if settings.reviewApp == "loox" %}
                <div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default">{{ product.metafields.loox.reviews }}</div>
            {% elsif settings.reviewApp == "shopifyReviews" %}
                <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
            {% elsif settings.reviewApp == "alireviews" %}
                <div id="shopify-ali-review" product-id="{{ product.id }}"> {{ shop.metafields.review_collector.review_code }} </div>
            {% endif %}
        {% when 'custom' %}
            {{ block.settings.customContent }}
        {% when 'metafield' %}
            {% assign metafield = product.metafields[block.settings.metafieldNS][block.settings.metafieldKey] %}
            {% if metafield contains '"children":' %}
                {{ metafield | metafield_tag }}
            {% else %}
                {{ metafield }}
            {% endif %}
        {% when 'page' %}
            {% assign page = pages[block.settings.page] %}
            {{page.content}}
        {% when 'productPage' %}
            {% assign handle = 'content-' | append: product.handle %}
            {% assign page = pages[handle] %}
            {% assign price = product.price | money | strip_html %}
            {% assign prediscount = product.compare_at_price_max | money | strip_html %}
            {{page.content | replace: '%product%', product.title | replace: '%brand%', product.vendor | replace: '%price%', price | replace: '%prediscount%', prediscount}}
    {% endcase %}
</div>

{% comment %}
{% blockdef %}

{% endblockdef %}
{% endcomment %}

Note that this does a simple if else check to see if it contains the string of text '"children":' (all Rich Text metafields have this text inside).

Obviously make sure you've got a copy of your code and let me know if you have any issues.