Transparent background images in a Shopify gallery

Shopify's changelog for 23 October 2026 announced that Sidekick can now generate images with transparent backgrounds, which means a lot of stores are about to have a folder of product cutouts with no backdrop for the first time. A cutout behaves differently from a photograph the moment it lands in a gallery: the gallery decides what colour sits behind it, how it is framed in a tile and what it looks like in a dark lightbox. This guide explains what Snug Gallery does with a transparent image at each of those points, which upload formats keep the transparency and which quietly flatten it, and the two lines of custom CSS that give a cutout the backdrop you actually want.

What a transparent image is, for a gallery

A photograph has a colour in every pixel. A cutout has pixels that are nothing, and the browser paints whatever is underneath. In a product listing that is the point: the same cutout sits on a white product page, a cream collection card and a dark banner without being re-edited. In a gallery it has a consequence that is easy to forget until you see it. Whatever the gallery puts behind the image becomes part of the image, and a gallery has three such places: the tile on the page, the full size view in the lightbox and any small thumbnails it draws.

Shopify's new Sidekick image generation produces files with a real alpha channel, so none of this is theoretical. If you ask Sidekick for a product on a transparent background and drop the result into Snug Gallery, the sections below describe exactly what you get.

Which formats keep the transparency

Snug Gallery accepts JPEG, PNG, GIF, WebP, HEIC and AVIF images on upload. Of those, PNG, GIF, WebP and AVIF carry an alpha channel and arrive in your store's Files library with it intact. JPEG cannot store transparency at all; if an editor exports a cutout as JPEG the empty area becomes a solid colour, usually white, before the file ever reaches us, so a transparent image that shows up with a white box around it was almost always saved as a JPEG somewhere along the way. Check the extension of the file you uploaded before blaming the gallery.

The images are served by Shopify's CDN, the same one your theme uses, and the gallery asks it for resized copies at the widths the layout needs. The CDN keeps the alpha channel on the formats that support it, so a PNG cutout is still a cutout at every size. One thing we do not control: the CDN may deliver a modern format such as WebP to browsers that accept it, which is fine for transparency because WebP supports it, but it means the file a shopper downloads may not have the extension you uploaded. The guide on where gallery images live covers the Files side of this.

What sits behind a cutout in the grid

Every tile in a Snug gallery has a faint grey behind the image, four percent black on top of whatever your theme's page colour is. It is there so that an image which is still loading, or which is shorter than its tile, does not leave a hole. For a photograph you never see it. For a cutout you see it in every transparent pixel. On a white theme that reads as a very light grey panel with the product floating in it, which many stores like because it separates the tile from the page. On a dark theme the same four percent is nearly invisible and the cutout appears to float on the page itself.

Framing is the other half. Grid, portfolio and collage layouts give every tile a fixed shape, square, 4:3, 3:4 or 16:9, chosen in the Image shape setting, and the image fills that shape with object-fit cover, which means it is enlarged until it covers the box and the overflow is cropped. A cutout of a tall bottle in a square tile loses its top and bottom. That is the same crop a photograph would get, but on a cutout it looks like a mistake because there is no scene around the product to make the crop look intentional. Two layouts avoid it: masonry and row ignore the Image shape setting and use each image's own proportions, so the whole cutout is shown and the tile shrinks to fit it. If your gallery is mostly cutouts, those two layouts, or the Original option in a grid, are the ones to start with.

Captions and the hover effect behave normally; they sit above the tile and do not care what is transparent. The one effect worth checking is the zoom on hover, which enlarges the image inside the tile and so crops a little more of it. On a cutout with the product close to the edge that can clip a corner for a moment, and the fix is either the Original image shape or a little more empty space around the product in the file itself.

The lightbox is nearly black

Click a tile and the lightbox opens over a backdrop of 92 percent black, with the full size image shown whole, object-fit contain, so nothing is cropped at this stage. For a photograph that backdrop makes the colours pop. For a cutout it means the product is now on near black, whatever colour the tile was. A dark product with soft shadows baked into the cutout can lose its edges against it, and a cutout that was generated with a thin light fringe, which some tools leave behind, suddenly shows a halo it did not have in the grid.

