# Configuring color swatches ## Configuring the variant name The "**Variant name**" is the field that determines the name applied to display the color swatch. ## How to customize color swatches for a product? {% embed url="" %} 1. From your Shopify admin, go to **Products**, and then find a product you want to edit. 2. In the **Variants** section, look at and remember what color variant you want to edit. For example, you want to customize the **Black** color for the product.

3. From our app, click **Settings.** 4. In the **Color Swatch** section, enter the **Variant Name** and paste the HEX Color Code in the **Color Configuration.** You can find a hex color in the link. [Click here](https://htmlcolors.com/google-color-picker) 5. Click **Save.** **Follow the format: \:\** **For example: Black: #780a02**

## How to use an image file to replace the color {% embed url="" %} 1. From your Shopify admin, go to "**Content**" and click **Files** where you can manage all files uploaded to your store 2. Click on the image, then copy the **URL handle**, and note the **image type** (.JPG or .PNG). For example, we want to use this image to replace the black color. The image URL is *image\_1,* and the image type is *JPG.*

3. From our app, click **Settings.** 4. Enter the variant name and paste the URL handle into the **Color Configuration** field **Follow the format**: **\:\.\**. **For example: Black: image\_1.jpg** {% hint style="danger" %} The image type only supports JPG and PNG. {% endhint %}

## How to customize the color and image swatches (if you are using Smind theme)? 1. In the Shopify editor sidebar, click **Theme Settings** gear icon. 2. From the **Variant Pills** section, enter the hex color code or paste the image URL to replace the color swatches.