# Collection with image

> A large lifestyle photo beside a few products from the same collection, with a label, a heading, a short text and a button – a collection told as a story.

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

## At a glance

- **In the editor:** Collection with image
- **Where it goes:** Any page template, with Add section
- **In the presets:** Poster: Home page
- **Settings:** 23
- **App blocks:** Yes

## Set it up

1. Pick a **Collection**. Its image and title are used unless you set your own **Image** and **Heading**.
2. Write a **Label** (for example *The linen edit*) and a short **Text**.
3. Choose **Products to show** (2–9) and **Products per row on desktop** (2 or 3).
4. Set the **Button label**. Leave **Button link** empty to open the collection.

## Options

- **Image position on desktop:** left or right. Alternate it when you use the section twice on one page.
- **Image ratio:** *Portrait*, *Square* or *Tall*.
- **Darken the image slightly:** a gentle tint that gives white text and busy photos more calm.
- **Button style:** *Primary* or *Secondary*.

The Poster preset uses this section on its home page.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Collection with image** (23 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Collection** | Collection | – |
| **Image** – Leave empty to use the collection image. | Image | – |
| **Label** | Text | – |
| **Heading** – Leave empty to use the collection title. | Rich text (one line) | – |
| **Text** | Rich text | – |
| **Heading size** | Large · Medium · Small | Medium |
| **Products to show** | 2–9 (step 1) | 4 |
| **Products per row on desktop** | 2 · 3 | 2 |
| **Image position on desktop** | Left · Right | Left |
| **Image ratio** | Portrait · Square · Tall | Portrait |
| **Darken the image slightly** | Checkbox | Off |
| **Button label** | Text | Sample text |
| **Button link** – Leave empty to open the collection. | Link | – |
| **Button style** | Primary · Secondary | Secondary |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

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

*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 | – |

## Related

- [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.
- [Shop the look](https://themelab.page/tally/docs/sections/shop-the-look.md): A styled photo with dots on each product and a product list beside it, with one button to add everything to the cart.
- [Image with text](https://themelab.page/tally/docs/sections/image-with-text.md): A photo beside text built from blocks – label, heading, text, list, stats and buttons – plain or on an overlapping card.