Expanding gallery
Show a row of image panels where the selected panel expands to reveal its heading, text and button.
The Expanding gallery section is an image accordion: one panel is open and large, while the others are shown as narrow strips. When a shopper clicks a strip, it expands smoothly and shows its content. Use it to feature collections, product categories, lookbook images or brand stories in a compact, interactive way.
1. Our guide to set up an Expanding gallery section:
2. Section settings
Color scheme: Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.
Section header
Subheading: Small text shown above the heading.
Heading: The main title of the section.
Heading size: 15–80px.
Header alignment: Left / Center.
Description: Short text shown with the heading.
Header layout: Heading above description / Heading beside description.
Gallery settings
Desktop height: Height of the gallery on desktop, based on the screen height: Small / Medium / Large / Custom.
Mobile height: Height of the open panel on mobile: Small / Medium / Large / Custom.
Custom desktop height: 200–1000px. Shown when Desktop height is set to Custom.
Expanded panel size: How much wider the open panel is than the collapsed strips, 2–6. Applies on desktop.
Auto-rotate panels: Opens the next panel automatically. Rotation pauses while a shopper hovers over or focuses on the gallery.
Rotate every: Time between panels, 3–10 seconds. Shown when Auto-rotate panels is on.
Show labels on collapsed panels: Shows a label on each closed strip.
Label style: Panel heading / Number. Shown when Show labels on collapsed panels is on.
Custom mobile height: 200–800px. Shown when Mobile height is set to Custom.
Corner radius
Image: Rounds the corners of each panel, 0–40px.
Section
Section width: Page width / Full width.
Top padding: 0–100px.
Bottom padding: 0–100px.
3. Gallery block settings
Each Gallery block is one panel. You can add up to 6 panels. The first panel is open when the page loads.
Image: The panel image.
Mobile image: Optional image used on mobile. If empty, the main image is used.
Image overlay opacity: Darkens the image so text stays readable, 0–100%.
Subheading: Small text shown above the panel heading.
Heading: The panel's title. Also used as the strip label when Label style is Panel heading.
Heading size: H1 / H2 / H3 / H4 / H5 / H6.
Description: Short text shown below the heading.
Content position: Where the text sits in the open panel: Bottom left / Bottom right / Top left / Top right / Center.
Content width: Maximum width of the text area, 240–800px.
Button
Button label: Text on the button. Leave empty to hide the button.
Button / panel link: Where the button goes. If there's no button label, the whole open panel becomes clickable instead.
Custom colors
Use custom colors: Uses the colors below for this panel instead of the default white text and standard button colors.
Heading: Color of the panel heading.
Text: Color of the subheading and description.
Button label: Text color of the button.
Button background: Background color of the button.
4. Tips
4 to 5 panels usually look best. With more panels, each collapsed strip gets narrower.
Panels are cropped to very different shapes as they open and close, so use images with the subject in the center (at least 1600px wide).
On mobile, the panels stack vertically as an accordion and the labels are shown horizontally.
Keep headings short when using Label style > Panel heading, since the label is shown vertically on narrow strips on desktop.
Was this helpful?