Product tabs

Organize your product description with easy to use tabs

Story 2.0

Metafields for displaying unique and custom content

Product description tabs in Pipeline supports Shopify's Dynamic source feature with Online Store 2.0. Metafields allow you to attach custom content to each product and then display them on the product page.

Unique content

With Shopify Online Store v2.0 (OS2) and Story 2, you can use metafields to store and display unique content for each tab including the title and tab content.

Video tutorial on how to create metafields and add to your product tabs:

In this quick video (from our Pipeline theme using the same concepts), we demonstrate how to create a tab called "Ingredients". This tab uses metafields to add unique content for any product. Steps included:

  • Create a tab in the Theme Editor with the default product template, product description.

  • Define a product metafield called "Ingredients".

  • Add the newly defined metafield as a dynamic source.

  • Add unique content to a product in Product setup.

  • View the new tab which only appears on products that have content added.

Tip for editing metafield content

A quick method to modify the metafield content for any product when in the Theme Editor:

Story 1.x

Product tabs in Story help you organize product specific, unique product information and also shared content for all your products.

Easily add shared information once into Story's tab blocks to display the same content on all your product pages in one step. No need to repeat that information on all product pages.

Mix unique content tabs and shared common tabs.

Shared Content Tabs

Shared content tabs are added in the Theme Editor. Choose Add content and select from:

Text HTML Page

Description H6 is for unique content and covered below.

Unique Content Tabs

Unique content specific tabs be created for each individual product. Create as many tabs as you like.

To create unique content specific tabs, add the Description H6 block under content:

After adding Description H6, simply add content in your Product Description and use an H6 for the tab title.

Video Tutorial

Learn how to add unique content tabs in Story and how to combine uniquie content tabs with shared tabs:

Tab Position

Tabs can be displayed below or beside the product image:

Accordions

Display tabs as accordions when a large number of tabs are used:

Last updated