> 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. Firstly, go to **Settings > Design Settings**

<figure><img src="https://storage.crisp.chat/users/helpdesk/website/22429817467a0000/image_gv7yt2.png" alt=""><figcaption></figcaption></figure>

2. Scroll down to **Option types** > **Swatch**. Change the shape to **Circle**

<figure><img src="https://storage.crisp.chat/users/helpdesk/website/22429817467a0000/image_1cdmo2f.png" alt=""><figcaption></figcaption></figure>

3. Click **Save**

<figure><img src="https://storage.crisp.chat/users/helpdesk/website/22429817467a0000/image_j4euu6.png" alt=""><figcaption></figcaption></figure>