|  Pipeline theme
Latest
Latest
  • About Pipeline
    • Pipeline theme documentation
    • Learn Pipeline
  • Updates
    • What's new in Pipeline
    • Pipeline releases
  • Sections
    • Pipeline sections
      • Explore all the sections
      • Accordion group
      • Accordion single
      • Blog posts
      • Collections list
      • Collection product grid
      • Contact form
      • Custom HTML
      • Custom Liquid
      • Custom content
      • Featured article
      • Featured product
      • Gallery
      • Gallery text
      • Icon columns
      • Image banner
        • Countdown timer
        • Collage
      • Image with text
      • Logo list
      • Map
      • Mosaic
      • Newsletter
      • Page
      • Product grid
      • Product slider
      • Product slider tabs
      • Products with image
      • Recently viewed products
      • Rich text
      • Scrolling promotion
      • Shop the look
      • Slideshow
      • Tabs
      • Text columns with images
      • Video
      • Video banner
  • Settings
    • Theme settings
      • Global theme settings
      • Color
      • Typography
      • Layout
      • Search
      • Product card
      • Product form
      • Cart
      • Social media
      • Currency
      • Favicon
      • Advanced
      • Checkout
      • Custom CSS
      • Theme style
  • Header
    • Announcement bar
      • Settings and colors
      • Free shipping message
      • Text announcement
      • Icon column
      • Custom HTML
    • Header
      • Header styles
      • Icon styles
      • Toolbar
      • Navigation images
      • Collection block
      • Linking to menu items
      • Transparent header
      • Sticky header
      • Highlight sale menu
      • Collection images
  • Footer
    • Pipeline footer
      • Footer
      • Subfooter
  • Products
    • Product pages
      • Pre-orders
      • Breadcrumbs
      • Tabs and accordions
      • Tabs with metaobjects
      • Product page layout options
      • Product zoom
      • Inventory count down
      • Size charts
      • Unique product content
      • Alt-text sizing information
      • Swatch size
      • Color swatches (legacy)
      • Product siblings
      • Complementary products
      • Buy it with
  • Collections
    • Collection pages
      • Subcollections
      • Badges / Stickers
      • Custom filter options
      • Collection sorting
      • Layout options
      • Speed performance
  • Cart
    • Pipeline Cart
      • Cart types
      • Cart page
      • Cart drawer
      • Cart popup
      • Editing cart text
      • Cart upselling
      • Settings
  • Promotions
    • Upselling
      • Complementary products
      • Buy it with
      • Upsell with Quick View
      • Cart upselling
      • Upsell multiple products
      • Basic version
  • overlay
    • Cart drawer
      • Drawer cart
      • Popup cart
    • Popups
      • Cookies consent message
      • Newsletter popup
      • Text popup
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Siblings metafields
      • Cutline
      • Siblings collection
      • Siblings product setup
      • Add siblings block
  • Search
    • Predictive search
  • Pages
    • Page templates
      • Overview
      • Unique page content
  • FAQ
    • Frequently asked questions
      • Default theme content
      • Context picker
      • Check your theme version
      • Share preview link
      • How to download latest theme version
      • Migrating your settings
      • Improving the speed of your site
      • Optimizing performance of your Product Card & Collection pages
  • Apps
    • Shopify apps
      • Supported apps
      • App integration
      • Search and Discovery
  • License
    • Theme license
  • Support
    • Contacting support
Powered by GitBook
On this page
  • How to use
  • Layout style
  • None
  • Tabs
  • Accordions
  • Creating tabs and accordions
  • Removing tabs and accordions
  • Important message about unique content
  • Product templates
  • Dynamic source
  • Unique Content - How to setup
  • Metafields method
  • Video tutorial
  • Metaobjects method
  1. Products
  2. Product pages

Tabs and accordions

Organize your product description with easy to use tabs and accordions

PreviousBreadcrumbsNextTabs with metaobjects

Last updated 1 year ago

With Pipeline, you can display your product description in either a tabbed or accordion format. Enhance customer confidence in your products and brand by adding supplementary content to your product pages.

How to use

Start by clicking on the Product description section on any product template, to open the product description section settings:

Layout style

