Snug Gallery block settings: every option explained

The Snug Gallery block in the Shopify theme editor has about thirty settings, grouped under seven headers. Most people change three of them, leave the rest at their defaults and never find out what Shadow or List: alternate caption side would have done for them. This is the reference we wished existed: each setting in the order it appears in the editor, what it changes on the page, what the default is, and when it is worth touching.

Where the block settings live, and what they do not control

Open the theme editor, add or select a Snug Gallery block, and the settings panel on the right is what this guide walks through. Everything in it is a presentation choice that belongs to this one placement of the block. The gallery itself (which images it holds, their order, captions, tags, hotspots and the layout type) is edited inside the Snug Gallery app and is shared by every block that points at it.

That split matters when the same gallery sits on two pages. Change a caption in the app and both pages update. Change Caption style in a block and only that page changes. If you want the lookbook on the home page to show captions on hover and the same lookbook on its own page to show them below each image, that is two blocks with two settings, one gallery, no duplicated uploads.

Content: Gallery and Heading

Gallery is a picker listing every gallery in the app. Until you choose one the block renders nothing, which is why a freshly added block looks like an empty section. Heading is an optional title above the grid. Leave it blank if the page section already has a heading of its own; two stacked titles is the most common layout mistake we see on new installs.

Layout: columns, spacing and image shape

Columns on desktop, Columns on tablet and Columns on mobile are three separate numbers, defaulting to 3, 2 and 1. They apply to the grid, masonry and collage layouts; a carousel or slider ignores them because it decides how many tiles fit from the tile width. Mobile offers only 1 or 2 because three portrait photos on a 360 pixel screen are thumbnails, not photos.

Spacing between images is the gap in pixels, default 12. Zero gives an edge to edge mosaic, which looks good with Image shape set to Square and badly with Original, because mismatched heights leave jagged edges with nothing to hide them.

Image shape crops every tile to a ratio: Original, Square (1:1), Landscape (4:3), Portrait (3:4) or Wide (16:9). The default is Original, which keeps whatever you uploaded. The crop is done by the browser with object-fit, so the full image is still what opens in the lightbox and still what Google indexes. Pick Square for product shots from a mixed set of photographers, Portrait for fashion, and leave Original for masonry, which exists precisely to show mixed shapes without cropping. The layouts guide goes further on which layout suits which photos.

Layout: slider, list and filter options

Slider: autoplay and Slider: seconds per image only do anything when the gallery uses the slider layout. Autoplay is off by default and we suggest leaving it off on pages where people read; a moving image next to a paragraph pulls the eye every five seconds. The interval defaults to 5 seconds.

List: alternate caption side is for the list layout, where each image sits beside its caption. On, the caption flips from right to left on alternate rows, which gives a long editorial page a zigzag rhythm. Off, every caption is on the same side, which reads more like a catalogue.

Tag filter bar shows the filter buttons that let shoppers narrow a tagged gallery: Hidden, Aligned left or Centered (the default). Filter button style switches between Pills and plain Text. If your gallery has no tags the bar does not render regardless of this setting, so an empty space here is a tagging problem, not a theme problem.

Tiles: corner radius, border, shadow, hover

Corner radius rounds each tile, default 4 pixels. Border adds a faint one pixel dark line around each tile; it is off by default and mostly useful for product shots on white backgrounds that otherwise float with no visible edge. Shadow is None, Soft or Strong. Soft is a wide, faint shadow that lifts tiles slightly off the page; Strong is a tight dark one. Shadow and Border together is rarely needed, pick one.

Hover effect is the setting people enjoy most and misuse most. Zoom (the default) scales the image slightly inside its frame. Lift raises the tile a few pixels and deepens its shadow. Shine sweeps a light diagonal across the tile once. Grayscale to colour shows the tile desaturated until the pointer arrives, a strong look for a portfolio and a confusing one for products, where a grey jumper is a colour the shopper may think they are buying. None is the right answer on a page with many small tiles, where constant movement under the pointer becomes noise. Touch screens have no hover, so whatever you choose, phones see the resting state.

Captions: style and colours

