> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/guides/configuring-color-swatches.md).

# 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="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FeQu15xaBnxo2BjeABohe%2FColor%20Swatches.mp4?alt=media&token=59e20873-852d-49bd-ada5-f2351144d364>" %}

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.

<figure><img src="/files/DWOgBrONAS3zJOHiL3OH" alt=""><figcaption><p>Get the variant name</p></figcaption></figure>

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: \<name>:\<color>**

**For example: Black: #780a02**&#x20;

<figure><img src="/files/prz6sn9CjcM1DanxR2kg" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/c2qXfHA1dwoJW7dmJSmD" alt=""><figcaption></figcaption></figure>

## How to use an image file to replace the color

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F32GM3skseTTUeTu0W345%2FImage%20Swatches.mp4?alt=media&token=27d34d54-a176-44a1-a9a0-48861cf227ac>" %}

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.*

<figure><img src="/files/Rp3kWQTT4HkThsCJmuRd" alt=""><figcaption></figcaption></figure>

3. From our app, click **Settings.**&#x20;
4. Enter the variant name and paste the URL handle into the **Color Configuration** field&#x20;

**Follow the format**: **\<name>:\<URL handle>.\<image type>**.&#x20;

**For example: Black: image\_1.jpg**

{% hint style="danger" %}
The image type only supports JPG and PNG.
{% endhint %}

<figure><img src="/files/RSQqvaOrhXoUCnxW5S34" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/K8X4CxY68dKiJgyHNjjC" alt=""><figcaption></figcaption></figure>

## 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.

<figure><img src="/files/dPzqyzkDSe0gQG3Bz8EO" alt=""><figcaption></figcaption></figure>