> For the complete documentation index, see [llms.txt](https://shoppad.gitbook.io/infinite-options/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppad.gitbook.io/infinite-options/inputs-and-field-settings/create-swatches.md).

# Create Color and Image Swatches

### Overview

Swatches let customers choose an option by selecting a color or image instead of reading a text label.

They're a great choice for products available in different colors, patterns, materials, finishes, flavors, or other visual customizations

***

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2F8FcItdydR1njSDoWkGt2%2FScreenshot%202026-07-03%20at%208.09.27%E2%80%AFAM.png?alt=media&amp;token=64f32e49-122d-4e43-ab75-205be5642385" alt=""><figcaption></figcaption></figure>

### Step 1: Create a Swatch Option

Open an existing Option Set or create a new one.

Add a new option and select **Swatches** as the input type.

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FtYuNZEUQO5SchCpQXHFd%2FAdding%20Custom%20Color%20Swatch%20Options%20in%20Shopify%20Customizery%20-%20Step%200.jpeg?alt=media&amp;token=8219e6b7-120e-42c8-ab1d-d223e4a3ff6d" alt=""><figcaption></figcaption></figure>

***

### Step 2: Add Your Option Values

Enter the values you want customers to choose from.

For example:

* Red
* Blue
* Green

Each value can have its own color or image.

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FR7VAV5JZMOgbuNnQylnQ%2FAdding%20Custom%20Color%20Swatch%20Options%20in%20Shopify%20Customizery%20-%20Step%2021.jpeg?alt=media&amp;token=52ea5913-f851-425a-b659-7ad38a9bd681" alt=""><figcaption></figcaption></figure>

***

### Step 3: Add a Color or Image

Next to each option value, click the **swatch** icon.

Choose one of the following:

#### Color

Select a color using the color picker or enter a HEX color value.

Example: `#FFFFFF`

Click **Save** to apply the color.

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FyWZKV44EQ8XtCu2dOsCu%2FAdding%20Custom%20Color%20Swatch%20Options%20in%20Shopify%20Customizery%20-%20Step%2022.jpeg?alt=media&amp;token=04452d43-0def-401c-ad2a-817ad686b8eb" alt=""><figcaption></figcaption></figure>

***

#### Image

Upload an image to represent the option.

For best results:

* Use square images.
* Keep images under **1 MB**.
* GIF images aren't supported.

Click **Save** to apply the image.

#### Style Your Swatches

Under the Styling section of the option editor, you can set:

* **Layout** — Inline or Stacked
* **Swatch shape** — Square, Rounded, or Circle
* **Collapse into a dropdown** — turns the swatch list into a dropdown once there are many values. The label stays above the control, and the dropdown summary shows the shopper's current selection.
* **Show value name as a tooltip** — displays each value's name on hover
* **Zoom swatch on hover** — enlarges a swatch when a shopper hovers over it
* **Class name** — for custom CSS targeting

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FEM0JYH7YXisNHwspPVf6%2FSwatch%20option.jpeg?alt=media&amp;token=ecf0a059-2407-43f6-9fda-71231a8bcabb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Looking for the older custom-CSS layout snippets (large swatches, round swatches, column layouts)? Many of those are now available as built-in styling options above!
{% endhint %}

***

### Step 4: Save Your Option Set

Click **Save** in Infinite Options.

Your swatches will now appear on every product assigned to the Option Set.

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2F8FcItdydR1njSDoWkGt2%2FScreenshot%202026-07-03%20at%208.09.27%E2%80%AFAM.png?alt=media&amp;token=64f32e49-122d-4e43-ab75-205be5642385" alt=""><figcaption></figcaption></figure>

***

## Tips

* Use colors when customers are choosing between simple color options.
* Use images when the differences are visual, such as patterns, fabrics, wood finishes, or product styles.
* Keep image sizes consistent for the best-looking swatches.

***

## Related Guides

Looking to do more with swatches?

* [Make Swatches Required Before Adding to Cart](/infinite-options/inputs-and-field-settings/create-swatches/how-to-make-swatches-required.md)
* [Style Your Swatch Options](/infinite-options/inputs-and-field-settings/create-swatches/customize-swatches-using-css.md)
* [Use Native Bundling with Swatches](broken://pages/dMNqfyywVN5r1WsZqkRH#how-to-add-pricing-to-an-option)