How do I set up color swatches?

You can add color swatches to your product and collection pages using these settings found in Theme settings > Products.

You must also set Variant picker style to the Buttons style (not the Dropdowns style) for swatches to work. This can be adjusted in your product template settings.

How does it work?

Once you have enabled the color swatch settings, Streamline will look for any variant category with the name "Color" or "Colour"

The theme will then look at the variant names you've used (in this case Heather grey and Green) and look for either an HTML color name with the exact same name or a .png image file in your theme assets folder with a "handle-ized" version of your variant name.

For example:

  • Green becomes green.png (capitals become lowercase)
  • Heather grey becomes heather-grey.png (capitals become lowercase, spaces and other special characters becomes hyphens)


Note: .jpg files will not be shown, you must use .png


How does it look?


Where is the Theme Assets folder?

First, open up the code editor:

Then scroll down to Assets, open it, and click Add new asset and begin uploading your .png swatch files.

Why doesn't the color swatch update if I change the file?

We cache color swatch files so they load faster since they won't change often. But, this means they don't get updated right away if you change them.

Follow this guide to remove the caching and update your color swatch images.

Streamline support