Story theme
Latest
Latest
  • About Story
    • Story theme documentation
  • Updates
    • What's new in Story
      • Story Releases
  • Sections
    • Story sections
      • Accordion group
      • Blog posts
      • Collection list
      • Collection marbles
      • Collection split
      • Contact form
      • Custom liquid
      • Custom content
      • Featured collection
      • Featured product
      • Gallery
      • Icon columns
      • Image banner
      • Image with text
      • Logo list
      • Map
      • Mosaic
      • Newsletter
      • Overlapping images
      • Page
      • Policy links
      • Press
      • Rich text
      • Slideshow
      • Tabs
      • Team
      • Testimonials
      • Text columns with images
      • Timeline tree
      • Timeline with banner
      • Video banner
      • Video player
  • Settings
    • Theme settings
      • Global theme settings
      • Typography
      • Colors
      • Layout
      • Social
      • Cart
      • Search
      • Product grid
      • Currency format
      • Favicon
      • Advanced
      • Checkout
      • Custom CSS
  • Header
    • Header
      • Header styles
      • Toolbar
      • Navigation images
      • Image menus
      • Transparent header
      • Mega-menu navigation
      • Drop-down navigation
  • Products
    • Product pages
      • Static product tabs
      • Unique product tabs
      • Product tabs
      • Color swatches
      • Inventory countdown
      • Pre-order products
      • Static size chart
      • Unique size charts
      • Creating pages
      • Size Charts
      • Product image sizes
  • Collections
    • Collection pages
      • Product badges
      • Sale badge
      • Savings badge
      • Sold-out badge
      • Custom badges
      • Badge settings
      • Custom filter options
      • Collection filtering
      • Collection sorting
      • Collection navigation
      • Feature image
  • Cart
    • Story cart
      • Cart styles
      • Shipping message
      • Estimate shipping calculator
      • Cart settings
  • Promotions
    • Upselling
      • Upsell promotions
      • How to setup
      • Static upsell promotion
      • Custom upsell promotion
  • Overlay
    • Popups
      • Cookies consent message
      • Newsletter popup
  • Siblings
    • Product siblings
      • About product siblings
      • Multiple images per variant
      • How to setup siblings
      • Siblings metafields
      • Cutline
      • Siblings collection
      • Siblings product setup
      • Siblings block setup
      • Variant image sets with alt-tags
  • Pages
    • Page templates
      • Page navigation
      • How to use page templates
      • Story page templates when using a different theme
      • Contact page
      • Lookbook
      • Team
      • Timeline
  • Blogs
    • Blogs and posts
      • Blogs
      • Articles
  • FAQ
    • Frequently asked questions
      • Where to make CSS changes
      • How to download latest version
      • How to add a line break in your headings
      • Share preview link
      • Remove Shopify link in footer
      • Check your theme version
      • How to use sections
      • Adding a section
      • Hiding a section
      • Reordering sections
      • Section blocks
  • License
    • Theme license
  • Support
    • Contacting support
Powered by GitBook
On this page
  • How to setup
  • Product setup
  • Theme editor setup
  • Final result
  1. Products
  2. Product pages

Unique product tabs

Display custom unique product tabs or accordions on individual product pages

PreviousStatic product tabsNextProduct tabs

Last updated 3 years ago

With unique product tabs, you can display custom content for each product in your store.

The basic steps are:

  • Create a product metafield for the tab text.

  • Add unique content to individual products in the metafield area.

  • in the Product description connect the tab text to the metafield as the dynamic source.

How to setup

Begin by creating a basic product metafield in your Shopify Settings:

Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on Products (click images to zoom):

  • Provide a Name for your metafield. In our example, we'll use Water rating, this will be our tab content. Each watch will have a unique water rating. You can define metafield that relates to your products.

  • The default Namespace and key can be used. No modifications are needed.

  • Choose Text, Multi-line text for the Content type.

  • No validation is required.

Save the metafield definition.

Product setup

Now that we've created a product text metafield, we can easily add custom tab content to any of our products that require unique information.

The next step is performed in the Shopify Admin -> Products. Choose a product and scroll to the bottom where you'll find all the metafields. There will be a new Water rating option where we can add unique details to:

Add unique content to products that require that information. For products that don't have any information entered, the tab won't appear when viewing online.

Theme editor setup

The final step is to configure the Product page settings in Story, using the Theme editor. Click on Product description under Product page:

Next, under the Tab heading, add a title for the tab. We will use "Waterproof rating".

In the Tab text area, click on the Insert dynamic source icon:

Choose the metafield created, we'll use Water rating:

Use the Insert button at the bottom to connect and Save your changes.

Final result

The tab or accordion will only appear on products that have metafield content. Other products won't show a tab. Also, each product that has content populated will be unique.

Experiment with multiple tabs by creating metafields for each one. If you need more than five tabs/accordions, you can create metafields for the Tab title as well. That will allow you to assign a tab title in the product setup.

Create new Product metafield
Choose Add definition
Multi-line text is recommended for tab content
Metafields are located at the bottom on the product setup pages