> For the complete documentation index, see [llms.txt](https://docs.yaycommerce.com/yayswatches/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.yaycommerce.com/yayswatches/how-it-works/swatch-customizer.md).

# Swatch Customizer

This section allows you to **customize the swatch color/image** on your product page. The available custom settings include; **Swatch style, Border color, Variant name tooltip** and **Image position.** You also have a nice preview section to the right, so you could see the effects of each changes in real time.

You can set the swatch style to either **circle or square.** Set the swatch size to **Big, small, medium or custom size**. Set the **Border color** when normal or active.

You can **enable or disable** the **name tooltip** and lastly, set the **image position** to either **fit, top, buttom** or **center.**

![A GIF image showing the Swatch Customizer option.](/files/iWvl0AeZpKh34muSlGgX)