> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/swatch/frequently-asked-questions/is-it-possible-to-customize-how-swatches-look.md).

# Is it possible to customize how swatches look?

Yes! You can fully customize how your swatches appear, including color, size, shape, borders, and more, for both the product page and the collection page.

💡 Use this to match your option styles with your store’s branding and make them look consistent across pages.

#### ✅ To customize the display style: <a href="#id-3-to-customize-the-display-style" id="id-3-to-customize-the-display-style"></a>

1. Go to the [**“Styling”** page](/swatch/styling/styling-overview.md) in OPTIS Color Swatch

<figure><img src="/files/KoqKVXEwKn9rz1PBm866" alt="Styling page in the app"><figcaption></figcaption></figure>

2. Choose display style that you want to customize the appearance: Swatch / Button / Dropdown<br>
3. You’ll see two tabs:

* **Product Page** - to style how it appears on product detail pages
* **Collection Page** - to style how it appears on collection page

<figure><img src="/files/AS5cFyNKs5BBOISCIcWY" alt="Product Page and Collection Page tabs in the Styling settings"><figcaption></figcaption></figure>

4. In each tab, you can adjust the settings to fit your needs

<figure><img src="/files/c60GkXSwcOBhSckKFmHF" alt="Adjusting swatch appearance settings in the Styling page"><figcaption></figcaption></figure>

5. Click **Save** to apply your changes.

{% hint style="info" %}
For a full list of every styling setting, see [Styling settings reference](/swatch/styling/styling-settings-reference.md).
{% endhint %}