We've recently relaunched all three of our themes. Watch the launch video here.

Swatches

Spark 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 to appear when selected. You can also choose to display swatches across your site whenever a customer hovers over a product card.

Product swatches example
Product swatches example

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 about your preferred way to set up swatches below:

Set up swatches using default colors

Spark automatically displays color swatches for variants with the same name as one of these 140 default colors. Note that these exact color names will display as your product variant names in your cart.

Adding default swatch colors involves two broad steps: (1) Add variants with default colors and (2) Set up the option name for your swatches

If you want a different variant name, or different color, you will need to upload custom swatch images.

Example of swatches with default colors
Example of swatches with default colors
Example of variants with default color names
Example of variants with default color names

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 Variants section. Check the This product has multiple 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 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. (Optional.) Click the image icon to link your product images to each variant so they will appear the swatch is selected.

    Variants with product images added
    Variants with product images added
  5. Remember to click Save in the top-right corner.

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

Set up the option name for your swatches

By default, swatches are enabled for variants with the option name Material. Variants with the option name Material will appear as swatches by default. To enable swatches for another option, you will need to add that option name in your theme editor.

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

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

  2. Replace the Variant option for swatches with the exact name of the option you wish to display as swatches.

    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 in the top-right corner.

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. For each product variant, you will need to create a square PNG image with a file name that matches the variant name in your Product settings.

Adding custom swatches images involves three broad steps: (1) Create and upload your custom swatch images, (2) Set up your product variants, (3) Set up the option name for your swatches.

Create and upload your 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.

  5. Once you have renamed your swatch images, head to your Files admin area

  6. 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
  7. Scroll to the next section to Set up your product variants.

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 Products and select the product you wish to add color swatches.

  2. Scroll down to find the Variants section. Check the This product has multiple 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 link your product images to each variant so they will appear the swatch is selected.

    Variants with product images added
  5. Remember to click Save in the top-right corner.

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

Set up the option name for your swatches

By default, swatches are enabled for variants with the option name Color (or Colour). If you don't need to change the option name, scroll down to the section about how to configure your product variants.

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

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

  2. Replace the Variant option for swatches with the name of the option you wish to display as swatches.

    Variant option field in theme settings
    Variant option field in theme settings

    Note that you will need use this exact option name for your product variants. We recommend using a keyword that describes the swatches. For example, if all your swatches are materials, use Material or Texture.

  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 in the top-right corner.

  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 name and variant name match.

Show swatches on products across your site

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

Swatches revealed on product card
Swatches revealed on product card
  1. In your theme editor (Customize), go to Theme Settings at the bottom of your navigation panel.

    Theme settings tab in navigation panel
    Theme settings tab in navigation panel
  2. Click the Products tab.

  3. Check the Show swatches and chips option to reveal product options on hover.

    Show swatches and chips setting
    Show swatches and chips setting
  4. Remember to click Save in the top-right corner.

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.