Under Layout, you can choose between:

  • None - Only shows the product description and no additional tabs or accordions.

  • Tabs - Displays tabbed style content beginning with the product description.

  • Accordions - Displays the accordion style expand and collapse content beginning with the product description.

None

Choosing None will remove the tabs/accordion formatting and only show the Product description from the product setup in your Shopify Admin -> Products:

Enable read more

Manage the amount of content shown:

  • Unchecking the "Enable read more" displays all the Product description content.

  • Check the option to condense content and add a "Read more" link.

Tabs

Choosing Tabs will display a tabbed version of your content. The Product description, when enabled will be the first tab followed by additional tabs you can create within the current section settings:

Show description

The Product description from your product setup in the Shopify Admin -> Products can be shown or hidden as the first tab.

  • When unchecked, the content is not pulled from your product setup.

Accordions

The accordions option displays the content in expanding and collapsing FAQ-style accordions. When "Show description" is checked, the first accordion displays the Product description from your product set up, followed by additional content that you can create in the current section settings:

Icon description

You can choose from pre-made and professionally designed icons to include before the tab/accordion title, similar to the icon block.

Open by default

  • When checked, the first accordion is expanded by default.

  • When unchecked, all accordions are collapsed.

Creating tabs and accordions

The Product description section settings include the ability to create additional tabs/accordions, these are created under Sections. Begin with Section 1:

  • Add a Tab heading

  • Optionally choose an Icon, which is displayed at the start of the title.

  • Add text information into Tab text

  • Repeat for Section 2, Section 3, etc. to create additional tabs/accordions.

Removing tabs and accordions

To hide a tab/accordion:

  • Erase the Tab heading content.

  • You can keep the Tab text if you plan to show the tab again in the future.

To completely remove a tab/accordion:

  • Remove content from both the Tab heading and Tab text

You can replace it with new content if desired or leave it blank to remove the tab/accordion entirely.

Important message about unique content

The tabs/accordions created in these Sections will appear on all product pages. This results in the same tab/accordion content that is displayed with your products using the default Product template.

  • This is standard behavior when adding content into the Theme Editor sections for the default Product template.

  • Shopify provides a couple of different methods to help you add unique content to a group of products or individual products.

Product templates

To share content with only certain products:

  • You can create an additional product template and assign that template to certain products. Tab content is unique to only products that have that product template assigned to them.

Dynamic source

For unique content with each product, you can use metafields or metaobjects methods:

  • Use Metafields and customize the Tab heading and Tab text for any of your products. This allows you to add a custom tab title and tab content right from the Product setup in the Shopify Admin -> Products. or,

  • Metaobjects, which allows you to centrally manage all your tab content in one place. With Metaobjects, you can add all your tab content entries in one place and then later modify that content right from the same place. You no longer have to update each Product in the product setup.

Unique Content - How to setup

Using Shopify's Dynamic data source feature and metafields, you can display custom tab content for any of your products.

Metafields method

Basic steps

  1. Using the Shopify Admin under Settings -> Custom data, define a product metafield. for the Tab Title. The Content type is Single-line (easy step).

  2. Define a second product metafield, this one for the Tab Content. The Content type is Multi-line text.

  3. Link the two metafields in the Theme Editor under the Product description section using the Shopify dynamic source icon for the Tab title and Tab content.

  4. The last step is to add a tab heading and tab content in the Shopify Admin -> Products, for any of your products that wish to display a custom tab. Simply add the content under the Metafileds section of the Product setup.

Begin in the Shopify Admin -> Settings -> Custom data, choose Products:

Here you can create (define) two metafields for the Unique Tabs setup:

  • Tab Title

  • Tab Content

.The Tab Title can be set to use "Single-line text" whereas the Tab Content metafield should be "Multi-line text" to add longer text content in the tab:

Video tutorial

All the steps required to create the two Tab title and Tab content metafields, and also how to use them with your products:

Tip for editing metafield content

You can quickly modify the metafield content for any product when in the Theme Editor by simply clicking on the linked metafield in the section settings:

Metaobjects method

We have a full video overview on how to set up a Metaobject, add entries (tab headings, tab content, link to your products, and change the content at a later time:

Tabs with metaobjects
Product description accordions
"Care" accordion is hidden
Opens the metafield information for current product