> For the complete documentation index, see [llms.txt](https://4sh-templates.gitbook.io/opulent-os2.0/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://4sh-templates.gitbook.io/opulent-os2.0/production-option-swatches.md).

# Production option swatches

Display the product variants in different form on both Quickview modal and product page

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2F7YzGhFHs1fldlEb151QG%2Fimage.png?alt=media&amp;token=e8bb0c39-30e8-408d-b417-524b88475a10" alt=""><figcaption></figcaption></figure>

## Colors palette

Choose the suitable [HEX color](https://www.color-hex.com/) codes and add them to the provided box.

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FIaE9hduD3i1eXzPO207u%2Fimage.png?alt=media&amp;token=27fa228d-655c-4639-91b5-009ce2a7eced" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Note:

* Separate items with a comma.
* Write the variant name from the product option and its the color HEX value.
  {% endhint %}

## Custom settings

Enter the **exact option value name** and upload the custom image.

![](https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FF3SeT0KHCLgLwpssdWhH%2Fimage.png?alt=media\&token=1eb5c667-837f-437b-bb58-a2377da5e574)

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FREjLaI2clp1WQwxhMvA3%2Fimage.png?alt=media&amp;token=e6fc1e58-bc95-44e3-b735-d96a7eda3265" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can add up to **50** custom images. PNG images only and the recommended size is 60x60.png.
{% endhint %}