Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Collage. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Choose Desktop layout, then add and reorder Tile blocks to match the visual sequence you want.
- For each Tile, choose Background image or a background color and set its text contrast and overlay.
- Add content inside the tile, such as Heading, Button, Product or Collection. Background media and child content are configured separately.
- For Custom tile sizes, enable Use custom desktop size on a tile and choose its column and row spans.
- Set minimum row height and gaps, then configure the mobile layout independently.
Main settings to review
| Setting | Choices or control |
|---|---|
| Desktop layout | Main tile left · Main tile right · Feature + six tiles · Mosaic · Custom tile sizes |
| Minimum desktop row height | 160–480 px; step 20 |
| Desktop gap | 0–60 px; step 2 |
| Mobile layout | Stack · Horizontal scroll |
| Minimum mobile tile height | 200–600 px; step 20 |
Blocks and content
This section allows up to 12 direct blocks. Nested blocks have their own parent-specific choices and limits.
The following content blocks have their own setup and control reference. Nested blocks belong inside their parent, such as Slide, Tab, Tile or Story chapter.
Content and media
- Choose crops that suit each tile's shape. A photo intended for a tall tile needs more vertical room than a wide banner.
- Use live Product or Collection blocks when the tile should display store data; an image-only tile does not synchronize prices or stock.
Check the mobile layout
- Mobile layout offers Stack or Horizontal scroll. Desktop spans are composition controls; review the actual narrow-screen ordering instead of expecting the desktop collage to shrink unchanged.
Common questions and fixes
- A tile contains only a background: add content blocks inside that tile.
- A subject is cropped heavily: change the source framing or tile shape and preview at both sizes.
Full control reference
Names, choices, ranges and defaults below are read from this version of the theme. Defaults are starting examples, not promises about your business. Some controls appear only for the matching layout. Block contents and preset starting values can differ from the base defaults.
All section controls (21)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Page width. |
| Width / Custom width | 50–100 %; step 5 | Default: 80. Percentage of screen width. This control appears only when the relevant layout or related option is selected. |
| Width / Heading | Text | Default: A collection of stories. |
| Width / Desktop layout | Main tile left · Main tile right · Feature + six tiles · Mosaic · Custom tile sizes | Default: Main tile left. |
| Width / Minimum desktop row height | 160–480 px; step 20 | Default: 260. |
| Width / Desktop gap | 0–60 px; step 2 | Default: 16. |
| Width / Mobile layout | Stack · Horizontal scroll | Default: Stack. |
| Width / Minimum mobile tile height | 200–600 px; step 20 | Default: 360. |
| Width / Mobile gap | 0–40 px; step 2 | Default: 12. |
| Width / Top padding | 0–160 px; step 4 | Default: 64. |
| Width / Bottom padding | 0–160 px; step 4 | Default: 64. |
| Width / Mobile padding top | 0–100 px; step 4 | Default: 40. |
| Width / Mobile padding bottom | 0–100 px; step 4 | Default: 40. |
| Width / Accessibility label | Text | Default: Collage. |
| Media / Section background image | Choose an image | Default: Not set. |
| Media / Section background position | Image focal point · Top · Center · Bottom | Default: Image focal point. This control appears only when the relevant layout or related option is selected. |
| Media / Section background behavior | Scroll with section · Fixed to viewport | Default: Scroll with section. This control appears only when the relevant layout or related option is selected. |
| Media / Section background overlay | 0–80 %; step 5 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on desktop | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on mobile | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Section anchor | Text | Default: Not set. Optional. Use a unique name for links that jump to this section. |