Flex theme - metafields in accordion added through custom liquid not displaying correctly

Solved

Flex theme - metafields in accordion added through custom liquid not displaying correctly

GH2023
Tourist
3 1 0

Hello, 

 

I wonder if anyone can help me resolve the following issue:

 

I am using the Flex theme by Out of the Sandbox.

 

I created a custom liquid block to embed an accordion in the Product page template I created. Within the accordion I have links to metafields. The issue is that on the front-end the metafield data is not displayed properly.

 

Custom liquid code:

 

<dl class="accordion">

<dt><a href="#" class="active"><small class="right">◄</small>{{product.metafields.custom.tab_1_title }}</a></dt>
<dd class="active">{{product.metafields.custom.tab_1_content}}</dd>

<dt><a href="#" class="active"><small class="right">◄</small>{{product.metafields.custom.tab_2_title}}</a></dt>
<dd class="active">{{product.metafields.custom.tab_2_content}}</dd>

<dt><a href="#" class="active"><small class="right">◄</small>{{product.metafields.custom.tab_3_title}}</a></dt>
<dd class="active">{{product.metafields.custom.tab_3_content}}</dd>

<dt><a href="#" class="active"><small class="right">◄</small>Shipping Information</a></dt>
<dd class="active">Place information on shipping and delivery here. </dd>
</dl>

 

Content of one of the metafields on the front-end is displayed as follows:

 

{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"Included in this greenhouse is the following:"}]},{"listType":"unordered","type":"list","children":[{"type":"list-item","children":[{"type":"text","value":"Door 1"}]},{"type":"list-item","children":[{"type":"text","value":"Door 2"}]},{"type":"list-item","children":[{"type":"text","value":"Door 3"}]}]}]}

 

Can anyone help as to how I can display this correctly?

 

Thank you so much

Accepted Solution (1)

GH2023
Tourist
3 1 0

This is an accepted solution.

OK, I am going to answer it myself: just add | metafield_tag after the metafield name like this:

 

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

View solution in original post

Replies 3 (3)

Rishihuptech
Shopify Partner
628 115 128

Hello @GH2023 ,

 

Please let me know what Content-Type your Metafield is.
image.png

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
GH2023
Tourist
3 1 0

Hi, thank you so much for getting back to me. I found a YouTube video describing my exact problem and a solution for it, which I have documented on this thread. 

Kind regards

GH2023
Tourist
3 1 0

This is an accepted solution.

OK, I am going to answer it myself: just add | metafield_tag after the metafield name like this:

 

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