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.
- 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
- Pick a Collection. Its image and title are used unless you set your own Image and Heading.
- Write a Label (for example The linen edit) and a short Text.
- Choose Products to show (2–9) and Products per row on desktop (2 or 3).
- 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 image23 settings
| Setting | Options | Default |
|---|---|---|
| Collection | Collection | – |
| ImageLeave empty to use the collection image. | Image | – |
| Label | Text | – |
| HeadingLeave empty to use the collection title. | Rich text (one line) | – |
| Text | Rich text | – |
| Heading size | Large · Medium · Small | Medium |
| Products to show | 2–9 | 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 linkLeave empty to open the collection. | Link | – |
| Button style | Primary · Secondary | Secondary |
| Color scheme | Color scheme | Scheme 1 |
| Section spacing | ||
| Top padding | 0–160px | 64px |
| Bottom padding | 0–160px | 64px |
| Top padding on mobile | 0–120px | 48px |
| Bottom padding on mobile | 0–120px | 48px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile 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 IDLink to this section with #anchor-id. | Text | – |
Related
Featured collectionProducts from one collection – or several as tabs – in a grid or slider, with quick filters and a products-per-row switch.Shop the lookA styled photo with dots on each product and a product list beside it, with one button to add everything to the cart.Image with textA photo beside text built from blocks – label, heading, text, list, stats and buttons – plain or on an overlapping card.