Product gallery: layout, ratios and zoom

Gallery layouts, image ratios and zoom behaviour on the Volume product page, and what to do about blurry or cropped photos.

All of it lives in the settings of the Product overview section itself, not in a block. Open the product template, click the section name, and scroll to the Media header.

Layout

Style offers five arrangements: Stack, Grid (the default), Alternative grid 1, Alternative grid 2 and Gallery. They control the desktop layout; on mobile the media is always a swipeable row.

Gallery is the only style that behaves like a classic one-image-at-a-time slideshow, so it is the only one with Arrows style and Arrows size next to it. The other four lay all the media out on the page at once.

Size sets how much of the 12-column row the gallery takes — from 4/12 to 9/12, default 6/12. The content column gets whatever is left, so widening the gallery narrows the price and buy buttons. Position puts the gallery on the Left or the Right. Grid gap is the space between the media items.

Ratios and cropping

Desktop media ratio and Mobile media ratio are separate settings and both offer Original alongside the fixed ratios (1/1, 4/5, 2/3, 4/3, 3/2, 16/9). Default is 1/1 on both.

On Original the image keeps its own proportions and nothing is cropped — but products shot at different ratios will then make the page height jump as the customer moves through the catalogue. A fixed ratio keeps the layout stable at the cost of cropping, and Focal point decides which part of the photo survives the crop.

If you would rather not crop at all but still want a fixed frame, tick Fit media inside container. The image is then letterboxed inside the ratio instead of filled into it. Two settings come into play once it is on: Container inner spacing, the padding between the image and the edge of its frame, and Media gallery color scheme, which fills the empty space around the image.

Zoom

The Image zoom header holds a Style setting with four options, not three:

• Disable — the default. Clicking an image does nothing.
• Open lightbox — the image opens over the page.
• On hover — the cursor magnifies the image in place, no overlay.
• Slideshow — the overlay opens as a slider through all the media.

Magnification is hard-coded at 2× in the theme — there is no setting for the factor. That applies both to On hover and to the click-to-zoom inside the overlay.

Once Style is anything but Disable, five more settings appear: Desktop image width (30–100%), Mobile image width (70–100%), a Media ratio and Focal point for the overlay that are independent of the gallery's own, Show arrows in mobile slideshow, and Enable slideshow zoom on click.

If zoomed images look soft, the source file is the limit. Upload product photos at least 2048px on the long edge — the theme cannot magnify detail that is not in the file, and 2× zoom on an 800px image will always look blurred.

Very large files hurt more than they help. Keep uploads under roughly 500KB per image; Shopify serves resized versions automatically, but the largest one still has to download.

Thumbnails

Desktop and mobile thumbnails are two separate groups of settings.

Under Desktop thumbnails, Show offers Disable (the default), Left, Below gallery and On top. Below gallery does not apply to the Grid style — pick Left or On top there. Enable sticky thumbnails keeps the strip in view while the page scrolls, but it does not work with the Gallery style. Width (24–160px, default 80) and Gap size the strip, and it has its own media ratio, focal point and corner radius.

Under Mobile thumbnails, Show is a simple checkbox, off by default, with the same width, gap, ratio and focal point settings beneath it.

See Product page for the rest of the section's settings.