Hi everyone! I have done a lot of research on how to include a tabs section on my product page to display all the information in a seamless user-friendly way. I think I have finally found the code on how to do it in the style I want based on this blog post – https://happypoints.io/blog/add-tabs-to-shopify-product-page-without-app-c2-stt-57/
However, I have noticed with tabs sections that all tabs point to the same generic pages (e.g. shipping page or size guide page, etc). However I want my tabs to correlate directly with the product information like the example below, so it shows the product description, product details and fit & care information. All this information is going to be unique based on the product. This website has managed to do it to their store so it must be possible but I don’t know how. Any help or advice would be greatly appreciated! Desperate to have this feature on my store so I’m thinking about hiring a Shopify expert to help?
Inspiration – https://arcinaori.com.au/products/gaia-dress-papaya
My store – https://927103-16.myshopify.com/
The best way to achieve this would be using metafields. You can set the tab section to link to a dynamic source, and create a Product Details metafield that can be edited within each product listing with the required information. The most user friendly way to achieve this would be using a rich text input within the schema, allowing you to select the required metafield via the customization menu, instead of hard coding any values.
From the blog post you linked, that would require replacing the tab content with {{ section.settings.product_details}} and including the product_details as an input within the schema.
For example:
{{ section.settings.product_details }}
Schema example:
{
"type": "richtext",
"id": "product_details",
"label": "Product Details"
},
https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema
Feel free to reach out if you need further help
Simon
1 Like
Hi Simon,
Thank you for your advice on my last post to the discussion board about tabs within my product section. If I’m honest, I feel a bit overwhelmed by the code, do you offer further help for installing code? If this isn’t something you offer I completely understand and will try my best to follow the steps you’ve given.
I want it to look just like this websites – https://arcinaori.com.au/products/gaia-dress-papaya
If you feel like this is something you can help with I’d love to find out more!
Thank you,
Emily
Hi! I haven’t inserted the code for it yet, I wanted to try and figure out how to make the tabs appear with the information i need first, sorry that’s why you cant see it currently.
