The Flex theme includes a product form setting for variant options to display as color swatches. This will change any variant option titled "Color" or "Colour" to use swatches. Any other product option will be displayed in box options, which behave similarly to radio buttons.
Enable Color Swatches in Theme Settings
Enable color swatches by adjusting the Product form portion of the Theme settings.
- Open theme editor (Customize)
- Open Theme settings
- Open PRODUCT FORM
- Enable Show color swatches
- Save
Swatch Style
Have your swatches appear in a circular or square-shaped container by selecting Rounded or Squared with the Swatch style setting.
Color Option Style
Select either Color swatch or Variant image from the Color option style dropdown.
Use Color swatch to draw color swatches from the standard set of colors (or added custom colors).
Alternatively, use Variant image to replace the swatch with a small version of that variant's image. If no image is assigned to a variant, the swatch will display the default color.
Adding Color Swatch Files
If standard swatch colors are insufficient, missing, or inaccurate, consider replacing them with your own custom color images.
Gather the color image
Capture or edit a product image to produce a square sample of the variant's color, pattern, etc. For this example, we are cropping a clothing product image to replace a color for the Pacific Print variant.
Crop or resize the image to 50 x 50px or larger.
Format the filename to match variant
The image must be named after the color option in lowercase and formatted as a PNG.
pacific-print.png
Use hyphens for spaces and special characters (e.g. macaw-blue for Macaw Blue or freddie-s-fusion for Freddie's Fusion).
If you have different variants with the same name but need separate images (for example, if "blue" in one product isn't the same shade as "blue" in another), you will need to adjust the variant names, as the theme will connect with the same 'blue' image.
You might want to, for example, call one blue 'Royal Blue' and another 'Navy Blue'. Another option is to include the product line or material type in the color name. For example, Blue Leather, Metallic Blue, Blue Shirt Fabric, or Blue Cotton.
For one-word names, the formatting is the most straightforward:
If the color is Black, then name your image black.png
For multiple-word names, use hyphens to separate each word:
If your color is named Dark Blue, name the image dark-blue.png.
Like spaces, slashes and most other special characters are replaced with hyphens:
If your color is Blue/Gray, then name your image blue-gray.png.
Upload to Files admin
To add color swatch files, you'll need to upload them to the Files page in the Shopify admin. From your Shopify Admin, head into Settings > Files.
On the Files page, click the Upload Image button to upload your color swatch files.
Troubleshooting Swatches
If your product option is not titled "Color" (e.g. site uses Canadian spelling), consider making the following theme file adjustments.
- In the Themes area of your Online Store, select Actions beside your Flex theme
- Select Edit code
- Open the Snippets folder
- Open product__form.liquid
- Locate this code:
{% if option_name == swatches_option_trigger %}
- Adjust to:
{% if option_name == swatches_option_trigger or option_name == 'colour' %} - Open options-radios.liquid
- Locate this code:
{% if show_swatches and downcased_option contains 'color' or downcased_option contains 'colour' %} - Adjust to:
{% if show_swatches and downcased_option contains 'color' or downcased_option contains 'colour' or downcased_option contains ‘strap’%} - Open product-thumbnail__swatch.liquid
- Locate this code:
{% if downcased_option contains 'color' or downcased_option contains 'colour' %} - Adjust to:
{% if downcased_option contains 'color' or downcased_option contains 'colour' or downcased_option contains ‘strap’%}