# Use custom images
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**.
### 1. C**reate and upload custom swatch images**
***
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.
{% hint style="info" %}
**File names must be in lowercase and use hyphens instead of spaces. If your variant name has special characters (e.g. \* or &), replace them with hyphens.**
For example, if the product variant is called "Sea Blue & Red", the swatch image file must be named **`sea-blue-red.png`**.
{% endhint %}
{% hint style="warning" %}
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`**).
{% endhint %}
STEPS
1. You can create PNG image files by taking a **screenshot** (step 2) or **cropping** your product images (step 3).
> We recommend images with minimum length or width of **70px**.
2. **Screenshots**: Use the **built-in screenshot tool** on your computer to capture swatches from your existing product images:
> **Windows:** [How to use Windows Snipping Tool](https://support.microsoft.com/en-us/windows/use-snipping-tool-to-capture-screenshots-00246869-1843-655f-f220-97299b865f6b)
> **Mac:** [Take a screenshots on your Mac](https://support.apple.com/en-us/HT201361)
3. **Cropped images**: Alternatively, **crop** a section of your product photo with a photo editing application (like Preview or Photoshop).
> **Windows:** [How to Crop Images on Windows](https://www.windowscentral.com/how-crop-image-windows-10)
> **Mac:** [How to crop an image in Preview on Mac](https://www.idownloadblog.com/2016/01/18/quickly-crop-image-preview-mac/)
4. Save your images as PNG files with a file name that matches the variant name. **File names must be in lowercase and use hyphens instead of spaces. Add image files for each store language matching the translated variant name.**
\
For all image files, use lowercase only (no capitals):
| Variant name | File name |
| ------------ | --------- |
| Gray | gray.png |
| Green | green.png |
\
For variants with multiple words, use hyphens **`-`** instead of spaces:
| Variant name | File name |
| ------------ | ---------------- |
| Sea Blue | sea-blue.png |
| Red and Blue | red-and-blue.png |
\
For multiple languages, add image files for each language with the translated names of the product variant:
| Language | Variant name | File name |
| -------- | ------------ | ----------- |
| English | Yellow | yellow\.png |
| German | Gelb | gelb.png |
| French | Jaune | jaune.png |
5. Once you have renamed your swatch images, go to **Content > Files** in your Shopify admin.
6. Click the **Upload files** button in the top-right corner and add all your swatch image files. You can select multiple files at once.
7. Go to Step two: **Set up your product variants**.
### 2. S**et up product variants**
***
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.
STEPS
In your **Shopify admin**:
1. Go to **Products** and click the product you want to edit.
2. Under **Variants**, click **Add options like size and color** checkbox if you're adding variants for the first time.
3. Add the **Option name** (e.g. "Color" or "Material").
> Remember to add this option name in your **Theme settings** to enable swatches.
> See Shopify's [Variants guide](https://help.shopify.com/en/manual/products/variants) for more information about product options.
4. Add the **Option values** (product variants) with a name that corresponds to the correct swatch image file.
> For example, if you've uploaded **`dark-blue.png`** as a swatch image, the product variant must be named **`Dark Blue`**.
> If your store uses multiple languages, add the translated variant names using [Shopify's Translate & Adapt](https://apps.shopify.com/translate-and-adapt) feature.
| Variant name | File names |
| ------------ | -------------------------------- |
| Green | yellow\.png, gelb.png, jaune.png |
| Sea blue | sea-blue.png |
| Red and blue | red-and-blue.png |
5. Preview your store to confirm that the swatches now appear.
> If the theme cannot locate a matching swatch image for a color variant, a *White* swatch is shown. In this case, make sure the file names match the variant name, use hyphens **`-`** instead of spaces, and are all lowercase (no capitals).
6. Click **Save**.
\\
***
> **Related links**\
> [Enable swatches](https://github.com/fluorescent/kb-spark/blob/main/product-pages/variant-options/variant-swatches/broken-reference/README.md)\
> [Use default color swatches](https://help.fluorescent.co/spark/product-pages/variant-options/variant-swatches/use-default-colors)\
> [Use custom colors](https://help.fluorescent.co/spark/product-pages/variant-options/variant-swatches/use-custom-colors)\
> [Show swatches on collection pages](https://help.fluorescent.co/spark/product-pages/variant-options/variant-swatches/show-on-product-cards)\
> [Enable dynamic option availability](https://help.fluorescent.co/spark/product-pages/variant-options/variant-swatches/dynamic-option-availability)