Color swatches - Introduction
Color swatches are used to represent all available color variants of a product. This handy visual tool allows customers to compare colors, and easily switch between them, without leaving the product page.
Example:
Color swatches can be added using two methods:
For most stores, the automatic method is ideal - provided you know the Hex color. Overall, it takes less time and effort to set up color swatches this way.
The manual method requires more steps but allows for more flexibility. Firstly, you'll need to create .png files to represent your color swatches. Secondly, you'll have to add the files as assets to your theme's code.
Let's take a look at each method below.
Method 1: Automatically (using Hex colors)
When your color variant names or codes exactly match colors from the hexadecimal (Hex) range of colors, your theme will automatically pull the correct swatches onto your product pages.
This means that your variants must be labelled either:
- The exact name that matches a Hex color code (e.g. Navy)
- Or the Hex color code (e.g. #000080)
However, please be aware that the Hex codes will display on your store - which isn't always the most suitable choice for audiences.
Part 1. Setting up your variants correctly
As mentioned above, it's essential that variant colors are correctly set up on your product. To add your color variants:
Step 1: Within your Shopify admin settings, go to Products.
Step 2: Select the product you wish to enable your color swatches on.
Step 3: Scroll down to Variants, and ensure that the names of your variants exactly match either the color codes or the Hex color names.
Part 2. Enabling color swatches
To display your color swatches on your product page, you need to ensure Swatches is enabled. This is done via the Product page template:
Step 1: Within your Theme Editor, select a Product page template.
Step 2: Click the Options block within the Product section.
Step 3: Change your Variant style to Swatches.
Step 4: Save your changes. Your color swatches will now be visible on your product page!
Method 2: Manually (using .png files)
If you prefer to have more control over your color swatches, or you have mixed colors, you can upload your own swatches using the steps below:
Part 1. Format your color swatch file
In order to successfully upload your own color swatches, your files must follow some rules. Use the steps below as a guide:
Step 1: Create an image that is 100x100 pixels in size to ensure an even aspect ratio.
Step 2: Ensure that your file is in .png format.
Step 3: Name your file the exact same title as the name of your variant, but replace spaces with hyphens (-).
Step 4: Remove all capital letters from your file name.
-
If your color is called ‘Sky Blue’, name your image
sky-blue.png -
If your color is ‘Blue/Gray’, name your image
blue-gray.png -
If your color is ‘Black’, name your image
black.png
Part 2. Add your variant to your product
Use the steps outlined in Method 1 to add your variant and ensure swatches are enabled on your product template. However, because you're adding a custom swatch, you won't need to use a Hex color name or code. You can label your variant whatever you want. E.g. Sky Blue.
Part 3. Go to your Theme's code files
Step 1: Within your Shopify admin dashboard, go to your Online Store and click Themes.
Step 2: Locate the theme version you use.
Step 3: Click the button containing three dots and select Edit code.
Part 4. Upload your color swatch file as an asset
Finally, you can upload your desired color swatches to your theme's code:
Step 1: Within your theme's code, scroll down to Assets.
Step 2: Select Add a new asset.
Step 3: Click Add file and choose the swatch file you wish to upload.
Step 4: Click Done when you're finished. Your color swatches will then be displayed on your product page!