Collection list links to up to eight collections of your choice, each shown with its image and title. It is the "shop by category" section, and the Masthead and Broadsheet presets use it on the home page.
Where to find it
In the theme editor, click Add section and choose Collection list. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
Layout sets the style:
- Standard: collection cards in a grid or a sideways-scrolling row, as set by Desktop layout.
- Index list: the collection names are set large, like a table of contents. On desktop, each collection's image appears when a customer hovers over its name; on mobile it is shown as a small thumbnail.
- Feature: the first collection is shown large, with the others stacked beside it.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Layout | Standard, Index list or Feature. Default: Standard. | Cards, a large index of names, or one featured collection with the rest beside it. |
| Image ratio | Portrait (4:5), Square (1:1) or Landscape (3:2). Default: Portrait (4:5). | The shape collection images are cropped to. |
| Desktop layout | Grid or Slideshow. Default: Grid. | Grid shows rows; Slideshow shows one row that scrolls sideways. |
| Columns on desktop | 2 to 5. Default: 3. | How many collections sit in a row on desktop. |
| Columns on mobile | 1 column or 2 columns. Default: 1 column. | How many collections sit side by side on mobile. |
| Enable swipe on mobile | On or off. Default: on. | Lets customers swipe through the collections on mobile. When off, they stack in a grid. |
| Show product count | On or off. Default: off. | Shows how many products each collection holds. |
| Show link to all collections | On or off. Default: off. | Adds a link to the page that lists all your collections. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 8 blocks.
Collection
One collection. Its image and title come from the collection itself.
| Setting | Options | What it does |
|---|---|---|
| Collection | Collection. | The collection to link to. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Collection image | 1600 x 2000 px (4:5 portrait) | Set on each collection in your Shopify admin, under Products > Collections. Give every listed collection an image of its own, so the row looks complete. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Three or four collections read as a considered edit. Eight is the limit.
- Index list suits a store with clear departments; it puts the names first and the pictures second.
- Use images with the same framing for every collection, so the row looks like a set.