Banner Grid & Banner Gallery
Volume's Banner Grid and Banner Gallery sections turn a wall of images into a lookbook, a gift guide, or a shoppable category wall — no coding needed.
Two ways to build a grid of promotional images without touching code — the editorial, magazine-style layout that turns a plain "browse our categories" page into something worth lingering on.
Banner Grid — mixed tile sizes with a button on each, built for navigation (categories, collections, campaigns).
Banner Gallery — a uniform grid under one shared heading, built for visual storytelling (lookbooks, brand imagery, UGC).
Banner Grid
How to add
In the Theme Editor, click Add section → Banner grid, then Add block → Image for each tile (up to 20), and Save.
Good to know
Block order = grid position. Tiles fill the grid in the order the blocks are listed, top-left first — reordering blocks in the sidebar reorders the visual layout, which surprises merchants who expect to drag tiles directly on the canvas.
Custom grid width only applies in Custom grid style — setting a pixel value while Grid style is set to Page or Alternative has no effect.
Customization ideas
Give one tile Big square or Wide and the rest Square to create a hero-plus-supporting-tiles layout — an easy way to signal "this one matters most" without a separate hero section.
Turn Show button off on tiles meant as pure mood/branding imagery, and keep it on only for tiles that lead somewhere specific.
Settings
Full width
Stretches the grid edge-to-edge
Grid style / Custom grid width
Page, Alternative, Secondary, or Custom width
Grid gap (desktop/mobile)
Spacing between tiles
Image radius
Corner rounding for every tile
Banner size (per block)
Square, Big square, Horizontal, or Wide
Show button (per block)
Toggles that tile's button
Banner Gallery
How to add
In the Theme Editor, click Add section → Banner gallery, add a Heading, then Add block → Image for each tile, and Save.
Good to know
Hover image needs a second setting to work on mobile. Since there's no hover on touch, the hover-swap image is invisible on phones unless you also set Mobile hover image to Hover — otherwise it looks like the feature "isn't working" on mobile when it's actually working exactly as designed for desktop.
Vertical content position includes a Below option that moves the heading under the grid entirely — useful when the heading is secondary to the imagery.
Customization ideas
Use Banner Gallery instead of Banner Grid when the goal is pure visual impact (a lookbook, a UGC wall) rather than navigation — it skips the per-tile button, keeping the grid clean.
Set a hover image that shows a styled/lifestyle shot in place of a plain product photo, for a "look closer" reveal on desktop.
Settings
Heading + style
Shared heading above the grid
Vertical content position
Start, Center, End, or Below the images
Show content only on hover
Reveals tile content only on hover
Mobile hover image
Default or Hover — which image mobile shows
Media ratio
Auto or a fixed ratio (e.g. 1:1)
Best practices
Keep Grid gap consistent with nearby sections so the page doesn't feel disjointed.
Decide Grid vs. Gallery by intent first: are these tiles meant to be clicked (Grid) or just looked at (Gallery)?
Was this helpful?