When a shopper taps "Forest Green" on your product page, one of two things happens. Either the gallery switches to a clear photo of the green version and a neat little swatch confirms their choice, or nothing changes and they are left guessing whether the photo they are looking at is the navy one. The second experience is surprisingly common, and it quietly costs sales and triggers "wrong colour" returns.
Variant images and colour swatches are small assets, but every platform handles them differently. Some want a tiny swatch file, some reuse your main photo, and some reject a listing outright if one option is missing its picture. This guide covers how swatch and variant images work on Shopify, Amazon, Shopee, Lazada, Etsy, eBay and Google Shopping in 2026, and how to prepare one set of files that covers them all.
Swatches vs variant images: two different jobs
It helps to separate the two before you start resizing anything.
- Swatch images are the small circles or squares in the variant picker. Their only job is to help a shopper tell options apart at a glance. They are displayed at roughly 24 to 64 pixels.
- Variant images are full-size product photos linked to a specific option. When the shopper selects a colour, the gallery changes to show that version. They follow the same specs as your normal product photos.
A plain colour (a hex code) is fine for solid colours. Photographic swatches are better for anything with texture or pattern: denim washes, wood grains, marble, tartan, metallic finishes and multi-colour prints. A flat hex dot cannot show the difference between "brushed brass" and "polished brass". A 200-pixel crop of the real surface can.
Platform-by-platform rules
| Platform | How option images work | Key image specs | Main trap |
|---|---|---|---|
| Shopify | Native swatches via the Color category metafield (hex or image), plus one image per variant | Variant images: square, 2048 x 2048 px recommended; swatches render at around 24-64 px | Theme must support swatches in the variant picker |
| Amazon | Optional swatch image (SWCH) per child ASIN; otherwise the child's main image is used | Small square JPEG; child main images follow standard rules (1000 px+ for zoom) | Amazon, not you, decides whether image swatches or a text drop-down appear |
| Shopee | Images on the first variation tier only | 1:1, minimum 500 x 500 px, 1024 x 1024 px or larger recommended, 2 MB max | If one option has an image, every option must |
| Lazada | Images attached to each SKU | 1:1, 500 to 2000 px per side, around 2 MB, JPG or PNG | "If you upload a SKU picture, all SKUs must be uploaded" |
| Etsy | Link existing listing photos to variation options | Uses your normal listing photos | Only 20 variation options can have linked photos |
| eBay | Picture sets tied to one variation aspect (for example, Colour) | Up to 12 pictures per variation value, 500 px minimum on the longest side | Only one aspect can control photos, not colour and size together |
| Google Shopping | Each variant is its own item sharing an item_group_id | Each variant's image_link should show that exact variant | One shared image for every colour weakens ad relevance and can cause mismatches |
Shopify: native swatches are now the default route
Shopify's built-in swatches run on category metafields. When you choose a product category, you can add a Color option backed by metaobject entries. Each colour entry can hold a hex value or an image. In the theme editor, the Variant picker block then lets you display options as Circle, Square or None. Modern themes such as Horizon support this out of the box. Older or heavily customised themes may still need an app.
For image swatches, upload a square crop rather than a full product shot. Swatches display at roughly 24 to 64 pixels, so a source of around 200 x 200 pixels stays sharp on high-density phone screens without adding weight. For the variant photos themselves, keep to Shopify's recommended 2048 x 2048 pixel square so zoom works properly. Shopify natively attaches one image per variant, so put the most representative shot of each colour in that slot.
On mobile, make sure the swatch has an effective tap area of at least 44 x 44 pixels (including padding) with roughly 8 pixels between swatches. Tiny swatches packed together lead to mis-taps and frustrated shoppers.
Amazon: swatches are optional, child images are not
On Amazon, the thumbnails in a colour variation family come from each child ASIN. You can supply a dedicated swatch image using the SWCH image slot, either through the Images tab on the child listing (in categories that allow it) or the "Swatch Image URL" column in a flat file. Third-party listing guides describe it as a very small square JPEG, commonly cited at around 30 pixels on the longest side, named in the format SKU.swatch.jpg.
In practice, many sellers skip it. If no swatch is supplied, Amazon uses the child's main image instead, and Amazon controls whether the page shows image swatches or a text drop-down. That makes the child main images the part that really matters. Each one must show the correct colour on a pure white background and meet the usual main image rules, with 1000 pixels or more on the longest side so zoom is enabled.
Shopee and Lazada: all or nothing
The two big Southeast Asian marketplaces share a strict rule: if you add an image to one option, you must add one to every option. Shopee only allows images on the first variation tier. In a Colour x Size listing, put Colour first so each colour gets a picture. Sizes rarely need their own image.
Seller tools also report that Shopee rejects the same image used for two options, so do not reuse your hero shot as a placeholder. Both platforms want square 1:1 images. A 1200 x 1200 pixel JPG under 2 MB is a safe size that sits comfortably within both platforms' limits.
Etsy and eBay: linked photos from your gallery
Etsy lets you link any photo already uploaded to the listing to a variation option. Shoppers then see that photo when they pick the option, right through to checkout. The limit is 20 options with linked photos, so a listing with 30 colours will leave some unlinked. Consider splitting very large ranges into separate listings.
eBay works through variation picture sets. You choose a single aspect, usually Colour, and attach up to 12 pictures to each value. You cannot drive photos from both Colour and Size, so plan your listing structure around the aspect that actually changes how the product looks.
How to shoot and crop swatch images properly
The fastest route to good swatches is to produce them from the same session as your variant photos. That keeps lighting and white balance consistent, so the swatch matches the photo it sits next to.
- Shoot every colour under identical light. Lock your white balance and exposure manually. Auto settings will shift between a black and a white version of the same item.
- Take a flat, evenly lit close-up of the material. Fill the frame with fabric, finish or pattern, and avoid seams, labels, folds and strong shadows.
- Crop from the centre of the material. For patterns, include at least one full repeat so the design is recognisable at small sizes.
- Export swatches as small squares. Around 200 x 200 pixels for web stores, saved as sRGB JPG. Use the dedicated size your channel asks for where one exists.
- Check at actual display size. Zoom out to 100 per cent on a phone. If two swatches look identical at that size, shoppers cannot tell them apart either. Consider a closer crop or a hex colour instead.
- Name files consistently. Something like SKU-colour-swatch.jpg and SKU-colour-01.jpg makes bulk uploads and flat files far less error-prone.
One master set, many outputs
The sensible workflow is to keep one high-resolution master per colour, then generate channel sizes from it: 2048 x 2048 for Shopify, 1200 x 1200 for Shopee and Lazada, 1600 x 1600 or larger for Amazon children, and small square crops for swatches. Doing this by hand for 15 colours across four channels is where mistakes creep in, such as a mislabelled file, a stretched crop or a 3 MB image that Shopee bounces. A batch tool such as PixelPrep lets you resize and pad the whole set to each marketplace's square format in one pass, so every variant arrives on spec.
Colour accuracy matters here more than anywhere else on the listing. The whole point of a variant image is to answer "what colour will I actually receive?" Edit consistently, export in sRGB, and compare each photo against the physical product on a calibrated screen before uploading.
Variant and swatch image checklist
- Every colour option has its own full-size photo. No option borrows another colour's image.
- Textured, patterned and metallic options use photographic swatches. Solid colours can use hex values.
- Swatch crops are square, around 200 x 200 pixels, sRGB, and legible at phone size.
- Shopify: Color category metafield set up, variant picker set to Circle or Square, 2048 x 2048 variant images.
- Amazon: every child ASIN has a correct white-background main image of 1000 pixels or more. Add SWCH swatches if the category supports them.
- Shopee: Colour set as the first variation tier, every option has a unique 1:1 image under 2 MB.
- Lazada: if any SKU has an image, all SKUs have one.
- Etsy: photos linked to up to 20 options. eBay: pictures attached to one aspect, usually Colour.
- Google Shopping: each variant's image_link shows that exact colour, grouped by item_group_id.
- Files named by SKU and colour, generated from one master set so every channel stays consistent.
Get these small images right and your variant picker stops being a guessing game. Shoppers see exactly what they are choosing, and fewer parcels come back because "it looked different online".