Automatic Method (With HEX Color Codes)
Step 1: Set Up Your Variants Correctly
When your variant names exactly match colors from the HEX range of color names, the theme will automatically pull these swatches onto your product pages.
This means that your variants must be named either:
- A HEX color code (e.g. '#35608A')
- The exact name that matches a HEX color code (e.g. 'Deja Vu Blue')
To edit your variants:
- Within your Shopify admin settings, go to Products.
- Select the product you wish to enable your color swatches on.
- Scroll down to Variants, and ensure that the names of your variants exactly match either the color codes or the HEX color names.
Example A
Example B
Step 2: Enable Color Swatches
When your color swatch settings have been left blank, your color swatches will not appear on your product page.
To pull the colors that you have referenced within your Variants settings over to swatches on your product page, edit your product theme settings.
- Within your theme editor, select the Product page.
- Find the Product section on this page.
- Click on the Product options block.
- Change your Product variant style to Swatches.
Your color swatches will now be visible on your product page.
Manual Method (With .png Files)
Step 1: Enter Your Code's Theme Files
- Within your Shopify admin settings, go to Online Store > Themes.
- Select your Flow theme version.
- Within the Actions drop-down menu, select Edit code.
Step 2: Format Your Color Swatch File
In order to successfully upload your own color swatches, the file must have a handleized name which reflect the color it represents.
- Use an image that is 100 x 100px to ensure an even aspect ratio.
- Ensure that your file is in a .png format.
- Name your file the exact same title as the name of your variant, but replace spaces with hyphens.
- Remove all capital letters from your file name.
-
If your color is called ‘Déjà Vu Blue’, name your image
deja-vu-blue.png
. -
If your color is ‘Blue/Gray’, name your image
blue-gray.png
. -
If your color is ‘Black’, name your image
black.png.
Step 3: Upload Your Color Swatch File as an Asset
You can upload your desired color swatches in a .png format.
- Within your theme's code, scroll down to Assets.
- Select Add a new asset.
- Select Choose file, and choose the swatch file you wish to upload.
- Select Upload asset.
Your color swatches will then be displayed on your product page.