# Collection list

> Show your collections as tiles, cards or titles on images, in a grid or a carousel. On the Tally home page, it forms the department tiles right below the hero.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/collection-list/

## At a glance

- **In the editor:** Collection list
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: Home page; Poster: Home page; Petal: Home page
- **Settings:** 28
- **Blocks:** Collection
- **App blocks:** Yes

## Set it up

1. Add a **Collection** block for each collection and pick it. Its image, title and product count fill in automatically.
2. Override the **Title** or the **Image** in a block when the collection's own do not suit the section.
3. 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 *Carousel*; 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](https://themelab.page/tally/docs/sections/collections-list.md).
- 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 list** (28 settings, in editor order)

| 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 · Carousel | Grid |
| **Collections per row on desktop** | 2–6 (step 1) | 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 card** – For 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*

| Setting | Options | Default |
| --- | --- | --- |
| **Use custom spacing** – Otherwise the spacing from Theme settings > Layout is used. | Checkbox | Off |
| **Space between columns** | 0–64px (step 2) | 20px |
| **Space between rows** | 0–96px (step 2) | 20px |
| **Space between columns on mobile** | 0–32px (step 1) | 8px |
| **Space between rows on mobile** | 0–64px (step 1) | 21px |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 0px |
| **Bottom padding** | 0–160px (step 4) | 96px |
| **Top padding on mobile** | 0–120px (step 4) | 0px |
| **Bottom padding on mobile** | 0–120px (step 4) | 64px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile 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 ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Collection** (3 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Collection** | Collection | – |
| **Title** – Leave empty to use the collection title. | Text | – |
| **Image** – Overrides the collection image. | Image | – |

## Related

- [Edits](https://themelab.page/tally/docs/sections/edits.md): Two or three large curated collection cards with a short description and product count.
- [Featured collection](https://themelab.page/tally/docs/sections/featured-collection.md): Products from one collection – or several as tabs – in a grid or carousel, with quick filters and a products-per-row switch.
- [Expanding panels](https://themelab.page/tally/docs/sections/expanding-panels.md): A row of tall image panels; one opens wide with its story while the others wait as slim strips.