Product pages - Add tabs to product descriptions

Store Design

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.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
6

This was very helpful. Thank you!

I want to add more tabs, but don’t know how. Also, How can I add the information I need in each tab, like the ingredients etc… ? do I need to create an ingredient page for each product? If so, how to I link it?

checkout my results: www.marthalorine.com

3 Likes