Featured collection
Featured collection shows the products from one collection in a grid or carousel, with an optional heading and View all button.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Featured collection.
The package uses this section on the Home page.
Settings
View the section guide .
Heading content
| Setting | Options | Description |
|---|---|---|
| Subheading | Short line of text shown above the heading. | |
| Heading | Main heading shown above the products. | |
| Description | Supporting text shown below the heading. | |
| Heading size | • Large | Sets the size of the heading: small, medium or large. |
| Heading alignment | • Left | Aligns the heading to the left, center or right. The View all button follows it: beside the heading when left or right, below the products when centered. |
| Show View all button | Shows a View all link. Set where it goes with View all button link. | |
| View all button label | Text of the View all link. Only available when Show View all button is on. | |
| View all button link | Page the View all link opens. Without a link the button is shown disabled. Only available when Show View all button is on. |
Collection
| Setting | Options | Description |
|---|---|---|
| Collection | Collection whose products are shown. Until one is chosen, placeholder product cards appear. |
Maximum products sets how many products appear, from 2 to 12.
Layout
| Setting | Options | Description |
|---|---|---|
| Maximum products | Maximum number of products shown from the collection. | |
| 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
| Setting | Options | Description |
|---|---|---|
| Enable carousel | Displays items in a carousel. | |
| Show arrows | Shows previous and next arrows on the product carousel. Only available when Enable carousel is on. | |
| Arrow position | • Default | Default places the arrows at the sides of the carousel. Section header places them next to the heading. Only available when Show arrows is on. |
| Show pagination | Shows carousel pagination below the products. Only available when Enable carousel is on. | |
| Reveal next item | Lets part of the next product show at the edge, so shoppers can see there is more to scroll to. Only available when Enable carousel is on. | |
| Reveal next item on mobile | Shows part of the next item on mobile. Only available when Enable carousel is on. |
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. |
No comments yet