Generate Tabbed Content Section

Create a tabbed content section with horizontal/vertical tabs, rich text panels, icons, and smooth transitions for product details or FAQs.

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

Create a tabbed content section block:

Features:

  Multiple tabs with content panels
  Smooth tab switching animation
  Support for rich text, images, and HTML in each panel
  Optional icon for each tab


Settings for each tab:

  Tab label text
  Tab icon (optional)
  Tab content (rich text)


Section settings:

  Tab style (horizontal/vertical)
  Tab alignment (left/center/full-width)
  Active tab color
  Inactive tab color
  Content area background
  Border style
  Default open tab


Requirements:

  Support for up to 8 tabs
  Mobile: tabs convert to accordion or scroll horizontally
  Accessible with keyboard (arrow keys)
  No page reload on tab switch
  Smooth content height transitions


Generate the Liquid, CSS, and JavaScript for this as a custom section I can paste into my own theme.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/tabbed-content.liquid), paste the generated code in, and save. Then open the theme editor, go to the product template, and use “Add section” to place it where you want the tabs to appear.

How to Use

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