# Collection list

Source: <https://docs.ictsviluppo.example/dossier/sections/section-collection-list/>

Collection list shows your collections as large photo tiles with the name written on the image, in a grid or in a scrolling row. Use it to let customers shop by category, such as outerwear, knitwear or accessories, or to point to seasonal edits. You can add it to any page.

## Choose the collections

Each tile is a **Collection** block: add one per collection, up to 12, and drag them into the order you want. In each block, pick the collection in **Collection**. The tile then shows:

- the collection image, set in **Products > Collections** in your Shopify admin, unless you choose a different photo in **Image**;
- the collection title, unless you write a shorter or different one in **Heading**;
- the number of products in the collection, if **Show product count** is on in the section.

A tile without a collection links to the page that lists all your collections. Write the alternative text of the photos in **Content > Files** in your Shopify admin.

## Pick a grid or a row

With **Layout** set to **Grid**, all tiles are visible at once. **Collections per row on desktop** sets the columns on large screens, and **Columns on mobile** lets you show one or two tiles per row on phones.

With **Carousel**, the tiles sit in a single row that customers scroll sideways, with the next tile peeking in. It suits many collections in little space. On computers with a mouse or trackpad, arrows appear next to the heading when the row is longer than the screen. On phones the row always shows a bit more than one tile, so **Columns on mobile** is not used.

All tiles share the shape set in **Image ratio**, whatever the size of your photos, so choose photos where the subject sits near the center.

## Make the names readable on the photos

The collection name sits on the photo over a soft gradient. **Text on image color scheme** sets both: the text takes the scheme’s text color and the gradient its background color. Choose a scheme with strong contrast, such as light text on a dark background, and check the result on your lightest photos.

## Add a heading

**Heading** and **Subheading** appear above the tiles. The heading also names the section for screen readers, so keep one unless the page already introduces the collections.

## Show it only between two dates

Turn on **Schedule visibility** and set a start, an end, or both. See [Scheduling](https://docs.ictsviluppo.example/dossier/scheduling).

Each **Collection** block can be scheduled too, with the same settings, so a sale or holiday collection can appear in the list only while it runs. If every tile is hidden, the whole section is hidden in your store.

## Settings

| Setting | Type | Default | Options |
| - | - | - | - |
| **Heading** | Text | Shop by category | — |
| **Subheading** | Text | Fall–winter | — |
| **Layout** | | | |
| **Layout** | Drop-down | Grid | Grid, Carousel |
| **Collections per row on desktop** | Slider | 2 | 2–5, step 1 |
| **Columns on mobile** — Shown when *Layout* is *Grid* | Drop-down | 1 column | 1 column, 2 columns |
| **Image ratio** | Drop-down | Portrait | Portrait, Square, Landscape |
| **Use full page width** | Checkbox | On | — |
| **Show product count** | Checkbox | On | — |
| **Vertical spacing** | Drop-down | Regular | Compact, Regular, Spacious |
| **Color scheme** | Color scheme | scheme-1 | — |
| **Text on image color scheme** — The gradient behind the collection name uses the background color. | Color scheme | scheme-3 | — |
| **Schedule** | | | |
| **Schedule visibility** | Checkbox | Off | — |
| **Start date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when *Schedule visibility* is on | Text | — | — |
| **End date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when *Schedule visibility* is on | Text | — | — |

## Blocks

### Collection

| Setting | Type | Default | Options |
| - | - | - | - |
| **Collection** | Collection | — | — |
| **Image** — Replaces the collection image. 1200 x 1500px recommended. | Image | — | — |
| **Heading** — Replaces the collection title. | Text | — | — |
| **Schedule** | | | |
| **Schedule visibility** | Checkbox | Off | — |
| **Start date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when *Schedule visibility* is on | Text | — | — |
| **End date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when *Schedule visibility* is on | Text | — | — |