Shopify Color Swatches: How to Make and Use Them
What are color swatches?
Color swatches are visual representations of the color, pattern or texture of a product being sold on an e-commerce website. They're shown as small circles or squares that can be selected to choose the color that should be added to cart. Often when the swatch option is selected by the customer, the product image will also change to show the selected option (provided that the store owner has added these images).
Color swatches are a great way to visually present color or pattern options to customers. Swatches can be as simple as a single color to patterns and all the way mini versions of the entire product. They can even be used to show fabric textures so that customers clearly understand what they're getting. This helps customers make the right choice, and improves customer satisfaction (reducing the number of returns!)
Take a look below at a few ways that color swatches can look. These examples are from Our Place, Outdoor Voices, American Eagle and Dakine.
This tutorial will show you how to create color swatches for a Shopify website. This assumes that the theme already includes a color swatch feature.
How do color swatches work?
Once you've turned on the swatch feature in the theme settings, you may be confused why some swatches are completely blank, and why your "Chocolate" colored variant is showing a burnt orange color, rather than the brown that you were expecting. Without custom color swatches, the browser only knows certain CSS color names. See those colors here. Apart from black, white and a few others, these color names are likely not accurate for the products being sold, and that's why you need to create unique color swatches.
The way it works on Shopify is that any variant with the color name "blue" will show the same blue color swatch. You'll need to be careful about naming color variants because of this. For example, if you have two different blues, you'll need to name the variants differently. You can add more descriptive words like "sky blue", "blue knit", "soft blue" to distinguish different blues between products.
How to create color swatches
Before starting the tutorial, make sure to add all the store's products and variants, ensuring that Option Name is "Color" / "Colour" and Option Value is the color name.
1. Search your theme developer's documentation for any specific instructions they have about using color swatches. Each theme has different specifications but the instructions below are general and should work for any theme. Just search for "theme name" "theme color swatches".
2. Open your favorite design tool and create as many artboards as color swatches are needed. The artboards should be the size recommended by the theme documentation. If there is no size or documentation provided, 100px x 100px is a good size, or use a minimum of 50px x 50px. I make my swatches on Adobe XD because it's easy to use and export several files at once.
3. Name your artboards the variant color name. Naming rules:
- Use all lowercase letters
- Replace spaces or symbols with a dash "-"
For example, "Blue/Green" becomes "blue-green". "Luna's Purple" becomes "luna-s-purple".
4. Add the colors to each swatch. There are two ways of doing this:
- Use a color code: Add an image of the item to the document. Use the eyedropper tool to select a color from the image. Fill the artboard with that plain color.
- Use an image: Place an image of the product onto the artboard (as seen below) and scale the image to show the pattern or texture wanted. Remember that these swatches will be shown very small.
- BONUS: Use an image of the entire product (like the Dakine backpack example above). This may require you to change the swatch size in the theme code so that full swatch is showing.
Below you can see a mix of the two methods above. For example, I used the white t-shirt image rather than a plain white square to show that the material is a little sheer and I used a solid fill for the entire second row. I also added a black-filled polygon for the White/Black color.
5. Export the images as .png files. I do this by selecting all the artboards and saving at once to the project folder.
6. Add the swatches to Shopify. Here's the main difference between themes. The theme will use one of two methods:
- On the Shopify dashboard go to Settings > Files > Upload files. Bulk upload all the swatches here.
- On the Shopify dashboard go to Online Store > Themes > Actions > Edit Code. Scroll down to the Assets folder. Under the Assets heading, click Add a new asset, and upload the swatches one by one.
You'll need to look at your theme's documentation to see which method to use.
7. Test! Check if your custom color swatches are working. If not, double-check that your swatch name exactly matches the variant name, that they're in lowercase letters, all spaces and symbols have been replaced with a dash, and that they're .png files at least 50x50px in size.
Note: If the product type option isn't called "Color" or "Colour" because the store language is not in English, then you'll need to make some changes in the theme code.
Theme Documentation
In case you weren't able to find your theme's documentation on this topic, I've listed a few references here:
If you found this helpful, you might like to check out our Shopify Store Launch Kit.
Hana Drdla
