Collapsible tabs

Collapsible tabs help break up longer descriptions and make them more visually appealing.

This comes in handy when you want to show important notice or information without taking up too much space.

In this article, we will show you how to add a Collapsible tabs section.

#How to add a Collapsible tabs section to your Shopify store

#How to edit a Collapsible tabs section

#Section settings

#General

Adjust the Container (Fixed width/Narrow) for this section.

#Section header

Select your preferred Layout for the section:

Add the content you want in the Heading to attract customers' attention

• Leave it blank if you do not want to display it

You can also change the Heading size to:

• Heading xs
• Heading sm
• Heading md
• Heading lg
• Heading xl
• Heading 2xl
• Display md
• Display lg
• Display xl

to make the content look balanced on your website.

#Highlight text

Use the provided text fields to add a suitable Subheading and Description.

• Leave them blank if you do not want to display them

You can also change the Text size to Small/ Base size/ Large to make the content look balanced on your website.

The call-to-action button will get the link from the provided Button link field.

Give the button a label, and a specific Button style:

• Primary button
• Secondary button
• Underline button

#Grid settings

You can also control the suitable spacing between the blocks by selecting Column gap and Row gap options.

• Column gap: Extra large/ Large/Medium/Small/ Extra small/ None
• Row gap: Extra large/ Large/Medium/Small/ Extra small/ None/ Same as the column gap

#Collapsible tab

Select your preferred Style for the Collapsible tab blocks:

Adjust the Color scheme for the Collapsible tab blocks.

Moreover, you can also change the Font family to Body font/ Headings font and Heading size to Heading xs/ Heading sm/ Heading md/ Heading lg/ Base size for the Collapsible tab blocks.

Adjust the Icon size (Extra small/ Small/ Extra medium/ Medium/ Large) to make it look well-proportioned with the Collapsible tab heading.

#Block settings

You can add more blocks to the collapsible tabs (Collapsible tab/ Heading/ Image card).

#Collapsible tab

You can choose a wide range of icons to display in the heading - Icon.

For content, add the needed message/info into the provided fields such as Heading, Collapsible tab content, and Custom liquid.

You can enable Default open if you want the tab always to open when entering the page.

Then you can credit content from a page to the collapsible tab by Tab content from the page section.

#Heading

Fill in the suitable Heading, Subheading and change the Heading size (Heading 1/ Heading 2/ Heading 3).

#Image Card

Adjust the Color scheme for the image card block.

a) Block settings

This setting allows you to adjust the Desktop image position to the Left or Right and Vertical alignment to the Top/ Middle/ Bottom.

Moreover, you can use the slider to change the Desktop image width of the Image card block between 30% and 70%.

b) Image

Click Select image to assign the image to the banner on the desktop and use the slider to change the Image overlay opacity.

c) Content

Add some text for the banner’s Heading, Subheading, and Description. Leave them blank if you do not want to display them.

You can also change the Heading size (Heading 1/ Heading 2/ Heading 3) to make your image card block look more balanced.

Add a call-to-action button that directs customers to the target page specified in the Card link field. Add a Label then choose a Button style (Primary button/ Secondary button/ Underline button).

Furthermore, you can also modify the look as well as the position of the content by changing these properties:

• Content position: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right
• Content alignment: Left/ Center/ Right
• Content spacing: Small/ Medium/ Large

d) Mobile settings

Especially, if you want to display a different card image on the mobile device, you can insert another image to the Image field.

You are able to display the content below or above the collapsible tabs by enabling/disabling the Display the card above collapsible tabs checkbox.