Display Specification Table in Metafield (Dawn)

[3enny]

Hi all!

For the past days I have been trying to insert a table into the metafield of a collapsible row on my product page.

I have already created my collapsible rows, and in order to pull product specific information, I have already managed to connect dynamic source in the row content.

I have looked at several solutions posted here already as well as trying to insert the JSON code as other community members have recommended, however the code is displayed, rather than the table itself.

I would also like it to be dynamic enough to resize between desktop and mobile.

Does anyone have any suggestions?

Best.

B.

[Huptech-Web]

Hello @3enny , Can you please share the store URL? Also, please share your code for the collapsible rows using meta fields, It will help me to understand the issue better.

[3enny]

Hi Rishi,

Thanks for you reply.

URL: https://www.raggajunglejungle.club/

At present I have removed al code for the metafield, and instead have made a text work around until I am able to find a solution.

You will be able to see this in the ‘Materials’ tab on the Tshirt page (https://www.raggajunglejungle.club/products/rjjc001-early-rotation)

Here are the examples I have been trying to follow: Table in JSON field - https://webforward.github.io/shopify-tables/#

Community solution - https://community.shopify.com/post/1692183

External solution - https://support.eightthemes.com/hc/en-us/articles/8283331726865-How-to-set-up-a-Specification-table-with-metafields

[Huptech-Web]

Hello @3enny ,

Thanks for sharing the details. But to help you in this I’ll also need the code of this section.
Can you please share the code you have used for the table section?

[3enny]

Hi Rishi,

Please see below and if possible, please tell me where I have gone wrong.

In custom data, I have created a new metafield called sizechart2 with namespace.metakey called “custom.sizechart2”

I have created a new snippet called “specification-table.liquid” and pasted the following code (available on the Shopify Product Metafield Specification Table Generator:

{% if product.metafields.custom.sizechart2.value.size > 0 %}

{% for row in product.metafields.custom.sizechart2.value %}

{% if row.size == 1 %}

{% for col in row %}

{% endfor %}

{% else %}

{% for col in row %}

{% endfor %}

{% endif %}

{% endfor %}

{{ col | last }}																																																																{{ col | last }}

{% endif %}

And as per the instructions I can now use the snippet in my product template using the following code (I’m not sure where the following code should be pasted, and this is lilely where I am coming into trouble):

{% render ‘specification-table’ %}

I have populated the table using the table generator on the page (https://webforward.github.io/shopify-tables/) and exported and copied the JSON code for the metafield.

I have then pasted this code into the Sizechart2 field in the product metafield on the product page.

I have then returned to online store editor to add a metafield to the product page. Customize → Product → Default products

When I follow Add block > Collapsible row > Row Content > Connect dynamic source > Current Template Product (and nothing is displayed *Note the SIZE tab shown is related to the metafield already created. The metafield called Sizechart2 containing the JSON code from the previous steps is not available to select.)

Thank you for your help, I hope you can understand my work flow to see where I have made an error.

Best,

B.

[Huptech-Web]

Hello @3enny ,

The Meta-field option for Sizechart2 is not showing in the theme options because the Meta-field type is JSON and the content you are adding in the theme option is a Rich-text type. Still, you can add the data of the Meta-field using some custom code below:

1. Open the Shopify Theme Editor and paste the below code into the “main-product.liquid” file:

Find the “{%- when ‘collapsible_tab’ -%}” and add the code in the condition as shown in the screenshot.

{{ block.settings.specification_table }}

Add the below code to the section schema

{
  "type": "liquid",
  "label": "Custom Liquid",
  "id": "specification_table"
},

2. Once done Go to the Shopify Theme Editor and add the below code to the Liquid section as shown in the screenshot.

{% render 'specification-table' %}

Please let me know if this doesn’t work!

[3enny]

Hi @Huptech-Web

Thanks for taking the time to offer your solution.

I have no problem inserting the code as per the first 2 steps.

Unfortunately when it comes time to inserting the third piece of code, I am unable to as me product section does no allow me to insert the code as I do not have a Custom Liquid field to paste it.

Any suggestions?

[Huptech-Web]

Hello @3enny , Add the Code in the schema it will create an option Liquid section. You have to find the code for “collapsible_tab”

in the schema and add the below code as shown in the screenshot.

{
  "type": "liquid",
  "label": "Custom Liquid",
  "id": "specification_table"
},

[TeddyMitchell]

Hey, @Huptech-Web

Is there a way to add tables to collapsible row like this example Product Details Tab? I’ve tried creating a section and adding it into snippet and adding the snippet, creating a metafield, render another section, etc.

Absolutely, no luck . Any help would be greatly appreciated .

[s_ZOO]

any solution to add tables to collapsible row ?