How Luv Variant Images setups work

Shared and tied photos

Each photo is either shared (it shows for every variant: a lifestyle shot, a size chart, a how-to) or tied to one or more option values. A shopper who picks a variant sees the shared photos plus the ones tied to its values, in your product's own photo order. The app never reorders them on its own: to change the order, drag the photos in the app (see Photo order) or reorder them in Shopify. One option usually drives the photos (Color, Flavor, Style), and the setup is made on that option; you can switch it at the top of the product.

Adding photos

Click Add photos in a product (or drop photos onto it), or Add from Files to pick photos already in your Shopify files. For each photo, give it a file name and alt text, pick the value it's for (or every variant) and where it goes: first, after any photo, or at the end. Next to Alt text, Use Ady writes it from the photo itself; check the words before you add it. It's added to the product in Shopify in that place, with that alt text and file name, the same fields as Shopify's own product page. The value you picked is tied like any other change: click Save to show it only for that value. Pick a value in the row above the photos first and new photos start out tied to it. JPG, PNG, WebP, GIF and HEIC, up to 20 MB and 20 megapixels each, 20 at a time. To change a photo's alt text or file name later, click the pencil on it; a new file name changes the photo's web address. Shopify uses the file name and alt text in search, and reads the alt text aloud to shoppers who can't see the photo, so say what the photo shows (“Lemon-Berry pouch, front”).

Photo order

Drag a photo to a new spot and the others make room, as on Shopify's product page. On a phone, hold a photo for a moment, then drag it; with a keyboard, press Alt (Option on a Mac) and an arrow key. Click Save to put the new order on the product in Shopify, or Discard to put it back. Every variant's gallery follows the order, and each variant's cart and checkout image stays as it is.

Two options at once

A photo can be tied to values of two options, such as a flavor and a pack size. It then shows only for variants that have both. Tie it to its flavor first, then switch Images change with to the second option, pick a value and click the photo again.

Each variant

When every combination has photos of its own (a red large and a red small that look different), switch Images change with to Each variant. The row above the photos then lists every variant by its title, such as “Red / Large”, and a photo you click shows for that variant only. Assign for me works here too, starting from each variant's own image. Each variant is offered for products with two or more options and up to 100 variants.

How Assign for me decides

• Smart (recommended) reads the variant images you set in Shopify, the file names and the alt text, and allows small spelling slips. It also pairs matching photo sets: when a picture comes in a version for each value (“how-to-citrus”, “how-to-berry”), each version goes with its value, and the version that names no value goes with the others.
• By image order takes each variant's image and the photos after it, up to the next variant's image.
• By alt text ties photos whose alt text names a value.

Photos whose name and alt text say nothing stay shared. Check them before you save.

Variant main images

With Set variant main images on, each variant's main image in Shopify becomes one of its own tied photos: the one you star, else the one it already has when that's tied to it, else its first tied photo. So the cart, checkout, order emails and product feeds show the right one. It's on for new setups by default (Settings), and you can switch it per product. Removing a setup puts back the main images it changed.

Needs a look

When a product changes in Shopify, Luv Variant Images updates its setup and tells you what to check. New photos show on every variant until you assign them. A value with no photos of its own, a value that was renamed or removed, and a variant main image that doesn't match the setup are flagged too. Products with something to check are under Products › Needs a look.

Settings

• Show variant images: off shows every photo on every product, as your theme draws them. Your setups are kept.
• Other variants' photos are taken out of the gallery (the default, which works with sliders: dots and arrows count only what's showing) or hidden in place, for a theme that redraws its gallery in an unusual way.
• Start on the first image: when the page opens, and each time a shopper picks another variant, the gallery starts on its first photo. Off, it stays on the photo your theme picks.
• Two optional selectors for theme developers, used only if support asks.

Speed

The app embed loads only on product pages you've set up. There it's about 6 KB of code inside the page itself, with no extra request, no polling and nothing stored in the shopper's browser, and your catalog's size doesn't matter: each page carries only its own product's setup. While the page loads, other variants' photos stay hidden and the slider's dots wait for the right count, so the wrong photos never flash. A variant switch filters the gallery in milliseconds, even on a product with hundreds of photos. In our Lighthouse tests (mobile, a Dawn-style theme and a Flickity theme, eight runs each) performance scores with and without it were the same within the test's own noise.

Themes

Luv Variant Images finds your theme's main gallery by itself and works with Shopify's own themes, Flickity, Swiper, Slick and Owl sliders and plain grids. With a slider it can't drive, the page opens on the variant the shopper picks, so the right photos still show. It leaves your cart, product cards, recommendations and quick view popups alone. It ties photos to Shopify's option values rather than their words, so translated storefronts and renamed values keep working, and a shopper who lands on a variant's link sees that variant's photos straight away.

For developers

After every change the engine fires luv:variant-images on document. If your theme redraws its gallery in its own code, call window.LuvVariantImages.refresh() afterwards to apply the setup again.

Ady and the connector

Ask Ady, inside the app, which products could use variant images, to set one up, or why a product needs a look. Prefer Claude or ChatGPT? Settings › Integrations gives you the connector address and a connect code, with the same tools. Saving or removing a setup and changing the settings wait for your click on Confirm in Ady, and for your yes in Claude or ChatGPT.

Questions? hi@customerluv.app — a founder answers every message.