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

Nice guide!

but how can i set tabs in order to take only certain paragraphs in the product Description?

i mean:

{{ product.description }}

with this tab-1 takes all the description, but i want that tab-1 takes only some paragraphs in the product description form, and tab-2 (i.e. “ingredients”) takes others paragraphs below, and so on (tab-3/4/5).

what i have to write in product-template.liquid?

and in the product description form, what i have to write (HTML) to separate paragraphs for the different tabs?

Thanks in Advance,

Jajo