Create collapsible tabs ​

Baseline includes a convenient Collapsible tabs design feature.

Collapsible tabs make sections of text expand and collapse on your store's product description pages. Collapsible tabs reduce clutter on your storefront for smaller screens, like mobile devices, and apply a professional and contemporary design to your store.

For example, in the following video, a collapsible tab expands and collapses the text below the Details title.

Turn collapsible tabs on/ off ​

The collapsible tabs feature works on product pages by converting titles that use the Heading 2 style into collapsible tabs.

To enable collapsible tabs, complete the following steps.

1. Go to your store's admin Customize theme page.

2. From the dropdown at the top of the page, in the Templates section, select Products > Default product.

   

3. In the Default product menu, at the side, locate the Product pages menu section.

   

4. From the Product pages menu section, select Description.

   

5. Use the checkbox Enable collapsible tabs to set one of the following options:

   • On/ Checked. With collapsible tabs enabled, on all product pages, every title with a Heading 2 style will use the collapsible tabs feature.

   • Off/ Unchecked. Turns off the collapsible tabs feature on all product pages.

     

   TIP

   When you're finished adjusting the theme, to avoid losing unsaved changes, select Save at the top of the Theme settings menu.

   

Set a title to the Heading 2 style ​

When collapsible tabs are enabled, every title on your product pages with a Heading 2 style will use the collapsible tabs feature.

To set a title to the Heading 2 style, complete the following steps.

1. On your store's admin page, select Products.

   

2. Select a product from the Products list.

   For example, in the following image, a product named Plain cotton t-shirt is selected.

   

3. In the Description text editor, select a title, and then use the Formatting dropdown to set the style to Heading 2.

   For example, in the following image, the title named Details is set to the Heading 2 style. Now, on the corresponding product page, the Details title will use the collapsible tabs feature.

   Repeat step 2 and 3 for each product and title that will use collapsible tabs.