DC Product Tabs

Add beautiful, customizable tabs and accordions to your product pages. Organize descriptions, specs, shipping info, and more.

Customize in Theme Editor

Getting Started

Open the Theme Editor

Click the button above or go to Online Store → Themes → Customize.

Navigate to a Product Page

In the theme editor, use the page selector at the top to switch to a product template.

Add the DC Product Tabs Block

Click “Add section” or “Add block”, find “DC Product Tabs” in the Apps section, and add it.

Configure Your Tabs

Set the display mode (tabs or accordion), add static tabs, configure colors, and enable description splitting.

Live Preview

This is how tabs look on your product page:

This premium widget is crafted from high-quality materials for lasting durability. Designed with both form and function in mind, it’s the perfect addition to any workspace.

Weight: 250g
Dimensions: 10 × 5 × 3 cm
Material: Brushed aluminum
Color: Space gray

Free standard shipping on all orders over $50. Express shipping available at checkout. 30-day return policy — no questions asked.

Features

Tabs & Accordion

Display content as horizontal tabs or a vertical accordion. Fully responsive on all devices.

Auto-Split Description

Automatically splits your product description into tabs based on heading tags (H2, H3, etc.).

Static Tabs

Add up to 5 global tabs like Shipping, Returns, or Size Guide that appear on every product.

Metafield Tabs

Pull tab content from product metafields for per-product dynamic content.

Page Tabs

Reference Shopify pages as tab content — great for shared policies and guides.

Lightning Performance

Zero external requests. All rendering on Shopify’s servers. No impact on page speed.

Full Customization

Colors, padding, border radius — all configurable in the theme editor. No code needed.

Accessible

Built with ARIA attributes and keyboard navigation. Fully accessible out of the box.

Auto-Split Description

Structure your product descriptions with heading tags to automatically create tabs:

<h2>Description</h2> <!-- Becomes the first tab --> <p>This premium widget is crafted from...</p> <h2>Specifications</h2> <!-- Becomes the second tab --> <p>Weight: 250g</p> <h2>Care Instructions</h2> <!-- Becomes the third tab --> <p>Hand wash only...</p>

Tip: In Shopify’s rich text editor, select text and choose “Heading” from the formatting toolbar to create H2 tags. Each heading automatically becomes a tab title.

Metafield Tabs

To display per-product content in tabs:

Create a metafield definition

Go to Settings → Custom data → Products → Add definition. Use a type like “Multi-line text” or “Rich text”.

Add content to your products

Edit a product, scroll to the Metafields section, and fill in the content.

Reference it in the tab settings

In the theme editor, enable a tab, set source to “Product metafield”, and enter the reference as namespace.key (e.g., custom.specs).

DC Product Tabs by Dream Commerce • Get Support