Image gallery
The Image gallery shows a row of images, for a lookbook, a community wall or product details. Each card can swap to a second image on hover with a heading over it, or show its heading under the image, and link anywhere. On desktop, more images than fit scroll sideways with arrows; on phones, choose a swipeable row, a mosaic or a stacked grid.
How to set it up
Step 1: Add the Image gallery section
- In the theme editor, open the page you want and click Add section under Template.
- Search for Image gallery and select it (1).
Step 2: Lay out the gallery
- Pick the Image ratio (1) of the cards (or adapt to each image) and the Images per row on desktop (2), from 4 to 9.
- Choose the Mobile style (3): Horizontal scroll (set the image size and the arrows), Mosaic (one large and two small tiles; the other images take turns in them) or Stacked (a grid of 1 to 4 columns).
- Set the Interaction (mobile): with Tap to show the hover image, the first tap shows a card's hover image and heading, the second opens its link.
Step 3: Add images
- Add Image blocks: the image (and a mobile image), an optional Hover image, and a link.
- Type a Heading: with a hover image it shows over the hover image, at the top, middle or bottom; without one it sits under the image. Set its style, size, color and alignment, with their own values on mobile.
Settings reference
Image gallery
| Gallery | |
|---|---|
| Image ratio | Options: Adapt to image, Square (1:1), Portrait (4:5), Landscape (4:3), Wide (16:9), Tall (3:4), Story (9:16). |
| Images per row | On desktop. More images than fit scroll sideways. |
| Mobile style | Options: Horizontal scroll, Mosaic, Stacked. |
| Show headings on mosaic | Turns this on or off. |
| Heading override color | |
| Columns (mobile) | Options: 1, 2, 3, 4. |
| Mobile image size scale | Slider. |
| Interaction (mobile) | With Tap to show the hover image, the first tap on a card with a hover image shows it with its heading, the second opens the link. Options: Default, Tap to show the hover image. |
| Show navigation arrows on mobile | Turns this on or off. |
| Progress line | Options: Desktop and mobile, Desktop only, Mobile only, Off. |
Image block
| Image | An image from your files. |
|---|---|
| Mobile image | An image from your files. |
| Hover image | Shown on hover, with the heading over it. Without a hover image the heading sits under the image. |
| Mobile hover image | An image from your files. |
| Link | Where the link goes. |
| Open in new tab | Turns this on or off. |
| Heading | |
| Heading | |
| Heading style | Options: Display, Heading, Subheading. |
| Heading size | Slider. |
| Heading size (mobile) | Slider. |
| Make font bolder | Turns this on or off. |
| Heading color | |
| Heading position | On the hover image. Options: Top, Center, Bottom. |
| Heading position (mobile) | Options: Same as desktop, Top, Center, Bottom. |
| Alignment | Options: Left, Center, Right. |
| Alignment (mobile) | Options: Same as desktop, Left, Center, Right. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- The arrows sit next to the heading and only show while there are more images than fit.
- The mosaic stops changing images for shoppers who prefer reduced motion, while something inside has keyboard focus, and in the theme editor.
- Use images of the same shape, or a fixed Image ratio, for an even row.