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

[GH2023]

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

[Huptech-Web]

Hello @GH2023 ,

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

[GH2023]

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