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

Technical Q&A
1

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:

◄{{product.metafields.custom.tab_1_title }}
{{product.metafields.custom.tab_1_content}}
◄{{product.metafields.custom.tab_2_title}}
{{product.metafields.custom.tab_2_content}}
◄{{product.metafields.custom.tab_3_title}}
{{product.metafields.custom.tab_3_content}}
◄Shipping Information
Place information on shipping and delivery here.

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

2

Hello @GH2023 ,

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

image.png
image.png901×455 22.6 KB

3

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

4

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