Tabs+ ships its storefront features as a Shopify theme app extension. This is what actually puts the tabs on your product pages, reading the content you set in the Tabs+ admin and rendering it according to your design preferences.
The extension provides three building blocks. The first is required; the others are optional and only needed for advanced layouts.
Block | Type | What it does |
Tabs+ Setup | App embed | The engine. Loads your tab content and the JavaScript that renders the tabs. Holds all the styling/behaviour settings. Must be enabled for tabs to appear. |
Product tabs | Theme block | Lets you decide where on the page the tabs are rendered, instead of automatically replacing the description. |
Variant description | Theme block | Renders the variant-specific description in its own area, separate from the main description and tabs. |
Tabs+ Setup (app embed)
This is the only block that's strictly required.
How to enable it
In the Shopify admin, go to Online Store → Themes and click Customize on your live theme.
Open the App embeds panel (puzzle-piece icon in the left sidebar).
Toggle Tabs+ Setup on.
Click Save.
What it does
Reads your tab content from product/shop metafields and pushes it into a global JavaScript object.
Loads the Tabs+ JavaScript bundle, which finds your product description on the page and replaces it with the tabbed layout.
Holds every styling and behaviour setting (orientation, colours, animation, icons, etc.). See All theme settings explained.
Please note:
By default, “Tabs+ Setup” finds your product description automatically using a list of common CSS selectors that work in most Shopify themes. If your theme is non-standard, you can specify a custom selector in the “Advanced settings” section. See Troubleshooting.
Product tabs (theme block)
By default, Tabs+ replaces your existing product description with the tabbed layout. If you'd like the tabs to appear somewhere else - for example, below the product images, or in their own section - you can add a Product tabs theme block to your product template.
How to add it
In the theme editor, navigate to a product page template.
Click Add block in the section where you want tabs to appear.
Choose Product tabs from the Apps category.
(Optional) The block has one setting - Product - which auto-fills with the current product. You only need to set this manually if you're using the block on a non-product page.
Click Save.
When the Product tabs block is present on the page, Tabs+ renders the tabs into that block instead of replacing the description.
Variant description (theme block)
If your variants have their own custom descriptions (see Variant titles and descriptions), this block lets you render them in their own dedicated area on the product page, completely separate from the main description and the tabs.
How to add it
In the theme editor, navigate to a product page template.
Click Add block in the section where you want the variant description to appear.
Choose Variant description from the Apps category.
Click Save.
When this block is present:
The variant's custom description appears in this block.
The main product description, tabs, and variant tabs continue to render in their default location (or in the Product tabs block, if you've added one).
Putting it all together
Most stores only need Tabs+ Setup enabled and that's it. You only need the Product tabs or Variant description blocks if you want fine-grained control over where Tabs+ content appears on the page.
Next steps
All theme settings explained - reference for every setting on the Tabs+ Setup app embed.
Troubleshooting - what to do if tabs don't show up.