Swatch

Enter the product option name into the box "Option name" to show color swatch style for that option. Color swatch style is usually applied for Color option to show normal colors or get a custom image for special color or get product images for each variant from product admin. Follow this instruction for more detailed

Please note that for the basic color setup (use variant image), if the variant hasn't been set with any image, the swatch type will fall back to use variant's color name.

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Theme settings -> General -> Swatch.

Swatch

Setting	Description
Width	Determines the width of the swatch options.
Height	Determines the height of the swatch options.
Corner radius	Set the radius of the swatch's corners. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Color swatch

Setting	Description
Option Name	Enter the name of the option you want to display as a color swatch. Example: Color
Type	The type of the color swatch: Advanced color: use color names or images in PNG format. Metafields: Use color codes or images in PNG format from metafields. Follow this instruction for more detailed
Width	Determines the width of the color swatch.
Height	Determines the height of the color swatch.
Corner radius	Set the radius of the color swatch's corners. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).