Collapsible tabs
A guide to display necessary information under collapsible tab style
Collapsible tabs help break up longer descriptions and make them more visually appealing.
Ideal for customer service or support pages, this section helps present information in an organized and expandable format — with optional image cards and headings for extra context.
How to add a Collapsible tabs section to your Shopify store
Steps
In the theme editor (Customize), click Add section.
Locate Collapsible tabs.
Make necessary changes.
Save.
How to edit a Collapsible tabs section
Section settings
Section header
Desktop padding bottom
Add spacing below the section (Small / Medium / Large).
Content spacing
Adjust the gap between blocks within the section.
Heading
Enter a main title of the section. ✍️ Want to add highlighted text to the heading? Learn more: Highlight text
Heading size
Controls heading scale — Base, Large, XL, etc.
Heading color
Choose a custom text color or leave blank for default.
Subheading
Optional subtitle displayed below the heading.
Description
Add body text, such as contact hours or additional guidance.
Collapsible tab
Font family
Choose to use headings font or body font to the collapsible tabs' titles. ✍️ Set fonts in the Theme settings >Typography
Heading size
Size of the heading text.
Column gap
Adjust the gap between the Image card and Collapsible tabs.
Content width
Control the width of the content (Narrow width/ Full width).
Block settings
You can add the following blocks within the Collapsible tabs section:
Used for adding an internal title above tabs.
Text
The heading content.
Heading size
Size of the heading text.
Heading color
Optional custom color.
Best practices
Use short, clear headings for each collapsible tab.
Enable “Default open” on the most common question.
Add an image card with contact details or a CTA to guide users.
Last updated
Was this helpful?