Collection list
Show your collections as tiles, cards or titles on images, in a grid or a slider. On the Index home page, it forms the department tiles right below the hero.
- In the editor
- Collection list
- Where it goes
- Any page template, with Add section
- In the presets
- Index: Home page; Poster: Home page; Petal: Home page
- Settings
- 28
- Blocks
- Collection
- App blocks
- Yes
Set it up
- Add a Collection block for each collection and pick it. Its image, title and product count fill in automatically.
- Override the Title or the Image in a block when the collection's own do not suit the section.
- Choose a Style and a Layout, then the number of collections per row.
Styles
| Style | Looks like | Good for |
|---|---|---|
| Tiles with small image | A compact tile with a small picture and the title | Departments of a large catalog, right under the hero. |
| Cards with large image | A large image with the title below | Collections with strong photography. |
| Title on the image | The title laid over the image | A bold, editorial grid. |
Options
- Layout: Grid or Slider; 2–6 per row on desktop, 1 or 2 on mobile.
- Image ratio and Image fit: Fill crops photos to the shape; Fit inside shows the whole image on the image background – ideal for product cut-outs.
- Show product count: a quiet count after each title.
- Link label and Link: a link next to the heading, for example to /collections.
- With Theme settings › Shapes › Image shape in editorial sections set to Arch, card images get an arched top.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Collection list28 settings
| Setting | Options | Default |
|---|---|---|
| Heading | Rich text (one line) | – |
| Text | Rich text | – |
| Heading size | Large · Medium · Small | Medium |
| Heading alignment | Left · Center | Left |
| Link label | Text | – |
| Link | Link | – |
| Style | Tiles with small image · Cards with large image · Title on the image | Tiles with small image |
| Layout | Grid · Slider | Grid |
| Collections per row on desktop | 2–6 | 4 |
| Collections per row on mobile | 1 · 2 | 2 |
| Image ratio | Square · Portrait · Landscape | Square |
| Image fit | Fit inside · Fill | Fill |
| Show product count | Checkbox | On |
| Show part of the next cardFor sliders: the next card shows in part and the edges fade, so it is clear the row goes on. | Checkbox | On |
| Color scheme | Color scheme | Scheme 1 |
| Grid spacing | ||
| Use custom spacingOtherwise the spacing from Theme settings > Layout is used. | Checkbox | Off |
| Space between columns | 0–64px | 20px |
| Space between rows | 0–96px | 20px |
| Space between columns on mobile | 0–32px | 8px |
| Space between rows on mobile | 0–64px | 21px |
| Section spacing | ||
| Top padding | 0–160px | 0px |
| Bottom padding | 0–160px | 96px |
| Top padding on mobile | 0–120px | 0px |
| Bottom padding on mobile | 0–120px | 64px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | On |
| Anchor IDLink to this section with #anchor-id. | Text | – |
Block settings
Block: Collection3 settings
| Setting | Options | Default |
|---|---|---|
| Collection | Collection | – |
| TitleLeave empty to use the collection title. | Text | – |
| ImageOverrides the collection image. | Image | – |
Related
EditsTwo or three large curated collection cards with a short description and product count.Featured collectionProducts from one collection – or several as tabs – in a grid or slider, with quick filters and a products-per-row switch.Expanding panelsA row of tall image panels; one opens wide with its story while the others wait as slim strips.