Collection highlight
Collection highlight shows up to six collections as tabs. The active tab shows its image and text beside the tab list.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Collection highlight.
The package uses this section on the Sustainability page.
Settings
View the section guide .
Heading content
| Setting | Options | Description |
|---|---|---|
| Subheading | Short text shown above the heading. | |
| Heading | Main title of the section, shown above the tab list. | |
| Description | Text shown under the heading. | |
| Heading size | • Large | Size of the section heading. Large uses the biggest heading style and Small the smallest. |
| Heading alignment | • Left | Aligns the subheading, heading and description to the left, center or right. |
Tab settings
| Setting | Options | Description |
|---|---|---|
| Image position on desktop | • Left | Places the tab image on the left or right of the tab list on desktop. |
| Image ratio | • Adapt to image | Aspect ratio of the image area. Adapt to image sizes the area to the image itself. |
| Heading prefix | • Ordinal number | Marker placed before each tab title: a number such as 01, or a small icon. The icon is the tab's Icon image, with an arrow shown when none is set. |
| Trigger behavior | • Hover | Whether a tab opens when the visitor hovers over it or clicks it. Hover works only on devices with a mouse, and clicking a tab always works. |
| Enable autoplay | Switches to the next tab automatically. Autoplay pauses while the pointer is over the section or the section is off screen. | |
| Autoplay duration | Seconds each tab stays open before the next one opens. Shown when Enable autoplay is on. |
Heading prefix adds an ordinal number (01, 02) or an icon before each tab title. Trigger behavior sets whether a tab opens on hover or on click. Enable autoplay switches tabs on its own, at the interval set by Autoplay duration.
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Width of the section content: standard page width, a wider container, or the full screen width. |
| Top padding | Space above the section in pixels. | |
| Bottom padding | Space below the section in pixels. | |
| Show top border | Draws a thin line along the top edge of the section. |
Blocks
Collection (collection)
Adds one tab with its collection, image, heading and text. You can add up to six.
| Setting | Options | Description |
|---|---|---|
| Collection | Collection shown in this tab. Clicking the tab title opens the tab, and an arrow link on the tab goes to the collection page. Its image and text come from the collection unless you fill them in. | |
| Image | 1920px x 840px recommended | |
| Heading | Title of this tab. Leave it blank to use the collection's title. | |
| Heading size | • Heading 6 | Text size of the tab title, from Heading 6 (smallest) to Heading 2 (largest). |
| Text | Defaults to the collection description. | |
| Icon image | 32px x 32px .png recommended |
No comments yet