Our theme provides an option to display color & image swatches instead of plain text. It helps to make the variants choice more interactive. Also allows the users to understand the buying options within less span of time.

Setup products with variants

At first, you must have products with variants & options to avail this swatches. You can simply create products from Shopify admin. In each products, you can see the controls to enable options & variants.

1. Go to Products in Shopify admin and click on product.
2. Under the Variants section, you can see the option to Add options like size or colors
3. Now you can fill Option name & Option values.

Creating custom images for swatches

If you want to use png image instead of color codes. you can follow below steps.

1. Prepare images to display as swatch in each product (In PNG format).
2. Make sure that they named exactly same as the option values which you want to replace with this png. For ex. olive.png keep the filename in small case.
3. Once you’ve created all images, go to Content > Files in your Shopify admin.
4. Then click Upload files and upload all your images.

Setup in Theme settings

Setup swatches with Color codes

You can create & assign swatches from Theme settings for the Options you’ve created in products. You can go to Theme settings from the left side icons panel inside your Customizer

1. Go to Theme settings and click Product
2. Now you can enter Option name at Option name for swatches, if you want to use the swatch for multiple Options, you can simply split the Option names with comma (,). For ex. Color, Metal
3. Then you can add the respective key pairs at Option values. For ex. Olive: #50462B, Maroon: #69232D.

Theme also supports Basic named colors for displaying colors, if there is no equivalent Option values is found at Theme settings.

Setup swatches with Custom images

You can follow the similar steps to display custom images as swatches.

Tip: For displaying image as swatch, you need to enter the exact file name of the image, which can be seen inside Content > Files in your Shopify admin. So you can open files in separate tab for reference.

1. Go to Theme settings and click Product
2. Then enter Option name at Option name for swatches, if you want to use the swatch for multiple Options, you can simply split the Option names with comma (,). For ex. Color, Metal
3. Once you got all the file names, you can add the respective key pairs at Option values. For ex. Olive: olive.png, Maroon: maroon.png.

You can combine the color codes key pairs with custom images key pairs to display both swatches.

Add Variant picker in Product page

To add variant picker Product summary -> Add block and choose Variant picker

You can go to Product summary section under Product template from the top dropdown inside your customizer