In Avante, color variants can be displayed as Variant images or **Color swatches.**

Variant images

1. In the Theme editor, go to Theme settings → Variant selector, scroll to Variant image and enter the Option name in the Variant label field.
2. If needed, add shadow, change the image ratio, focal point, or corner radius.

Result

If you want to find out how to display only media related to the chosen variant, you can learn more here.

Color swatches

In the theme editor, go to Theme settings → Variant selector, scroll to Color pills and enter the Option name in the Variant label field.

Custom color

Sometimes, a color might not automatically display because its name doesn't match an HTML naming, or the displayed color doesn't match the product's shade.

In such cases, you can upload your own color:

1. Prepare your color images as PNG files with names matching the designated product colors. For instance, if you've labeled a color option as Red, ensure the image file is named red.png. If you have an option labeled as Ocean blue, the image should also have the ocean_blue.png name. For these images, we recommend a resolution of 60x60px and the smallest possible file size, preferably below 20kb.
2. Open ‘Shopify admin’ → ‘Content’ → ‘Files’ and upload the prepared images.
3. Once you've done this, the images will be automatically linked to your respective products.