Caption style has five values. Hidden shows no captions in the grid (they can still appear in the lightbox, see below). Below image puts the text under each tile in the theme font, the most readable choice and the only one that does not cover any part of the photo. The three Overlay options draw the caption on top of the image: always visible, show on hover, or hide on hover. The default is show on hover, which keeps the grid clean on desktop. On phones that means captions are never seen, so for a mobile heavy store either Below image or Overlay, always visible is the honest choice. The captions guide covers what goes in the caption and how it relates to alt text.

Caption background and Caption text set the colours for the overlay styles. The defaults are a 70 percent black and white, which reads on almost any photo. If you change the background to a brand colour, keep the alpha: a solid block over a photo looks like a sticker.

Lightbox and video

Open images in a lightbox is on by default. Off, clicking a tile does nothing unless the item has a link or hotspots. Show captions in the lightbox is also on, and is independent of the grid caption style, which is how a gallery with Hidden captions in the grid can still explain each photo once it is opened large. What the lightbox does with keyboard and swipe is in the lightbox guide.

Autoplay uploaded videos muted applies to video items in the grid. On, each clip plays silently in its tile, looping, the way a product teaser does on a social feed. Off, the tile shows the poster image with a play icon and the video plays in the lightbox. Browsers only allow autoplay when the video is muted, which is why the setting says so in its name. Keep it off for galleries with more than a few clips; several videos decoding at once is noticeable on older phones.

Extras: Pinterest, saving, pins, CSS, customer photos

Pinterest save button adds a Save control to each tile on hover, prefilled with the page URL, a 1600 pixel version of the image and the caption. Discourage right-click saving blocks the context menu on images. It does not stop a determined person, and the setting is named with that word on purpose; it does stop the casual save, and it also blocks shoppers who right-click to open an image in a new tab, so weigh that. Both of these are paid plan features and stay inactive on the free plan even when switched on.

Shop the look pins controls how hotspots look on tagged images: Dot, Numbered or Product name tag. Pin colour sets their colour, default a warm yellow. These only appear on items that have hotspots placed in the app.

Custom CSS is a text area whose rules are scoped to this block, so a selector you write here cannot leak into the rest of the theme. The custom CSS guide has worked examples and the class names to target.

Customer photos button is the label on the button shoppers use to submit their own pictures, default Share your photo. Show submitter names on customer photos decides whether an approved customer photo carries the name they gave. Both only matter when customer submissions are enabled for the gallery in the app.

Section spacing

Top padding and Bottom padding add space above and below the block, default 24 pixels each. If your theme section already has padding settings of its own, set these to zero and let the section control it; two padding settings stacked is the usual cause of a gallery that sits too far from its heading.

A short list of defaults worth changing

For a product or lookbook gallery on a store where most visitors are on phones: Caption style to Below image or Overlay, always visible; Columns on mobile to 2 for square product shots; Hover effect to None or Lift. For a photography or portfolio page: Image shape Original with the masonry layout, Shadow Soft, Hover effect Zoom, captions Hidden in the grid and on in the lightbox. For a wall of small social style tiles: Spacing 2 or 4, Image shape Square, Corner radius 0, Hover effect None.

Everything here is per block, so trying a change is free. Adjust, look at the preview on the phone size in the editor, and if it is worse, the previous value is one click away in the theme editor undo.

Frequently asked questions

Why do Columns on desktop and the other column settings do nothing on my gallery?

The gallery is probably using the carousel or slider layout, which sizes tiles by width and scrolls horizontally rather than wrapping into columns. Switch the layout in the app to grid, masonry or collage and the three column settings take effect. The layout type is a property of the gallery, chosen in the app, not of the block.

Can two blocks show the same gallery with different settings?

Yes. Every setting in this guide belongs to the block, so the same gallery can be a three column grid with hover captions on the home page and a two column grid with captions below on its own page. The images, captions, tags and hotspots are shared through the app and edited once.

Does Image shape crop the image that Google indexes or that opens in the lightbox?

No. The crop is applied in the browser to the tile only, using object-fit. The file Shopify serves is the full upload, the lightbox opens that full image, and the image URL in the page markup is unchanged, so search engines index the uncropped photo.

Why are hover captions never visible on my phone?

Touch screens do not have a hover state, so a caption style that depends on the pointer arriving over the tile never triggers. Use Below image or Overlay, always visible when a large share of visitors are on mobile, or rely on Show captions in the lightbox so the text appears once a photo is tapped.