We have updated our themes to support category metafield color swatches in Sept 2024 however the theme does continue to support the following methods:
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.
Tip: For a list of Hex color names and codes, click here.
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.
For example:
If your color is called ‘Sky Blue’, name your image
sky-blue.pngIf your color is ‘Blue/Gray’, name your image
blue-gray.pngIf 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!