Color swatches are thumbnail images used to represent particular colors, patterns, etc. for product variants. Swatches are available as a variant display option for the product page, as well as the product grid and tag filters on the collection page.
Activate swatches for Turbo, Retina, Flex, Responsive, Parallax, Artisan, and Mobilia.
Align your variant titles with the standard colors or replace colors by customizing swatch colors and images. 
Turbo
- Open theme editor (Customize)
- Open Theme settings
- Open PRODUCTS
- Adjust the Option style to Selectable boxes
- Save
To activate color swatches for collection pages, enable Show color swatches in the Product grid portion of the Theme settings
Retina
Enable and customize color swatches by adjusting the Products portion of the Theme settings.
- Open theme editor (Customize)
- Open Theme settings
- Open PRODUCTS
- Enable Show color swatches
- Save
Flex
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
Responsive, Parallax, Artisan, and Mobilia
Select the variant style
In the Product grid portion of the Theme settings, activate swatches by clicking Color swatches below Options style.
Collection page
To enable color swatches on collection pages, click to enable the Show color swatches setting below Collections and search results.
This will display the color swatches below product thumbnail images on collections and search results.