Articles in this section

See more

Flex Guide: Swatches

  • Last updated:
  • Updated
Follow

Supported Versions

The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.

 

In This Article

 

Using Color Swatches

The Flex theme includes the product form setting to have your variant options 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.

To enable 'color swatches', head into Customize (your Theme Editor) > Theme settings > Product Form, here you can change the "Options style" to "Colors swatches".

By default, depending on the name of your color variant title, your color swatch will take on a HTML color. If you wish to select this color, please write it exactly how it appears on this list Color Names

However, it's possible to upload custom color swatches to be the exact material color as the product. To do this, you can create a small 50x50 section of your product that will be used for the swatch image. Note however that the image must be named after the color option, but be "handleized" with hyphens replacing any spaces or odd characters, be in all lowercase letters and have a .png extension.

 

Color Swatch Naming Conventions

When adding color swatch variants to your product page you will need to follow the following naming conventions:

Formatting

When uploading an image asset to use as a color swatch, please take note of spacing and formatting.

  • For one work titles, the approach is fairly easy. If your color is Black, the name your image black.png. Note how the filename is all lowercase, but this is the only difference.
  • By default, your color variant will look for a matching asset with the same filename, excluding spaces and using dashes instead. If your color swatch variant is named Dark Blue, this will look for a file called dark-blue.png in your assets folder.
  • Slashes are replaced with hyphens. For example, if your color is Blue/Gray, then name your image blue-gray.png. Note that the forward slash has been replaced with a hyphen.
  • If you have a hyphen in your color name, such as Blue-Gray, it remains a hyphen, so the filename would be blue-gray.png.
  • If you have extra spaces in your filename in combination with a hyphen, such as Blue - Gray, the spaces and hyphen become a single hyphen — so you'd want to name your file blue-gray.png again in this case.
  • For non-standard characters or formatting, you will need to experiment with how color names become formatted.
  • You may potentially experience a "flash" of the HTML color before your custom color swatch loads. If you have custom PNG files for variants that end of HTML color names, the issue is more noticeable, however, this is an edge-case situation. 
 

Adding Color Swatch Files

To add color swatch files, you'll need to upload them in 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. 

files-admin-page.png

 

Color Swatch Troubleshooting

If your swatches aren't appearing, here's a quick troubleshooting list:

  • Be sure you are saving your image files with a .png extension in all lowercase letters and not .jpg or other format.
  • Be sure you are uploading the image files under Settings > Files.
  • Be sure you have used all lowercase letters in your file names and replaced any accented characters with the standard letter and any spaces or special characters with hyphens.
  • Be sure your image is at least 50x50 pixels.
  • Be sure you have the swatches setting enabled.
  • If your product option is not titled "Color" or "Colour" (may be the case if your site is not in English), you will need to make a minor edit to the product__swatch.liquid file (online store > themes > actions > edit code > snippets). Locate this code:  
     {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
    and change it to be: 
     {% if downcased_option contains 'your-option-title' %}
    where you enter your option title instead, for example, 'couleur' or 'farbe' etc. 

Related articles