Vertical collection tabs
Vertical collection tabs shows one tab per collection. Shoppers select a tab to see that collection's products.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Vertical collection tabs.
The package uses this section on the Home page template.
Settings
View the section guide .
Heading content
Highlight text appears as a highlighted label in the heading area.
| Setting | Options | Description |
|---|---|---|
| Subheading | Short line of text shown above the heading. | |
| Heading | Main title shown above the product carousel. | |
| Description | Optional text shown under the heading. | |
| Highlight text | Short line shown above the list of tab titles, on top of the image panel. | |
| Heading size | • Small | Sets the size of the heading to Small, Medium or Large. |
| Heading alignment | • Left | Aligns the subheading, heading and description to the left, center or right. |
| Show View all button | Shows a View all button. With left or right heading alignment it sits beside the heading, and with center alignment it sits below the products. | |
| View all button label | Text on the View all button. Only used when Show View all button is on. | |
| View all button link | Where the View all button leads. Only used when Show View all button is on. |
Layout
Maximum products sets how many products show in each tab.
| Setting | Options | Description |
|---|---|---|
| Maximum products | Limits how many products show in each tab. | |
| Columns on desktop | Sets how many product cards sit side by side on desktop. A half value such as 2.5 lets part of the next card show. | |
| Columns on mobile | Sets how many product cards show per row on mobile. A decimal value such as 1.5 lets part of the next card peek in, and the row then scrolls sideways. | |
| Column gap | • No gap | Sets the space between product cards: No gap, Small, Medium or Large. |
Carousel
Reveal next item and Reveal next item on mobile show part of the next product, which signals that the row scrolls.
| Setting | Options | Description |
|---|---|---|
| Show arrows | Shows previous and next arrows on the product carousel. | |
| Arrow position | • Default | Places the arrows beside the product row (Default) or in the section header next to the heading. Only used when Show arrows is on. |
| Show pagination | Shows pagination dots under the product carousel. | |
| Reveal next item | Shows part of the next product at the edge of the carousel, so shoppers can see there is more to scroll. | |
| Reveal next item on mobile | Shows part of the next item on mobile. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Sets how wide the section content is. Page width keeps it inside the standard content area, Wide stretches it further, and Full width runs edge to edge. |
| Top padding | Adds space above the section, in pixels. | |
| Bottom padding | Adds space below the section, in pixels. | |
| Show top border | Adds a border line along the top of the section. |
Blocks
Collection tab (tab)
One tab per collection. Heading sets the tab label, and a blank heading uses the collection title. The tab Image appears with the tab when it is set.
| Setting | Options | Description |
|---|---|---|
| Collection | Collection whose products show when this tab is selected. Its title is used as the tab title when the tab heading is empty. | |
| Heading | Title of this tab in the list. When empty, the title of the chosen collection is used. | |
| Image | Image shown in the image panel while this tab is selected. A placeholder appears when no image is chosen. |
No comments yet