Before and after photo gallery on a Shopify page

Skincare, hair products, cleaning sprays, furniture paint, teeth whitening, garden tools: a surprising share of what sells on Shopify is sold by showing the same thing twice, once before and once after. The format is simple and the usual ways of building it are not. A theme's image-with-text section holds one picture. A slider hides the second photo behind a click. A comparison widget from a third-party script costs a plan and a script tag. This guide builds a before and after gallery with Snug Gallery using settings that already exist: a grid with an even number of columns, a fixed aspect ratio so every pair lines up, caption titles that say which is which, and manual ordering so the pairs stay together.

What a before and after page needs

Three things, in this order of importance. The two photos of a pair have to sit next to each other on every screen size, or the comparison is lost. They have to be the same size and the same crop, because a before shot that is a little taller than its after shot reads as a different product. And each has to be labelled, because once the gallery has six pairs a visitor cannot tell which column is which without a caption.

Everything else is taste. Whether the labels overlay the photo or sit under it, whether the pairs are separated by a gap or butt up against each other, whether clicking opens a lightbox. Snug Gallery has settings for all of those too, and the second half of the guide goes through them.

Set up the gallery

In the Snug Gallery app, click New gallery, name it something like "Results" and choose the Grid layout. Grid is the one layout that crops every image to the same shape, which is exactly what a pair needs; Masonry would keep each photo's own proportions and the pairs would drift out of line.
Upload the photos in pairs: before, after, before, after. Order matters, and the next step keeps it.
Set the sort order to Manual. The other modes (newest, alphabetical, random) each have a reason to exist, and each of them would separate a before from its after. Drag any photo that landed in the wrong place; the sort order guide explains what each mode does.
Give every image a caption title of "Before" or "After", and use the caption text for the detail: "Week 0" and "Week 8", or the product used. Write the alt text as a description of what the photo shows, not the label, since alt text is what a screen reader and Google read.
In the theme editor, add the Gallery block to the page, pick the gallery, and set Columns on desktop to 2, Columns on tablet to 2 and Columns on mobile to 2. Two is the number that keeps a pair on one row at every width; four works on desktop for two pairs per row, but only if tablet and mobile are still set to two.
Set Image shape to Square (1:1) or Landscape (4:3), whichever matches how the photos were taken, so both halves of every pair are cropped identically.
Set the caption style to Below image or Overlay, always visible, so the Before and After labels are there without a hover. Save, and check the page on a phone.

Why two columns everywhere

The columns settings are the heart of this layout. Columns on desktop goes from 1 to 6, Columns on tablet from 1 to 4, and Columns on mobile is a choice between 1 and 2. A gallery that is 3 columns on desktop and 1 on mobile is a fine ordinary gallery and a broken before and after page: on desktop the pairs straddle rows (before, after, before on one row; after, before, after on the next), and on a phone every before is followed by its after one full scroll later.

Even numbers fix the first problem and 2 on mobile fixes the second. With 2 on every breakpoint, each row is one pair and the page reads as a stack of comparisons. With 4 on desktop, 2 on tablet and 2 on mobile, a wide screen shows two pairs per row and still reorganises into one pair per row on smaller screens, because the images stay in order and only the row width changes.

The spacing setting controls the gap between images. A small gap keeps the pair visually joined; a larger one separates pairs from each other but, since every gap is the same, also separates a before from its after. If you want pairs to read as single units, keep the gap small and let the caption do the separating.

Cropping both halves the same way

The Image shape setting on the block has five options: Original, Square (1:1), Landscape (4:3), Portrait (3:4) and Wide (16:9). In the Grid layout, anything other than Original crops every image to that shape, centred. Pick the one closest to how the photos were shot and the pair is identical in size by construction.

The crop is centred, so a before shot framed to the left and an after shot framed to the right will lose different edges. The fix is in the camera, not the app: shoot both halves from the same spot with the same framing, which is also what makes the comparison credible. Where that is not possible, crop the two photos to the same framing in an editor before uploading, and leave Image shape on Original. The transparent background guide covers a related case where the file itself has to be prepared before it goes in.

Labels: caption title, caption text, alt

