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