Create collapsible tabs

This guide describes how to use the Collapsible tabs block to add text areas that expand and collapse on your store's product pages.

Use collapsible tabs to reduce clutter on smaller screens and create a cleaner layout for your storefront.

The previous video shows a Product pages section on a store's Default product page. The section contains a Collapsible tab block. The block expands and collapses below the product's Details area.

Set up a Collapsible tab block

To set up a Collapsible tab block:

1. In your Shopify admin, select Sales channels > Online store > Themes.

2. In the Themes area, locate the version of Baseline you want to modify.

3. Next to the theme's name, select Edit theme to open the Theme editor.

4. In the Theme editor, use the template dropdown at the top of the page to select a template with a supported product section. For example, select Products > Default product.

   Note

   The supported product sections are:

   • Featured product
   • Product - horizontal
   • Product - three column
   • Product pages
   • Product pages - thumbnails

5. Select the product section to expand the section settings menu. For example, select the Product pages section.

6. In the expanded menu, select Add block, choose Collapsible tab, and then select the block you added.

7. In the block settings menu, adjust a setting described in the following table.

   Note

   After adjusting the settings, select Save to avoid losing unsaved changes.

Setting name	Description
Heading	In the Heading field, enter a single line of text to display as the block's title.
Heading text style	Use the Heading text style setting to apply the Heading or Body style to the block's title.
Tab content	In the Tab content field, enter text to display inside the block's tab area. Use the inline text editor to format the text and add links as needed.
Tab content from page	Use the Tab content from page picker to choose a store page as a source of text for the block's tab area.
Icon	Use the Icon setting to select None, Box, Chat bubble, Check mark, Coat hanger, and more. The icon is displayed alongside the block's heading.
Space above	Adjust the Space above slider between 0.5x and 2x to set the amount of space displayed above the block.
Remove block	Select Remove block to delete the block from the section.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the theme editor.