Showcase a custom grid of lifestyle and product images, and let customers shop directly from the pictures they're browsing.
Overview
The Gallery section arranges images in a flexible grid where you control the width of each image independently on mobile, tablet, and desktop — making it easy to build masonry-style, editorial layouts. Tag any image with related products so customers can shop the look without leaving the gallery, and let them click through to a full-screen zoom view for a closer look.
Settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Color scheme | Color scheme | Default | Sets the background and text colors for the section. |
Desktop layout
These settings also apply to tablet screens.
| Setting | Type | Default | Description |
|---|---|---|---|
| Media zoom | Select | Disabled | Choose the desired zoom behavior when an image is clicked. Options: Disabled, Column, Slider. |
| Full width | Toggle | Off | Stretches the section across the full width of the screen. |
| Rounded corners | Toggle | Off | Applies rounded corners to every image in the grid. |
| Grid gap | Range |
-1 px |
Space between images. Set to -1 to use the Theme settings Gutter value. Between -1 and 40 px. |
| Margin top | Range |
40 px |
Space above the section. Between 0 and 160 px. |
| Margin bottom | Range |
40 px |
Space below the section. Between 0 and 160 px. |
Mobile layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Media zoom | Select | Disabled | Choose the desired zoom behavior when an image is clicked. Options: Disabled, Column, Slider. |
| Edge to edge | Toggle | On | Stretches the section across the full width of the screen on mobile. |
| Rounded corners | Toggle | Off | Applies rounded corners to every image in the grid. |
| Grid gap | Range |
-1 px |
Space between images. Set to -1 to use the Theme settings Gutter value. Between -1 and 40 px. |
| Margin top | Range |
24 px |
Space above the section. Between 0 and 160 px. |
| Margin bottom | Range |
24 px |
Space below the section. Between 0 and 160 px. |
Blocks
Section Header
Add titles and descriptions before the gallery grid. Limited to one per section.
Section Header settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Subheading | Text | Subheading |
Short label displayed above the heading. |
| Subheading HTML tag | Select | H3 | HTML tag used for the subheading. Options: H1–H6. |
| Heading | Text | Gallery |
The main title for the section. |
| Heading HTML tag | Select | H2 | HTML tag used for the heading. Options: H1–H6. |
| Text | Rich text | — | Optional supporting description below the heading. |
| Text alignment | Select | Center | Aligns the heading content. Options: Left, Center, Right. |
| Size modifier (Desktop layout) | Select | Default | Adjusts the heading size on tablet and desktop. Options: Tiny, Small, Default, Large, Huge, Gigantic, Outrageous. |
| Size modifier (Mobile layout) | Select | Default | Adjusts the heading size on mobile. Options: Tiny, Small, Default, Large, Huge, Gigantic, Outrageous. |
Image
Add as many image blocks as you need to build the grid.
Image settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Image | Image picker | — | The image displayed in this grid item. |
| Related products | Product list | — | Products tagged on this image. Each tagged product shows a small clickable thumbnail on the image. |
| Item width (mobile) | Select | Full width | Width of this image on mobile. Options: Full width, One half (1/2), One third (1/3), Two thirds (2/3). |
| Item width (Tablet) | Select | One half (1/2) | Width of this image on tablet. Options: Full width, One half (1/2), One third (1/3), Two thirds (2/3), One quarter (1/4). |
| Item width (Desktop) | Select | One half (1/2) | Width of this image on desktop. Options: Full width, One half (1/2), One third (1/3), Two thirds (2/3), One quarter (1/4), Three quarters (3/4), One sixth (1/6). |
Mixing item widths across blocks — for example two halves followed by three thirds — is how you build a masonry-style pattern. Rows wrap automatically once the widths in a row add up to a full line.
Setup
Steps
- From your Shopify admin, go to Online Store → Themes.
- Click Customize next to your active theme.
- Click Add section and select Gallery.
- Click Add block and choose Section Header to add an optional title and description.
- Click Add block and choose Image for each picture you want in the grid.
- In each Image block, upload an Image and set its Item width for mobile, tablet, and desktop.
- Optionally, add products to Related products to make the image shoppable.
- Click Save.
Turn on Media zoom to let customers click any image to view it larger in a full-screen gallery. Choose Slider so they can swipe between all the images, or Column to view them stacked in one scrollable view.
Turn lifestyle photography into sales
Tag your best lifestyle and outfit photography with the products shown in the shot. Customers browsing for inspiration can shop directly from the image without hunting through your collections, shortening the path from discovery to add-to-cart.
Works well for
Fashion, home goods, and beauty brands that rely on visual storytelling — Instagram-style grids, lookbooks, and "shop the room" layouts all map naturally onto this section.
Advanced
This section is intended for developers customising the theme. No changes here are required for normal use.
Grid and item widths
Each Image block renders with the classes {item_width} {sm_item_width} {md_item_width} inside a .grid.grid--gallery container, following the theme's 12-column grid (col-*, col-sm-*, col-md-*). The --gap and --sm-gap custom properties fall back to settings.gutter / settings.gutter_sm when the corresponding range setting is -1.
Product tag markup
When an Image block has products set, .gallery-image-products renders one .gallery-product-link per product, absolutely positioned over the image. Hover/focus states are driven entirely by CSS in section-gallery.css:
.gallery-product-link {
--hover-size: 40px;
}
Override --hover-size to change the thumbnail size on hover or focus.
Zoom modal
When either Media zoom setting is not disabled, the section renders snippets/modal-zoom-gallery.liquid with context: 'gallery-section', passing the section's image blocks as medias. The modal reuses the same gridy-slider custom element as the product media zoom, with zoom_type_mobile / zoom_type_desktop controlling whether it behaves as a swipeable slider or a scrollable column per breakpoint.
Tagged products carried into the zoom modal read from media.settings.products, so a block's Related products list also appears as .zoom-item-products inside the full-screen zoom view — no extra wiring needed.