Use custom images

Use custom images

Start your free trial
Start your free trial

General

Online store speed
Online store speed
Accessibility
Accessibility
Theme updates
Theme updates

Theme styles

Style presets
Style presets
Colors
Colors
Fonts
Fonts
Animation
Animation
Social media
Social media

Header

Announcement bar
Announcement bar
Mobile menu
Mobile menu
Search bar
Search bar

Sections

Products

Product listings
Product listings
Product badges
Product badges
Quick view
Quick view
Quick add
Quick add

Product page

Product template
Product template
Variant chips
Variant chips
Sticky add-to-cart bar
Sticky add-to-cart bar
Sibling product swatches
Sibling product swatches
Product recommendations
Product recommendations

Collection page

Collections template
Collections template
Banner
Banner
Product grid
Product grid
Filters and sorting
Filters and sorting

Cart

Quick cart
Quick cart
Cart page
Cart page
Added-to-cart popup
Added-to-cart popup
Cross sells
Cross sells
Free shipping bar
Free shipping bar
Low inventory warning
Low inventory warning

Pages

Templates
Templates
Home page
Home page
About page
About page
Blogs page
Blogs page
Blog post
Blog post
Collections list
Collections list
Contact page
Contact page
Password page
Password page
Search page
Search page
404 page
404 page

Support

Support policy
Support policy
Shopify vs Theme issues
Shopify vs Theme issues
Store access requests
Store access requests

Use custom images for swatches

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.

Step one: create 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.

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).

icon
STEPS

  1. You can create PNG image files by taking a screenshot (step 2) or cropping your product images (step 3).
  2. We recommend images with minimum length or width of 50px.
    image
  3. Screenshots: Use the built-in screenshot tool on your computer to capture swatches from your existing product images:
  4. Windows: How to use Windows Snipping Tool
    Mac: Take a screenshots on your Mac
  5. Cropped images: Alternatively, crop a section of your product photo with a photo editing application (like Preview or Photoshop).
  6. Windows: How to Crop Images on Windows
    Mac: How to crop an image in Preview on Mac
  7. Save your images as PNG files with a file name that matches the variant name. File names must be in lowercase and use hypens instead of spaces. Add image files for each store language matching the translated variant name.
  8. 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
  9. Once you have renamed your swatch images, go to Content > Files in your Shopify admin.
  10. image
  11. Click the Upload files button in the top-right corner and add all your swatch image files. You can select multiple files at once.
  12. image
  13. Go to Step two: Set up your product variants.

Step two: set 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.

icon
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. image
  4. Add the Option name (e.g. "Color" or "Material").
  5. Remember to add this option name in your Theme settings to enable swatches.
    See Shopify's Variants guide for more information about product options.
  6. Add the Option values (product variants) with a name that corresponds to the correct swatch image file.
  7. 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 feature.
    Variant name
    File names
    Green
    yellow.pnggelb.pngjaune.png
    Sea blue
    sea-blue.png
    Red and blue
    red-and-blue.png
  8. Preview your store to confirm that the swatches now appear.
  9. 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).
  10. Click Save.