> 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/product-options/customize-design/display-color-swatch-element-in-a-round-shape.md).

# Display color swatch element in a round shape

1. Go to **Settings** > Scroll down to **Option type setting** > **Swatches**. Change the shape to **Circle**

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FGCIqHNZtUSPdAxnjBuci%2FScreenshot%20(24).png?alt=media&amp;token=f237813f-7112-4b1e-a992-d39555d18d4e" alt=""><figcaption></figcaption></figure>

2. Click **Save,** and **re-check on the product page**

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FXFQksR9EEi58X49nkh2H%2FScreenshot%20(25).png?alt=media&amp;token=07e09a65-21fd-4a55-886c-50788d5ceef3" alt=""><figcaption></figcaption></figure>

<div><figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FzQGEiyvCy2fgFt8TKe1d%2FScreenshot%202026-08-10%20203258.png?alt=media&amp;token=83501578-71cd-4137-a987-fdcc636e0285" alt=""><figcaption></figcaption></figure> <figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FYqyJqn6IUesTvHKqeTnJ%2FScreenshot%202026-08-10%20203339.png?alt=media&amp;token=1cca86d1-e786-45b8-9fc9-d0d46312b79e" alt=""><figcaption></figcaption></figure></div>