Product tabs
Product tabs shows the products of several collections, 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 Product tabs.
The package uses this section on the Home page template.
Settings
View the section guide .
Heading content
| Setting | Options | Description |
|---|---|---|
| Subheading | Short line of text shown above the heading. | |
| Heading | Main heading shown beside the tabs. | |
| Description | Supporting text shown below the heading. | |
| Heading size | • Small | Sets the size of the heading: small, medium or large. |
| Heading alignment | • Left | Left shows the heading first with the tabs after it. Right reverses the order. |
Layout
Maximum products sets how many products each tab shows.
| Setting | Options | Description |
|---|---|---|
| Maximum products | Maximum number of products shown in each tab. | |
| Columns on desktop | Number of products per row on desktop. Tablets show one column fewer when this is above 3. | |
| Column gap | • No gap | Space between products, from none to large. The gap is smaller on mobile. |
| Columns on mobile | Number of products visible per row on mobile. A fraction such as 1.5 lets part of the next product show and the row scroll freely. |
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 that appear when shoppers hover over the product carousel. | |
| Show pagination | Shows carousel pagination below the products. | |
| Reveal next item | Lets part of the next product show at the edge, so shoppers can see there is more to scroll to. | |
| 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 | Page width keeps the section inside the standard page container. Wide uses a wider container. Full width runs edge to edge. |
| Top padding | Space above the section. | |
| Bottom padding | Space below the section. | |
| Show top border | Draws a line along the top edge of the section. |
Blocks
Product tab (tab)
One tab per collection. Heading sets the tab label, and a blank heading uses the collection title. The Image appears inside the tab, before the label.
| Setting | Options | Description |
|---|---|---|
| Collection | Collection whose products are listed when shoppers open this tab. | |
| Heading | Caption of this tab in the tab list. | |
| Image | Small square image shown beside the tab name. A placeholder appears until you choose one. |
No comments yet