Hi there, here is what you are looking for! Hope it helps.
https://community.shopify.com/c/Shopify-Design/Adding-tabs-on-product-page-simple-entry/td-p/430363
Topic summary
Tutorial Overview:
This advanced tutorial demonstrates how to add tabbed product descriptions to Shopify product pages using HTML, CSS, JavaScript, and Liquid. The method creates three tabs: one for product description, one for a snippet (like shipping info), and one for static page content (like returns policy).
Implementation Steps:
- Verify jQuery is loaded in theme.liquid
- Replace product description code in product-template.liquid with tab structure
- Add custom CSS for styling
- Include JavaScript for tab switching functionality
Common Issues & Solutions:
- Empty Returns Tab: Users need to create a page with handle ‘returns’ or modify the code to match their page handle (e.g., {{ pages.refund-policy.content }})
- jQuery Not Working: Some report tabs display but clicking doesn’t switch content; active class fails to toggle properly
- Customization Questions: Multiple users ask how to split product descriptions across different tabs or add more than three tabs
Alternative Approaches:
- Several users recommend the free “Tabs By Station” Shopify app as a no-code solution
- Custom Accordion Product Tabs app mentioned for more advanced features
Status: Tutorial remains helpful but requires troubleshooting for specific themes. No definitive solution provided for jQuery switching issues.
1 Like
@AttaRehman the one that @elydenise shared the link too is the one I used.
How to do this in Canopy theme?
@JPV If you follow these instruction it should be global and work with any theme, if you get stuck and have any problems let me know.
I have followed this code using the Debut theme.
My problem is that the jquery code does not seem to be working.
Jquery loads fine on my site, so no issues there.
My console is clean, no errors.
When the html loads on the site, it loads as 3 tabs, with the content inside tab 1 showing, and the content inside tabs 2 and 3 hidden.
So far, so good.
The problem comes when I click on another tab. Nothing happens. I expect the ‘active’ class to be removed from the first tab, and to be applied to the current tab that was clicked. This is not happening.
A funny thing, though, is that when I click the current active tab, the code works fine. I added a console.log to test, and I see that when I click that first active tab, the active class is removed, and then added.
Any pointers appreciated.
I am placing this code all in a section on my site, if that makes a difference. It is a blank liquid file. Here is the code of the file:
- Info
- Shipping
- Returns
inside 1
inside 2
inside 3
1 Like
I found my problem. Was loading jquery twice.
1 Like
HiI don’t have theme.liquid option pls help me
Checkout latest video from our team to add Tabs in Product Description:
Hi, Great Customization. I followed the instructions and created the tabs successfully in Dawn 12.0 I also added the latest JQuery. The Product Description and the Returns tabs work perfectly. However, I am confused with the shipping tab instructions. I created a new snippet called ‘shipping’ as suggested. My question is how do I add the shipping content in the snippet. Does it require any codes or special formatting. Also can I create a snippet for Returns as well so that information is also not indexed by search engines? Any help is very much appreciated. Thanks
