> For the complete documentation index, see [llms.txt](https://themihub.gitbook.io/ambaz-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themihub.gitbook.io/ambaz-shopify-theme/theme-settings/color-swatches.md).

# Color swatches

A comprehensive guide to adding color swatches to a product card.

{% hint style="success" %}
**Take the following steps:**

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Color swatches**
3. Make the necessary adjustments.
4. **Save**
   {% endhint %}

<figure><img src="https://3841253931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8lSFkEqW0et1Ug9g55Xj%2Fuploads%2FtnJH0IX2I9vSHiwhnEog%2Fcolorswatches1.png?alt=media&amp;token=46ce5ec9-ea49-4719-aa9a-1e92b0bae617" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3841253931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8lSFkEqW0et1Ug9g55Xj%2Fuploads%2FKotO0UFjdl4emdrK798W%2Fcolorswatches2.png?alt=media&amp;token=9fbab260-4e09-4373-8f81-3d1bebee2f65" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**This is the option for enabling or disabling color swatches across the entire website.**
{% endhint %}

| Settings                               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Enable color swatches**              | Color selections are displayed in swatches on the product card, allowing you to swiftly select.                                                                                                                                                                                                                                                                                                                                                                                              |
| **Color swatch activation**            | <p>Define the color option name. Eg. <strong>Color, Colour</strong>, etc.</p><p></p><p><strong>The name you used for the variant color option name must be entered exactly as it was there.</strong></p><p></p><p><img src="https://3841253931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8lSFkEqW0et1Ug9g55Xj%2Fuploads%2FRBTfc2TEIeAodux7ANdk%2Fcolorswatches3.png?alt=media&amp;token=d4d9d9cf-b479-47e2-948f-2fc6f446464b" alt="" data-size="original"><br></p> |
| **Maximum number of swatches to show** | You can set a limit on how many color swatches to display.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Swatch type**                        | <ol><li><strong>Color swatch (Default selected)</strong></li><li><strong>Variant image</strong> (You can display a variant image instead of the color swatch )</li></ol>                                                                                                                                                                                                                                                                                                                     |
| **Recently viewed product**            | You can also enable/disable color swatches for the recently viewed product section.                                                                                                                                                                                                                                                                                                                                                                                                          |

## Color swatches for a specific section

{% hint style="info" %}
**For each section, color swatches can be enabled or disabled Following the screenshot** -
{% endhint %}

<figure><img src="https://3841253931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8lSFkEqW0et1Ug9g55Xj%2Fuploads%2Fcoah9iHkSe15vBqYZUUk%2Fcolorswatches4.png?alt=media&amp;token=32e63d67-9fc3-48f9-bbd5-858b6f93caf1" alt=""><figcaption></figcaption></figure>

## Adding custom colors to swatches

{% hint style="warning" %}
Suppose you are using such color names. Names that are not supported as colors in browsers. Then you should follow the steps below -
{% endhint %}

{% hint style="success" %}

**Take the following steps:**

1. In the theme editor (**Customize**), click on the **Color swatches** Section
2. Add **Color item**
3. Make the necessary adjustments.
4. **Save**
   {% endhint %}

<figure><img src="https://3841253931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8lSFkEqW0et1Ug9g55Xj%2Fuploads%2FOtBq8nzu1GkMW1LMBCN8%2Fcolorswatches5.png?alt=media&amp;token=433e1417-9d85-482d-8c68-542d09d01adf" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3841253931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8lSFkEqW0et1Ug9g55Xj%2Fuploads%2FU3KufBGJo36laOfCxeei%2Fcolorswatches6.png?alt=media&amp;token=549ee079-c66b-46a7-999a-3744fd6963f4" alt=""><figcaption></figcaption></figure>

## Video Tutorials

{% embed url="<https://www.youtube.com/watch?index=11&list=PLWCiWoEvn91jNQMp4Ts9ECrHUw6JWiqWs&v=_L9RFQ1Hjhk>" %}