You can use color swatches to replace the default variant color name pills, adding visual appeal and making the color variant selection for your products more engaging.

Note: for color swatches to work make sure that the “Pills” option is selected in the “Variant Picker” block. It won’t work with the “Dropdown” option selected.

Color swatches are easily set in “Theme Settings->Color Swatches”.

Before you tick the “Enable Color Swatches” checkbox make sure to set up all the colors you use for your product variants in the “Colors” text area.  

You can add one color per row and you need to use this format: Color: #hexvalue, i.e. for black color it would be: Black: #000000. You can find color HEX values here.

You can also add an image instead of a color. This can come in handy when your product features a pattern. Make sure that you have your image(s) uploaded to the “Content->Files” section in your Shopify admin.

In this case, instead of the color HEX value you would add a handle ( name ) and the extension of your image i.e. pattern.png. The format needs to be the same as for colors: Color: image.png. You can also use “jpg” images but make sure to enter that extension.