Collapsible row tabs

The Collapsible row tabs section has expandable rows that reveal more text when clicked. Use this section for Frequently Asked Questions or neatly organize information about your products or store.

Key features

• Group rows

• Custom row toggles

• Optional sticky tabs

Blocks

Tab header Collapsible rows

Add rows and tab headers

---

Click (+) Add block to add collapsible rows and tab headers. Use the drag handles ⋮⋮ to re-order blocks.

Tab headers

To create groups of rows, add Tab headers and arrange collapsible row blocks under each tab header. Tab header text will appear as navigation links in the column next to the rows.

_{Click Tab header block to find settings}

Header	Add text for header of row group.

Collapsible rows

Add collapsible rows with headers that reveal text when clicked. You can display text content in 1 or 2 columns.

_{Click Collapsible row block to find settings}

Content columns	Display text content 1 or 2 columns.
Header	Add text for the row title.
Text	Add text that's revealed when the row is opened.

Customize tabs

---

The Tabs allow visitors to jump to different row groups. They appear in the left or right column, opposite the rows.

Tabs style

You can change the placement, font, and styles for active and inactive tabs.

_{Click section find settings}

Placement	Left / Right
Font	Body Heading
Text size	1 - 4

Sticky tabs

Enable sticky tabs to fix tabs to the top of the window when scrolling down to view the collapsible row tabs. The Active tab indicator shows the current tab in view.

If the sticky tabs appear misaligned or are hidden under other sticky elements (e.g. Header, Announcements), you can toggle on Advanced sticky settings to adjust the alignment of the tabs when sticky.

Advanced: Adjust vertical alignment when sticky

You can use the Advanced sticky settings and increase the Vertical offset to increase the distance between the top of the window and the tab headers.

Use the sliders to adjust the number of pixels to offset the sticky alignment for Desktop, Tablet, and Mobile.

Recommended: Open a live preview of your store to see accurate results of the vertical offset. The theme editor may not accurately show the offset as it appears on your live site.

_{Click section find settings}

Sticky tabs
Active tab indicator	Dot beside Line below
Dim inactive tabs
Advanced sticky settings	Reveal settings to adjust the alignment of the sticky and scroll position.
Vertical offset	Applies to both the sticky tabs and the scroll positioning. Advanced scroll positioning is best tested outside the theme editor.
Custom CSS variable	Apply complex offset values by providing a valid CSS variable (eg. --my-custom-variable).

Customize rows and groups

---

Adjust the layout and styles for Rows and Row groups.

Row groups

_{Click section find settings}

Header font	Body Heading
Header size	1 - 6
Vertical spacing	1 - 20

Rows

_{Click section find settings}

Width	30 - 70%
Header size	1 - 6
Text size	1 - 4
Row padding	1 - 8
Row style	Filled Dividers
Space between rows	1 - 8
Color scheme	Match section Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Border
Corner radius
Dropshadow

Row toggles

_{Click section find settings}

Placement	Left / Right
Font	Plus open, x close Plus open, minus close Caret
Use custom icons
Icon size	Dot beside Line below
Icon frame	None Circle Square
Color scheme	Applies to default icons only.

Section styles

---

Customize general style options for the section and content area. Settings for Content area allow you to adjust the width, borders, and dropshadow of the container of the section content.

_{Click section to find settings}

Content area

Full width

Section background and content span the screen's full width.

Full width padded

Section spans the screen's full width with some padding.

Page width

Section background and content span the page width.

Width	Full width Full width padded Page width
Full width on mobile	Available for Full width padded option.
Border	Top only Bottom only Both
Corner radius	Available for Full width padded and Page width options.
Dropshadow

Section

Top padding	0 - 27
Bottom padding	0 - 27
Dividers	None Top only Bottom only Both
Force dividers full width
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID	Link directly to the section on any page. Learn more