# Swatches

Create Swatches with Infinite Options

Infinite Options supports attaching colors or images to options. If you have a product with multiple variations, this will allow you to display an image or a color of what the variation would look like.

{% embed url="<https://www.youtube.com/watch?v=0UWlgW3nRbM>" %}

Follow the steps below on how to create swatches.

1\. In your Infinite Options dashboard, create an option field within an Option Set. For a refresher on how to create options, [click here!](https://infinite-options.docs.theshoppad.com/welcome/create-custom-options)

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FXt2bv6xWsiVN5U29uARd%2Ffile-4b5whDpaPj.png?alt=media&#x26;token=9a6b5981-0baa-4cb3-83f7-3be7eceaeddd" alt=""><figcaption></figcaption></figure>

2\. In your first option field, select **Swatches** as the input type. Then, type in your **Option Values**.

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FRUJ2ud0vZviG8XpwEWmJ%2Fswatch-input-type.png?alt=media&#x26;token=0fa5c551-0fa4-453a-b948-84dc229ff1a8" alt=""><figcaption></figcaption></figure>

3\. You will see an **Add Image** icon to the left of the values.

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2F49ymHp7yku9mpuEK11jK%2Fswatch-image-icon.png?alt=media&#x26;token=4d2a6742-e990-4db0-8eff-b57525f258fd" alt=""><figcaption></figcaption></figure>

4\. Click on that to attach an image or color to your option. You will be prompted to select a color or upload an image.

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2Fw6ygsaT84f92inrI5Tr1%2Fswatch-image.png?alt=media&#x26;token=ff1e495c-2d89-42a1-ad9e-6efd8f9568b4" alt=""><figcaption></figcaption></figure>

### Attach a color to an option

To attach a color, you can select any color using the color picker on the right hand side. You can also enter the color hex value (i.e. #FFFFFF).

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FfTYlGt89rI4Tn5rkRetY%2Fred-color-swatch.png?alt=media&#x26;token=37682f47-406f-48c2-95c1-248da1cdcd67" alt=""><figcaption></figcaption></figure>

Then, click **Save Changes** and make sure to save your changes on the app dashboard as well!

### Attach an image to an option

To attach an image, you can click on **Image Upload**. Then, click on **Choose File** to upload your image.

{% hint style="info" %}
The maximum file upload size is 1 Megabyte. Also, square images are the best for your swatches.\
\
Please note that at this time, GIFs are not supported for swatches.
{% endhint %}

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FaYKAttw0ShqqEyCAyeKT%2Fadding-custom-swatch.png?alt=media&#x26;token=c12a49be-ae01-4d11-874f-89ac356a3e3b" alt=""><figcaption></figcaption></figure>

Then, click **Save Changes** and make sure to save your changes on the app dashboard as well!

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2F2CX52RjJN7Di3f4CdueD%2Ffile-A4VwOi2pDb.png?alt=media&#x26;token=4ba95014-19ac-44c0-a23b-6387a2dd434d" alt=""><figcaption></figcaption></figure>

Here is an example of how swatches would look on a store's product page:

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FMd8FqdBz4utwvCJ5Oh3l%2Ffile-XqpTf3Xcpt.png?alt=media&#x26;token=35ad8775-3599-4116-911d-1dc2539a6de6" alt=""><figcaption></figcaption></figure>

### Use Native Bundling with Swatches

Setting up this option set would be how you would with the swatches feature. You can follow the instructions above along with the instructions in this document, [click here!](https://shoppad.gitbook.io/infinite-options/popular-setups/add-on-gift-wrapping-option)

<figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FGFGIBDjKowCUI3sYTdW3%2Ffile-3C8K4xWnSk.png?alt=media&#x26;token=605affec-271d-4aa7-bef5-8829dbee41ee" alt=""><figcaption></figcaption></figure>

Now you know how to create a swatch option! Well done! 🎉

{% hint style="info" %}
Want to customize your swatches' look? [Click here to learn more.](https://shoppad.gitbook.io/infinite-options/inputs-and-field-settings/create-swatches/customize-swatches-using-css)
{% endhint %}