How to add content tabs on a product page?

Technical Q&A
,
1

Hi all, I’m working on adding content tabs on pdp, something like that:

Screen Shot 2022-12-27 at 1.02.03 PM.png
Screen Shot 2022-12-27 at 1.02.03 PM.png1950×546 12.3 KB

Would appreciate the help! Thank you.

2

Hi Andrei, to achieve the tab effect, you’ll also need to use some custom css to style it as needed and possibly some custom js - but as far as getting the functionality working…

  1. Add Product Metafields. Go to Settings > Metafields then click on the Products fields. Add your definitions here, one for each - Details, How to Use, Ingredients, Packaging. Choose the Multiline text as the type.
  2. Create a new Template. Go to Online Store > Themes > Customise and from the drop down at the top of the page choose Products. You’ll see the Default Product but also a link to Create Template. Click on that, give it a name and base it on the Default Product. This will load you into the new template for you to make changes.
  3. Add your Blocks. On the left under Product Information you’ll see a link to Add Block. Click on that then find the Collapsible Row. Choose that, then in the Row Content click on the stacked disc icon and select the relevant Product Metafield.
  4. Rinse and Repeat. Do the same thing for each field you want and these will be added as collapsible/accordion style. You can then use some css or js to modify the look and behaviour.
  5. Set your template. Finally, when you update your product you can select the Custom Template and it will then show your custom fields.

I know this isn’t extremely comprehensive and there are probably other ways to achieve the same thing but hopefully this helps get you on the right track :+1:

3

@AndreiAghenii

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.