Theme Sections

Image gallery

Image gallery displays a fixed collage of five clickable images—two large tiles on top and three smaller tiles below. Configure each tile’s photo, link, and layout options for campaign grids or editorial storytelling.

Storefront preview

Image gallery section preview on the Fragrance Shop storefront

Storefront preview

Where to find this section

Where to find this

Themes → Customize → Add section → Image gallery

Find it under the Images and media group in the section picker.

Image gallery in the Add section list under Images and media

Theme editor section picker

Layout

Full width layout

Switches the gallery between full page width and a contained layout inside the page container. Default: Off (container width).

Usage

Turn on for edge-to-edge collage across the screen.
Keep off to align with other container-width sections, as in the storefront preview.

Image spacing and side padding

Sets both the gap between images and horizontal padding inside the gallery. Range: 0–24 px (step 2). Default: 8 px.

Usage

Increase for more space between the five tiles and along the sides.
Set to 0 px for tiles that sit flush together.

Image corner radius

Rounds the corners of every gallery image using presets from Theme settings → Border radius. Default: Extra large radius.

Usage

Pick a preset that matches rounded corners used elsewhere on your store.
Applies to all five tiles for a consistent collage look.

Gallery images

Five fixed banners

This section always uses exactly five image slots in a fixed grid: Primary banner and Secondary banner on the top row, plus three Supporting banner tiles on the bottom row. Each group has the same fields: image, alt text, link, and open in new tab.

Usage

Upload all five images for the full collage layout shown in the preview.
Top-row banners use larger recommended sizes; bottom-row banners use smaller sizes (see below).
Any copy shown on the storefront must be part of the image artwork—this section does not add separate heading or description fields.

Supporting banners (3, 4, and 5)

Three bottom-row tiles, each labeled Supporting banner in the editor. Same fields as the top row: image, alt text, link, and open in new tab. Recommended image size: 500 px wide (use 1000 px for retina).

Usage

Fill all three for the three-column bottom row in the preview.
Use smaller artwork sized for the shorter bottom tiles.
Set links per tile for distinct destinations (gifts, collections, product lines).

Image alt text

Describes each banner image for accessibility and SEO. Available on all five banner groups.

Usage

Describe what appears in the photo if the image conveys information.
Leave blank to fall back to the file’s alt text when set in the media library.

Link

Makes the entire banner tile clickable. Paste a URL or search for a page, collection, or product on each of the five banners.

Usage

Without a link, the image is not clickable.
Use a different link on each banner to route traffic to separate destinations.

Open in new tab

Opens that banner’s link in a new browser tab when enabled. Default: Off on all five banners.

Usage

Use for external URLs; keep off for in-store collection and product links.

Section spacing

Adds empty space above and below this section on desktop and mobile.

Usage

Top padding (desktop) — Default: 40 px · 0–100 px
Bottom padding (desktop) — Default: 40 px · 0–100 px
Top padding (mobile) — Default: 40 px · 0–100 px
Bottom padding (mobile) — Default: 40 px · 0–100 px
When you move the slider, the gap above or below grows or shrinks