> 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="/files/C6bOpzcyWS7WaT7FmtSe" 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="/files/zs5NTaI5c355RNgHwVED" 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="/files/nnk61ymae800etO8NGlI" 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="/files/lFAHCYjSNLMDyIvegxCw" 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.

***

### 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="/files/C6bOpzcyWS7WaT7FmtSe" 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)