Hi everyone,
What would be some options to generate a metafield table for things like product dimensions, product specifications, further information, for the RIDE theme.
I am looking to create a table similar to the demo one here https://metafields-guru-demo-store.myshopify.com/collections/frontpage/products/product-with-custom-tabs - please see the “how to choose a tshirt, shipping info and size guide” table.
I have tried used this tool which was suggested in some similar Shopify discussion posts - https://webforward.github.io/shopify-tables/#. This didn’t work, because it asked us to render the snippet in the product template or product snippet. It can’t, because the RIDE theme’s product template is a JSON file and the render code doesn’t work there. The RIDE theme doesn’t have a product snippet either.
I have also tried using this tool https://metafields-guru-demo-store.myshopify.com/collections/frontpage/products/product-with-custom-tabs. This one doesn’t work either because it’s built for the “Debut” theme, which is no longer available. The debut theme has a “product-template.liquid” file which the Ride theme doesn’t have.
I have tried to render it in the “collapsible content” section of the Ride theme, but that hasn’t worked either.
Hi @sipandswirl ,
We have installed the Ride theme and wrote this code for your compatibility to access the same file. Follow the steps below:
Step 1: Navigate to Settings → Custom data → Products. Click on “Add Definition” and add the meta field name you have. Then select the type as rich text and save. If you need 3 tabs, repeat this process 2 more times with the same pattern.
Step 2: Navigate to Online Store → Themes → Edit code. Search for the file “main-product.liquid,” then find the schema and paste the code. Below the schema, ensure you see the “” tag, then paste the script code.
{
"type": "custom-tabs",
"name": "Custom Tabs",
"limit": 1
},
Step 3: Search for “{%- endstyle -%}” in the file and paste the code above it. Finally, search for “{%- when ‘@app’ -%}”, then enter a new line and paste the code.
{%- when 'custom-tabs' -%}
{% if product.metafields.custom.product_dimensions != blank or product.metafields.custom.product_specifications != blank or product.metafields.custom.further_information != blank %}
{% if product.metafields.custom.product_dimensions != blank %}
{% endif %}
{% if product.metafields.custom.product_specifications != blank %}
{% endif %}
{% if product.metafields.custom.further_information != blank %}
{% endif %}
{% if product.metafields.custom.product_dimensions != blank %}
{{ product.metafields.custom.product_dimensions | metafield_tag }}
{% endif %}
{% if product.metafields.custom.product_specifications != blank %}
{{ product.metafields.custom.product_specifications | metafield_tag }}
{% endif %}
{% if product.metafields.custom.further_information != blank %}
{{ product.metafields.custom.further_information | metafield_tag }}
{% endif %}
{% endif %}
Step 4: Go to Products and open any product. Scroll down to the end of the products and add the description where you want to show it.
Last Step: Navigate to Online Store → Themes → Customize. Then, at the top, select → Product → Default Product. On the left sidebar, add a custom block for Tabs.
