Use custom images
Variant swatches
Last updated
Variant swatches
Last updated
Using custom images for swatches is great for product variants that have patterns or textures. Custom swatch images require image file names and variant names that match, which we will cover below.
Adding custom swatches images involves two general steps: (1) Create and upload your custom swatch images and (2) Set up your product variants with matching names.
For each product variant, you need to create a PNG image by screenshotting or cropping your product images. Each swatch image needs a file name that matches the variant name in your product options.
For example, if the product variant is called "Sea Blue", the swatch image file must be named sea-blue.png
.
If your store uses multiple languages, make sure to upload swatch images with file names that match the translated name of your product variants, for each language.
For example, if your store uses English and German, you need two swatch image files for the default variant name (yellow.png
) and the translated name (gelb.png
).
Once you've uploaded your images, you need to set up your product variants with names that match the file names of your swatch images.
Related links Enable swatches Use default color swatches Use custom color swatches Use variant image swatches Change swatch styles Show swatches on product cards Enable dynamic option availability
Gray
gray.png
Green
green.png
Sea Blue
sea-blue.png
Red and Blue
red-and-blue.png
English
Yellow
yellow.png
German
Gelb
gelb.png
French
Jaune
jaune.png
Green
yellow.png, gelb.png, jaune.png
Sea blue
sea-blue.png
Red and blue
red-and-blue.png