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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.smind.io/guides/configuring-color-swatches.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.