Collapsible content
Overview
The Collapsible with Content section allows merchants to organize information into a tabbed interface, where each tab contains an optional content group and a set of expandable collapsible rows. The tab structure is built by combining Tabset, Group, and Collapse Row blocks in order: a Tabset block defines a tab label, a Group block provides optional banner imagery, tagline, heading, and description for that tab, and one or more Collapse Row blocks stack beneath it as individually expandable panels. Section-level settings control the shared section header including tagline, heading, and description as well as the global typography styles for tab labels and collapsible row headings and body text, the row border style, layout container, color scheme, and all inner and outer spacing.
Section Configuration
| Setting |
Description |
| Tagline |
Adds a short introductory text displayed above the main section heading. Defaults to "Add a tagline". |
| Tagline Size |
Controls the tagline text size: Large, Medium, or Small. Defaults to Medium. |
| Tagline Weight |
Controls the font weight of the tagline from Thin (100) to Black (900). Defaults to Normal (400). |
| Tagline Case |
Controls tagline text casing: None, Uppercase, Capitalize, or Lowercase. Defaults to Capitalize. |
| Tagline Font Family |
Selects the font family for the tagline: Default or Heading font. |
| Tagline Color Style |
Applies a predefined color preset to the tagline: Default, Heading, or Body. |
| Heading |
Defines the main section heading. Supports inline rich text. Defaults to "Collapsible with content". |
| Heading Size |
Controls the heading size: H1–H6 or Large, Medium, and Small text sizes. Defaults to H2. |
| Heading Weight |
Controls the heading font weight from Thin (100) to Black (900). Defaults to Bold (700). |
| Heading Case |
Controls heading text casing: None, Uppercase, Capitalize, or Lowercase. Defaults to Uppercase. |
| Heading Tag |
Defines the semantic HTML heading level rendered in the DOM, from H1 to H6. Defaults to H2. |
| Heading Font Family |
Selects the heading font family: Default or Body font. |
| Heading Color Style |
Applies a predefined color preset to the heading: Default or Body. |
| Heading Link Style |
Defines the link styling applied when the heading contains a hyperlink: Default or Link. |
| Description |
Adds rich-text supporting content displayed below the section heading. Defaults to a placeholder sentence about collapsible panels. |
| Text Size |
Controls the description text size: Large, Medium, or Small. Defaults to Large. |
| Text Weight |
Controls the description font weight from Thin (100) to Black (900). Defaults to Normal (400). |
| Text Case |
Controls description text casing: None, Uppercase, Capitalize, or Lowercase. Defaults to None. |
| Text Font Family |
Selects the font family for the description: Default or Heading font. |
| Text Color Style |
Applies a predefined color preset to the description text: Default or Heading. |
| Header Margin – Desktop |
Controls the bottom spacing between the section header and the tab/collapsible content below on desktop. Range: 0–100 px, default 35 px. |
| Header Margin – Mobile |
Controls the bottom spacing between the section header and the tab/collapsible content below on mobile. Range: 0–100 px, default 15 px. |
Tabset Settings
These settings control the shared typography applied to all tab labels across the section.
| Setting |
Description |
| Tab Text Size |
Controls the font size of all tab labels: Large, Medium, or Small. Defaults to Medium. |
| Tab Text Weight |
Controls the font weight of all tab labels from Thin (100) to Black (900). Defaults to Normal (400). |
| Tab Font Family |
Selects the font family for all tab labels: Default or Heading font. |
| Tab Text Case |
Controls text casing for all tab labels: None, Uppercase, Capitalize, or Lowercase. Defaults to Uppercase. |
Collapsible Row Settings
These settings control the shared typography and visual style applied to all collapsible rows across the section.
| Setting |
Description |
| Hide Count |
When enabled, hides the numeric count indicator from collapsible row labels. Disabled by default. |
| Row Heading Size |
Controls the size of collapsible row headings: H1–H6 or Large, Medium, and Small. Defaults to H5. |
| Row Heading Weight |
Controls the font weight of collapsible row headings from Thin (100) to Black (900). Defaults to Normal (400). |
| Row Heading Font Family |
Selects the font family for collapsible row headings: Default or Body font. |
| Row Heading Case |
Controls heading text casing: None, Uppercase, Capitalize, or Lowercase. Defaults to Capitalize. |
| Row Description Size |
Controls the font size of collapsible row body content: Large, Medium, or Small. Defaults to Medium. |
| Row Description Weight |
Controls the font weight of collapsible row body content from Thin (100) to Black (900). Defaults to Normal (400). |
| Row Description Font Family |
Selects the font family for collapsible row body content: Default or Heading font. |
| Row Description Case |
Controls text casing of collapsible row body content: None, Uppercase, Capitalize, or Lowercase. Defaults to None. |
| Row Description Color Style |
Applies a predefined color preset to collapsible row body text: Default or Body. |
| Row Style |
Sets the visual border style for all collapsible rows: Bordered or None. Defaults to Bordered. |
Block Configuration
The section is built from three block types that work together in sequence: a Tabset block defines a tab label, a Group block provides the content panel for that tab, and Collapse Row blocks stack beneath the group as individually expandable panels.
Tabset Block
The Tabset block creates a named tab in the section's tab navigation. Tabs are rendered in the order they appear in the block list.
| Setting |
Description |
| Label |
Sets the visible text label for the tab in the navigation. Defaults to "Tabset". |
Group Block
The Group block defines the content area associated with the tab above it. It supports an optional background image, a full content stack (tagline, heading, description), and its own layout style and spacing.
| Setting |
Description |
| Show Image |
Toggles whether a background image is displayed in the group panel. Enabled by default. |
| Desktop Image |
Selects a background image for the group panel on desktop. Visible only when Show Image is enabled. |
| Desktop Overlay |
Applies a color or gradient overlay on top of the desktop background image. |
| Mobile Image |
Selects an alternative background image displayed on mobile devices. Visible only when Show Image is enabled. |
| Mobile Overlay |
Applies a separate color or gradient overlay for the mobile background image. |
Content Settings
Tagline
| Setting |
Description |
| Tagline |
Adds a short introductory text above the group heading. Defaults to "Add a tagline". |
| Tagline Size |
Controls the tagline text size: Large, Medium, or Small. Defaults to Medium. |
| Tagline Weight |
Controls the tagline font weight from Thin (100) to Black (900). Defaults to Normal (400). |
| Tagline Case |
Controls tagline text casing: None, Uppercase, Capitalize, or Lowercase. Defaults to Capitalize. |
| Tagline Font Family |
Selects the font family for the tagline: Default or Heading font. |
| Tagline Color Style |
Applies a predefined color preset to the tagline: Default, Heading, or Body. |
Heading
| Setting |
Description |
| Heading |
Defines the main heading of the group panel. Supports inline rich text. Defaults to "Group Heading". |
| Heading Size |
Controls the heading size: H1–H6 or Large, Medium, and Small text sizes. Defaults to H3. |
| Heading Weight |
Controls the heading font weight from Thin (100) to Black (900). Defaults to Bold (700). |
| Heading Case |
Controls heading text casing: None, Uppercase, Capitalize, or Lowercase. Defaults to Uppercase. |
| Heading Tag |
Defines the semantic HTML heading level rendered in the DOM, from H1 to H6. Defaults to H2. |
| Heading Font Family |
Selects the heading font family: Default or Body font. |
| Heading Color Style |
Applies a predefined color preset to the heading: Default or Body. |
| Heading Link Style |
Defines the link styling applied when the heading contains a hyperlink: Default or Link. |
Description
| Setting |
Description |
| Description |
Adds rich-text content displayed below the group heading. Defaults to a placeholder sentence about introducing collapsible rows. |
| Text Size |
Controls the description text size: Large, Medium, or Small. Defaults to Large. |
| Text Weight |
Controls the description font weight from Thin (100) to Black (900). Defaults to Normal (400). |
| Text Case |
Controls description text casing: None, Uppercase, Capitalize, or Lowercase. Defaults to None. |
| Text Font Family |
Selects the font family for the description: Default or Heading font. |
| Text Color Style |
Applies a predefined color preset to the description text: Default or Heading. |
Group Layout Settings
| Setting |
Description |
| Layout Style |
Sets the visual container style for the group panel: Widget Box (a raised card style), Bordered, or None. Defaults to Widget Box. |
Group Outer Spacing
| Setting |
Description |
| Desktop Bottom Margin |
Controls the space below the group panel on desktop. Range: 0–100 px, default 30 px. |
| Mobile Bottom Margin |
Controls the space below the group panel on mobile. Range: 0–100 px, default 15 px. |
Collapse Row Block:
Each Collapse Row block creates one expandable panel within the group it belongs to. Rows inherit their heading and description typography from the section-level Collapsible Row Settings.
| Setting |
Description |
| Heading |
Sets the label text displayed on the collapsed row trigger. Defaults to "Collapse row". |
| Description |
Adds rich-text body content revealed when the row is expanded. Defaults to a placeholder service description. |
| Default Open |
When enabled, this row renders in its expanded state on page load. Disabled by default. |
Layout Settings
| Setting |
Description |
| Container Layout |
Defines the section's horizontal layout behaviour: Page Width, Contained Content, or Container Fluid. Defaults to Contained Content. |
| Border Style |
Adds an optional border to the section: None, Top, Bottom, or Top & Bottom. Available when the Page Width container layout is not selected. Defaults to Top & Bottom. |
| Container Size |
Controls the maximum desktop container width as a percentage of the available page width. Range: 50–100%, default 100%. |
| Desktop Text Alignment |
Controls the horizontal alignment of the section header content on desktop. Defaults to Left. |
| Mobile Text Alignment |
Controls the horizontal alignment of the section header content on mobile. Defaults to Left. |
| Color Scheme |
Applies a predefined Shopify theme color scheme to the section. Defaults to Scheme 1. |