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

Swatches

Color swatches are tiny, clickable buttons on your products. Each swatch links to one of your color variants.

Swatches on product page
Swatches on product page

Here's how Spark's color swatches feature works:

  1. It looks for all products with a special variant option for swatches.
  2. It tries to match the defined color (like Heather Gray) with an existing swatch image in your Files admin area (called heather-gray.png).
  3. It displays the swatch images as color swatch buttons.

This article goes deeper into what all of that means, and how you can add any swatch that you want.

Set up a variant option name

Setting color swatches up requires some setup and planning. Follow the steps here for success:

  1. Before anything else, you need to choose which variant option name should be associated with swatches. If you don't change the name now, the default name will be used. The default name is Color.

    We recommend using a keyword that describes the swatches. For example, if all of your color swatches are colors, use Color. If all your color swatches are materials, use Material or Texture.

  2. From your Customize theme editor, go to your Theme settings and select the Product section.

  3. Change the Option for swatches name to the option you wish to display as swatches.

  4. Use the Save button in the top-right corner when you are finished editing.

Create swatch thumbnails

  1. For each color variant you sell, you need a PNG image. We recommend a square, 50 pixel by 50 pixel image, but any small image filled with the color will do.

    Create color swatches, step 1
    Create color swatches, step 1
  2. You can use your Windows or macOS device's built-in screenshot tool to quickly capture swatches from your existing product images:

    Windows: How to use Windows Snipping Tool

    macOS: Take a screenshot on your Mac

  3. If you know how to crop photos using a photo editing application (like Photoshop), you could also create swatches directly from your product images and save them as PNGs.

  4. Rename your swatch images

    Now that you have all of the swatch images you need, you need to rename them to match your color variant names.

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

    Note: all swatch filenames must be in lowercase. If capital letters are included in the filename, the swatch image may not load properly.

    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
    Grayheather-gray.png

    Here's some more examples just to be clear:

    Color variantSwatch filename
    Grayheather-gray.png
    Argyleargyle.png
    Harris Tweedharris-tweed.png

    So, whether you're referencing the color of a fabric, a plastic, a metal – or even the texture and color of a product – you could potentially make swatches for it.

  5. Upload your swatches to Shopify

    Now that you have all of the swatch renamed and ready for upload, head to your Files admin area

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

    Once you've uploaded all of the swatches, you're ready for the next step.

Add color variants to your products

  1. The swatches are almost ready to be used. The next step is making sure that any products you want color swatches to appear on have a variant option type that matches the special variant option name you set up earlier. (If you didn't set it up, the default name is Color.)

    For more information about creating and editing product variants, see Shopify's Variants documentation.

    If you're creating variants on a product for the first time, you should end up with something that looks like this in your product editor, when you scroll down to the Variants section:

    Variants, first-time configuration
    Variants, first-time configuration
  2. Edit each variant individually and assign a correctly colored product image for each one.

    If you already have color variants set up, ensure that the color names will match one of the swatches that you uploaded.

    Variants, already configured
    Variants, already configured

    Warning: if the theme cannot locate a matching swatch image for a color variant, a swatch is still shown. The color of the swatch is just White. Make sure you have all your swatch images uploaded before you enable the swatch setting.

  3. Don't forget to Save the product after editing.

Enable the "Show color swatches" setting

Now that you've set up your products to use color swatches, the last step is to enable the color swatches feature in Spark's theme settings.

The following instructions are for the product page, but also apply to the featured product homepage section and the Collection page.

  1. From your Customize theme editor, choose Products from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Choose the Product pages section of the settings.

  3. Locate the Show swatches checkbox and check it.

  4. Use the Save button in the top-right corner when you are finished editing.

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.