Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Swatches

Context can display your product variants as a sleek row of circular color Swatches in place of the default dropdown list. These swatches work as buttons that can be linked to your variant product images that will appear when selected. You can also display swatches on collection pages when a customer hovers over them.

Swatches on product page
Swatches on product page

There are two ways to set up your swatches. You can choose to use 140 default colors for your swatches or upload custom swatch images that perfectly match your product colors.

Jump to the section for your preferred way to set up swatches:

Set up swatches using default colors

Ira automatically displays color swatches for variants with the same name as one of these 140 default colors. Adding default swatch colors involves two steps: (1) Add variants with default colors and (2) Set the option name for your swatches

Example of swatches with default colors

These color names will display as your product variant names in the cart. If you want a different variant name, or different color, you will need to upload custom swatch images.

Step one: add variants with default colors

Here's how to set up your product variants to display swatches with default colors:

  1. From your Shopify Admin, go to the product you wish to add color swatches.

  2. Scroll down to find the Options section. Check the This product has options checkbox if you're adding variants for the first time.

    Variants section with color variants
    Variants section with color variants

    For more information about variants, see Shopify's Variants documentation.

  3. Add the Option name (e.g. "Color) and Option values (or Variants) with the exact name of one of the 140 default colors.

    Example of variants with default color names
    Example of variants with default color names
  4. Click Done.

  5. (Optional.) Click the image icon to select a variant image that will appear when the swatch is selected.

    Select variant image button
    Select variant image button
  6. Remember to click Save.

  7. Go to the next section to Set up the option name for your swatches.

Step two: set the option name for your swatches

To enable swatches for a product option, you will need to add that option name in your theme editor.

Here's how to add the option name to enable swatches:

  1. In your theme editor (Customize), go to your Theme settings and open the Product section.

    Theme settings tab in editor panel
    Theme settings tab in editor panel
  2. Add the exact name of the product option (e.g. "Colors") to the Option for swatches field.

    Variant option field in theme settings
    Variant option field in theme settings
  3. To enable swatches for multiple product options, add each option name separated by commas.

    Example of multiple variant options in theme settings
    Example of multiple variant options in theme settings
  4. Remember to click Save.

Step three: enable swatches in product template

Once you've added product variants, uploaded swatch image files, and set the option name, you can now enable the swatches on the product page.

In the theme editor (Customize):

  1. Open the Product template you wish to edit.

  2. Open the Product overview section in the editor panel and click on Variant selectors.

    Variant selectors block under Product overview
  3. Check the Show swatches option.

  4. Remember to click Save.

Set up swatches using custom images

Custom swatch images work by matching your product variant names with the image file names of the swatches you upload to your Shopify Files.

Adding custom swatches images involves four broad steps:

Step one: create and upload custom swatch images

For each product variant, you will need a PNG image with a file name that matches the variant name in your Product settings.

Here's how to create and upload your swatch images:

  1. Create a PNG image file by taking a screenshot (step 2) or cropping your product images (step 3).

    We recommend a square, 50 pixel by 50 pixel image, but any small image filled with the color will do.

    Square swatch image example
    Square swatch image example
  2. Use the built-in screenshot tool on your computer to capture swatches from your existing product images:

    Windows: How to use Windows Snipping Tool

    Mac: Take a screenshots on your Mac

  3. Alternatively, crop a square image your product photo with a photo editing application (like Preview or Photoshop).

    Windows: How to Crop Images on Windows

    Mac: How to crop an image in Preview on Mac

  4. Once you have the swatch images saved as PNG files, you need to rename them to match the color variant names that you want.

    For example, if you have a color variant called Gray, you should have a matching swatch called gray.png.

    Color variantSwatch filename
    Graygray.png

    For colors or patterns with with multiple words, like Heather Gray, your swatch should be called heather-gray.png, where hyphens replace the spaces.

    Color variantSwatch filename
    Heather Grayheather-gray.png

    Here's some more examples just to be clear:

    Color variantSwatch filename
    Heather Grayheather-gray.png
    Argyleargyle.png
    Harris Tweedharris-tweed.png
> Note: all swatch filenames must be in lowercase. If capital letters are included in the filename, the swatch image may not load properly.
  1. Once you have renamed your swatch images, head to your Files admin area

  2. Click the Upload files button in the top-right corner and add all the swatch files. You can select multiple files at once.

    Shopify Files dashboard
  3. Scroll to the next section to Set up your product variants.

Step two: set up your product variants

Once you've uploaded your images, you will need to configure your product variants with names that correspond to your image file names.

Here's how to add variants that match with your swatch image files:

  1. From your Shopify Admin, go to the product you wish to add color swatches.

  2. Scroll down to find the Options section. Check the This product has options checkbox if you're adding variants for the first time.

    Variants section with color variants
    Variants section with color variants

    For more information about variants, see Shopify's Variants documentation.

  3. Add a variant with the 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 name will need to be Dark Blue.

    Here are some examples as provided above:

    Color variantSwatch filename
    Heather Grayheather-gray.png
    Argyleargyle.png
    Harris Tweedharris-tweed.png
  4. (Optional.) Click the image icon to select a variant image that will appear when the swatch is selected.

    Select variant image button
    Select variant image button
  5. Remember to click Save.

  6. Go to the next section to Set the option name for your swatches.

Step three: set the option name for your swatches

To enable swatches for a product option, you will need to add that option name in your theme editor.

Here's how to add the option name to enable swatches:

  1. In your theme editor (Customize), go to your Theme settings and open the Product section.

    Theme settings tab in editor panel
    Theme settings tab in editor panel
  2. Add the exact name of the product option (e.g. "Colors") to the Option for swatches field.

    Variant option field in theme settings
    Variant option field in theme settings
  3. To enable swatches for multiple product options, add each option name separated by commas.

    Example of multiple variant options in theme settings
    Example of multiple variant options in theme settings
  4. Remember to click Save.

Step four: enable swatches in product template

Once you've added product variants, uploaded swatch image files, and set the option name, you can now enable the swatches on the product page.

In the theme editor (Customize):

  1. Open the Product template you wish to edit.

  2. Open the Product overview section in the editor panel and click on Variant selectors.

    Variant selectors block under Product overview
  3. Check the Show swatches option.

  4. Remember to click Save.

Show swatches on collection pages

Now that you've set up swatches for your product variants, you can choose to display them on collection pages. Your swatches will appear when a customer hovers over the product cards.

In the theme editor (Customize):

  1. Use the Templates selector to open the Collections template.

  2. Click on the Collection product grid section to open the settings.

  3. Under Collection, check the Show swatches option to reveal product options on hover.

  4. Remember to click Save.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.