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.
12

Actually I didn’t manage to make it work fully. I’m also struggling with the returns tab.
No matter what I try to use it is blank.
Even when I creat custom snippet or page and try to link it to this tab it’s always empty .
How can I fix this please? Thanks

Kind regards
Theriion

1 Like