There are two ways to deal with this. The first is to decide that it is fine, which for most products it is: a pale product on near black looks like a studio shot. The second is to change the lightbox background with custom CSS, which is covered below. If the gallery exists to show a range of cutouts at full size, a mid grey or a colour from your brand palette behind the lightbox image is often the better choice, and it takes one rule.

The full size file the lightbox loads is requested at up to 2048 pixels wide, so the alpha edge is as clean as the file you uploaded. If an edge looks rough at that size it was rough in the source, and the thing to fix is the export, not the gallery. Sidekick's output is generally clean, but a cutout made by hand with a quick selection tool will show its seams here.

Setting the backdrop with custom CSS

The block's Custom CSS field is scoped to the gallery it belongs to, so rules you type there cannot leak into the theme; the scoped CSS guide explains how that works and lists the class names. For cutouts there are three rules you are likely to want, and you can use any of them alone.

To put a plain white behind every tile, so the cutouts sit on white regardless of the theme colour: .snug__media { background: #fff; }. To use a soft brand tint instead, swap the hex for your colour, for example background: #f4efe8. To change the lightbox backdrop from near black to a dark grey that keeps shadows readable: .snug-lightbox { background: #2a2a2a; }. For a light lightbox on a store with a light aesthetic, something like #f6f6f6 works, though check the close and arrow controls against it, since they were drawn for a dark backdrop.

A subtler option is a gradient or a very faint checker behind the tile, which some portfolio sites use to make transparency visible on purpose. That is a single background rule as well. Whatever you pick, preview on a phone, where the tiles are larger relative to the screen and a backdrop colour is more of the page.

Product pins and other small renderings

If you use product hotspots, the small product thumbnail in the pin card is drawn at 64 pixels with its own faint grey behind it, five percent black, and the product image comes from the product itself rather than the gallery, so a transparent product image shows up as a tiny cutout on that grey. It looks fine. The Pinterest save button, when enabled, offers the image at up to 1600 pixels wide and Pinterest renders it on its own white, so a cutout pins cleanly.

The customer photo form is the one place where transparency is unlikely to appear, since shoppers upload photographs, but if one does upload a PNG with transparency it is treated like any other image: it keeps its alpha and gets the same tile and lightbox treatment described above.

A short checklist for a cutout gallery

Export or generate as PNG, WebP or AVIF, never JPEG. Pick masonry, row or the Original image shape if the products vary in proportion, and a fixed shape only if you have left generous space around each product in the file. Decide the tile backdrop: leave the default faint grey, or set a white or brand colour in Custom CSS. Open the lightbox on your darkest product and decide whether the near black backdrop works or wants a rule of its own. Then check the gallery once on a phone and once on a dark mode screen if your theme has one, because a cutout's apparent background changes with both.

None of this is special to Sidekick. A cutout from a photographer, a 3D render or a background remover behaves the same way. What Shopify's change does is make the files common, and a gallery that was tuned for photographs will show the difference the day the first batch is uploaded. Ten minutes with the Image shape setting and two lines of CSS is usually all it takes.

Frequently asked questions

Does Snug Gallery keep the transparent background of a PNG?

Yes. PNG, GIF, WebP and AVIF uploads keep their alpha channel in your store's Files library and in every resized copy the gallery requests from Shopify's CDN. Only JPEG cannot store transparency, so a cutout that shows a solid white box was flattened to JPEG before it was uploaded.

Why does my transparent image have a grey background in the gallery?

Each tile has a faint four percent black backdrop behind the image so that loading or short images do not leave a hole. A photograph covers it completely; a cutout shows it through the transparent pixels. To change it, add .snug__media { background: #fff; } or your own colour to the block's Custom CSS field.

Why is my cutout cropped in the gallery grid?

Grid, portfolio and collage layouts give every tile a fixed shape from the Image shape setting and scale the image to cover it, cropping the overflow. Use the masonry or row layout, or the Original image shape, to show the whole cutout, or leave more empty space around the product in the file.

Can I change the lightbox background colour for transparent images?

Yes. The lightbox backdrop is 92 percent black by default. Add .snug-lightbox { background: #2a2a2a; } or any colour you like to the block's Custom CSS, which is scoped to that gallery only, and the full size cutout will sit on that colour instead.