> For the complete documentation index, see [llms.txt](https://docs.yaycommerce.com/yayextra/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/yayextra/customize.md).

# Customize

It helps you customize the style of custom fields such as tabs: **General, Swatches, Button,** and **Custom CSS.**

**General**

In this tab, you can customize the font size and font weight for the Label, total price, and subtotal price.

<figure><img src="/files/NwbMag3iPii3wofTM2Ti" alt=""><figcaption></figcaption></figure>

And the result:

<figure><img src="/files/8I7oUvtr59oJenETzWEv" alt=""><figcaption><p>Label and Extra subtotal / Total style</p></figcaption></figure>

**Swatches**

This is the Swatches tab which allows custom style for the Swatches option.

<figure><img src="/files/1kND8gyhNFleuUVzvZZJ" alt=""><figcaption></figcaption></figure>

**Button**

This is the Button tab which allows custom style for the Button option.

<figure><img src="/files/Jkpyi3BHjuqI0dP1Qy5j" alt=""><figcaption></figcaption></figure>

**Custom CSS**

This is the Custom CSS tab which allows the customization of styles to the options.

In the following screenshot, we applied a **50% wrap** size to the fields:

<figure><img src="/files/tyaWGTcbngih6MUlzLNd" alt=""><figcaption></figcaption></figure>

**Before,** by default, it was at 100%:

<figure><img src="/files/wjfsdQxKXM7cEsPLaUVb" alt=""><figcaption></figcaption></figure>

**After applying** the CSS, it was reduced to 50%:

<figure><img src="/files/Fzd3SanM6LKXk7aDuU41" alt=""><figcaption></figcaption></figure>