← All Skills
Theme 💎 Built for Sidekick ✍️ Sidekick drafts it — you apply it
shopify sidekick theme product-page

Product Tabs Section

Add a tabbed content area on product pages for descriptions, specs, reviews, and shipping info.

View as Markdown

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt
Run in Sidekick 
Generate the Liquid, JavaScript, and CSS for a product tabs section for my product page template that I can paste into my theme as a custom section, with these specifications: the tabs should include: [TAB_1_NAME] (e.g., Description) showing the product description, [TAB_2_NAME] (e.g., Specifications) showing a table of product metafields from namespace [METAFIELD_NAMESPACE], [TAB_3_NAME] (e.g., Reviews) showing a placeholder for review app content, and [TAB_4_NAME] (e.g., Shipping) showing static shipping info text. The first tab should be open by default. Style the tabs with [TAB_STYLE] (options: underline, boxed, pill). Use [ACCENT_COLOR] for the active tab indicator. The tabs should be accessible with keyboard navigation and ARIA roles. On mobile, convert tabs to an accordion layout. Generate complete Liquid, JavaScript, and CSS.

To use it: go to Online Store > Themes > Edit code, create a new file sections/product-tabs.liquid and paste in the generated code (put any JS/CSS in assets/ and link them from the section file or theme.liquid), then open the theme customizer, go to your product page template, and add the new “Product Tabs” section where you want it to appear.

How to Use

  1. Copy the prompt above
  2. Open Shopify Sidekick in your Shopify admin
  3. Paste the prompt and replace the bracketed placeholders with your details
  4. Review Sidekick's response and apply the suggestions