Collection list
Collection list shows a set of your collections as image cards, each one a door into a collection page. It answers a new visitor's first question, which is what kind of things the store sells, and it saves shoppers from hunting through the menu. Shoppers normally meet it high on the Home page or on a landing page, above the first row of individual products.
You choose which collections appear and in what order, so the section can promote a seasonal edit instead of listing the whole catalog. The cards show as a grid or a 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 Collection list.
The package uses this section on the Home page.
Settings
View the section guide .
Heading content
| Setting | Options | Description |
|---|---|---|
| Heading | The title shoppers read first, for example "Shop by category". Default: Collection list. | |
| Description | A sentence under the title. Useful when the grouping needs explaining, such as a seasonal or gift edit. | |
| Heading size | • Large | Sets how large the title looks. Large is the biggest and Small is the smallest. Default: medium. |
| Heading alignment | • Left | Sets where the title and description sit above the cards. It also decides where the View all button goes: beside the heading with Left or Right, centered under the cards with Center. Default: start. |
| Show View all button | Adds a link to a fuller list of collections, for stores where this section shows only a few. Default: off. | |
| View all button label | The words on the View all link. Default: View all. Appears only when Show View all button is on. | |
| View all button link | Where the View all link leads, usually a page that lists every collection. Appears only when Show View all button is on. |
Collection
| Setting | Options | Description |
|---|---|---|
| Content alignment | • Left | Sets whether each collection title lines up to the left or the center of its card. Default: start. |
| Image ratio | • Adapt to image | Sets the shape every card image is cropped to, so cards of different photo sizes line up. Adapt to image keeps each picture's own shape, so card heights can differ. Default: adapt. |
| Content position | • Overlay | Sets where the collection title sits in relation to its image. Default: overlay. |
| Show product count | Shows the number of products in each collection next to its title. Default: off. |
Content position sets whether the title sits over the image (Overlay) or under it (Below image). Each card also shows the lowest price of the collection's products. The section has no setting for it.
Layout
| Setting | Options | Description |
|---|---|---|
| Columns on desktop | How many cards sit side by side on a wide screen. More columns mean smaller cards. On tablets the row shows one column fewer when this is above 3. Range: 2 - 6, step 1. Default: 4. | |
| Column gap | • No gap | Sets the space between cards. With No gap the cards touch. Default: medium. |
| Columns on mobile | How many cards fit across a phone screen. A value with a decimal, such as 1.5, shows part of the next card so shoppers see the row scrolls. Range: 1 - 2.5, step 0.1. Default: 1. |
Carousel
| Setting | Options | Description |
|---|---|---|
| Enable carousel | Turns the grid into a row shoppers can swipe or step through with arrows. It moves only when there are more cards than columns. Default: on. | |
| Show arrows | Shows the previous and next arrows. Appears only when Enable carousel is on. Default: on. | |
| Arrow position | • Default | Default puts the arrows at the sides of the row. Section header puts them beside the heading. Appears only when Enable carousel and Show arrows are on. Default: section_header. |
| Show pagination | Shows dots under the row so shoppers can see how far through the carousel they are. Appears only when Enable carousel is on. Default: off. | |
| Reveal next item | Leaves part of the next card visible at the edge of the row on desktop, as a hint that there is more to scroll to. Appears only when Enable carousel is on. Default: off. | |
| Reveal next item on mobile | Shows part of the next card at the edge of the row on phones. Appears only when Enable carousel is on. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Text color | Sets the color of the collection title when it sits over the image. It is used only when Content position is Overlay. Choose a color that reads on your darkest and lightest images. | |
| Color scheme | Sets the background and text colors of the section. Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Sets how far the section spreads across the screen. Page width lines up with the page width from Theme settings, Wide runs close to both screen edges, and Full width fills the browser window. Default: fix_width. |
| Top padding | Space above the section. Increase it when the heading sits too close to the section before it. Range: 0 - 100, step 1 px. Default: 48. | |
| Bottom padding | Space below the section. Increase it when the next section crowds the cards. Range: 0 - 100, step 1 px. Default: 48. | |
| Show top border | Draws a thin line along the top edge of the section. Useful when this section and the one above share a background color. Default: off. |
Blocks
Collection (featured_collection)
Adds one collection card. Set the collection, and optionally replace its image or title.
| Setting | Options | Description |
|---|---|---|
| Collection | Picks the collection this card stands for. Its title shows on the card. | |
| Collection image | The picture on this card. Leave blank to use the collection's image. | |
| Heading | The wording on the card. Use it when the collection's own name is too long or too internal to show shoppers. Leave blank to use the collection's title. |
Notes
The section accepts up to eight collection blocks.
No comments yet