Each image has three text fields and they do different jobs. The caption title is the short label shown prominently, so that is where "Before" and "After" go. The caption text is the longer line shown with it, useful for the timescale or the product. The alt text describes the image for people who cannot see it and for image search; "Before" alone is poor alt text, while "Oak table top with water rings and faded varnish" is good alt text that happens to be the before shot. The captions guide goes through where each field is rendered in each caption style.

For caption style, Below image keeps the photo untouched and puts the label under it, which is the clearest choice when the photos are the point. Overlay, always visible puts the label on the photo, which saves vertical space and reads well for pairs because the two labels sit at the same height. Avoid the hover styles here: a label that appears only on hover does not exist on a phone, and a before and after page without labels is a page of similar photos.

If the gallery is on a paid plan and the Pinterest button is on, the pin description is taken from the caption title, so a pinned image would be described as "Before". Turn the button off for this gallery or accept that the pins will need editing on Pinterest.

The lightbox and the hover effect

Clicking a tile opens the lightbox with that photo, and the arrows move through the gallery in order, so from a before shot one press of the right arrow shows its after shot at full size. That is a usable comparison on its own. Lightbox captions are a separate switch; turn them on so the Before and After labels travel into the lightbox too. The lightbox guide covers keyboard and swipe behaviour.

Snug Gallery does not have a slider that wipes one photo over the other. Two photos side by side is a different presentation, not a lesser one: the visitor sees both at once, it works without JavaScript, and it does not depend on anyone discovering a drag handle. If a wipe slider is essential to your pitch, this is not the tool for that one section, and it is better to know that now.

One hover effect is worth a look: Grayscale to colour shows each tile desaturated until the pointer is over it. On a before and after gallery that reads as a small flourish rather than information, and it does nothing on touch screens, so most stores will leave the hover effect on None. Soft rounded corners, on the other hand, work fine and apply equally to both halves of a pair.

Customer results as before and after

If customers send you their own results, the gallery can collect them. Turn on customer photo submissions for the gallery and a shopper can upload from the page; each submission waits in a moderation queue where you approve or reject it, as the moderation guide describes. The catch for this layout is pairs: a customer uploads one photo at a time, and nothing forces a before to arrive with its after. Approve submissions in pairs, drag them next to each other in Manual order, and set the caption titles yourself before they go live. Where a customer sends only an after shot, it belongs in a general results gallery rather than this one.

A single composite image, before on the left and after on the right in one file, is the other way to do customer results. It gives up the lightbox comparison but can never be split by a reorder, and it is often what customers send anyway. A Grid with one column on mobile and two on desktop suits a gallery of composites.

Where to put it

The block goes wherever the theme editor allows a section: a dedicated Results page, the product page of the product that produced the results, or a landing page for an ad campaign. On a product page it earns its place under the description, where a visitor who has read the claim can see it. The product page guide explains how a gallery block differs from the product's own media and when to use each.

One gallery can appear on several pages, and the pairs stay in step everywhere because the order lives in the gallery, not in the page. Add a new pair and every page that shows the gallery shows it.

Frequently asked questions

How do I make a before and after gallery in Shopify without code?

Create a gallery in Snug Gallery with the Grid layout and Manual sort order, upload the photos in before, after order, label each with a caption title, then add the Gallery block in the theme editor with two columns on desktop, tablet and mobile and a fixed image shape such as Square. Each row is one pair on every screen size.

Does Snug Gallery have a before and after slider?

No. It shows the two photos side by side in a grid, and the lightbox steps from one to the other at full size. There is no wipe or drag comparison slider. If that effect is essential, you need a dedicated comparison tool for that section.

Why do my pairs split up on mobile?

Because Columns on mobile is set to 1, so each before is followed by its after one scroll down. Set it to 2 and each pair shares a row. On desktop use an even number of columns, 2 or 4, for the same reason.

Can customers submit their own before and after photos?

Yes, through the gallery's customer photo submission form. Each photo arrives separately in the moderation queue, so approve them in pairs, drag them next to each other in Manual order and set the Before and After caption titles yourself. Alternatively ask for a single side-by-side image.