Section reference
Collection list
Point shoppers to your collections with Vellmar's collection list, as a grid, a mosaic or circles.
Collection list shows up to 12 collections, each as an image with its title. Each Collection block picks one collection. The image is the collection's own image from Shopify admin, or the first product's image if the collection has none.
Three layouts are available:
- Grid: even tiles in rows. Set Columns on desktop and Image ratio.
- Mosaic: the first collection gets a large tile and, on desktops, the second a wide one. It suits four or five collections. Columns on desktop isn't used.
- Circles: round images with the title below, good for categories or skin types.
Show titles over images puts the title on the image itself in the grid layout. The mosaic layout always does this.
Best practices
- Set a collection image in Shopify admin for each collection. Consistent images, with similar light and framing, make the list look calm.
- Use short collection titles. Long titles wrap on phones, especially over images.
- Lead with the biggest collection in the mosaic layout, since the first tile is the largest.
- Show the product count only when your collections are large. "3 products" can make a store feel small.
- Add a link to the full collections list with Link label and Link.
Preset tips
- Vellmar uses a four-column grid of portrait tiles to shop by room.
- Sorrel uses five circles under the heading "Start with your skin".
- Graphite uses a four-column grid with titles over the images.
- Handle
collection-list- Group
- Products and collections
- Where
- Add it to any template with Add section in the theme editor. Up to 16 blocks. Accepts app blocks.
Settings
| Setting | Type | Default | Options |
|---|---|---|---|
| Layout | Drop-down | Carousel | Carousel, Grid |
| Columns on desktop | Slider | 4 | 2 to 6, in steps of 1 |
| Image ratio | Drop-down | Portrait | Portrait, Square, Landscape |
| Show product count | Checkbox | On | — |
| Show arrows | Checkbox | On | — |
| Color scheme | Color scheme | Scheme 1 | — |
Padding
| Setting | Type | Default | Options |
|---|---|---|---|
| Top padding | Slider | 64px | 0px to 200px, in steps of 4px |
| Bottom padding | Slider | 64px | 0px to 200px, in steps of 4px |
| Top padding on mobile | Slider | 48px | 0px to 200px, in steps of 4px |
| Bottom padding on mobile | Slider | 48px | 0px to 200px, in steps of 4px |
Blocks
Add blocks to this section from the theme editor, then drag them to change their order. A section can have up to 16 blocks.
This has no settings.
This has no settings.
App blocks
Apps you install can add their own blocks here. Their settings come from the app.