> 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

This feature is available only in the PRO version. Which helps custom style for extra custom fields (on the option set).

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="https://1017190968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2smJJDNU4M9yRHtLZ9O%2Fuploads%2FatJQ7kxvGBdaYpy9Om8G%2Fimage.png?alt=media&amp;token=d703625b-a4a2-41fa-887b-0ac4c2e5a1c1" alt=""><figcaption></figcaption></figure>

And the result:

<figure><img src="https://1017190968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2smJJDNU4M9yRHtLZ9O%2Fuploads%2FXSla7xUm37Ojg8zP2olm%2FYayExtra%20Font%20Customizer.png?alt=media&amp;token=8c44cbc5-bb97-4424-95f9-0cee3f7e126a" 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="https://1017190968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2smJJDNU4M9yRHtLZ9O%2Fuploads%2FIf109XZvk4ZvLJrEjXLn%2Fimage.png?alt=media&amp;token=8b4a2934-917d-400b-9298-a919b65dfe7f" alt=""><figcaption></figcaption></figure>

**Button**

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

<figure><img src="https://1017190968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2smJJDNU4M9yRHtLZ9O%2Fuploads%2FTLyA11Dig5X8i9hJFMF2%2Fimage.png?alt=media&amp;token=8d132231-33db-45eb-a128-02de07043c76" 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="https://1017190968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2smJJDNU4M9yRHtLZ9O%2Fuploads%2FplXRAv3n1vStMTCPzLCd%2Fimage.png?alt=media&amp;token=656737da-024d-4063-9f31-b81fe10a1812" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1017190968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2smJJDNU4M9yRHtLZ9O%2Fuploads%2Fj3khcESs8zim3EWFFs1P%2FYayExtra%20Field%20When%20100%20percent.png?alt=media&amp;token=05f96209-8977-4233-afa1-6d8aba2f2afc" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1017190968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2smJJDNU4M9yRHtLZ9O%2Fuploads%2F3mPArp5e4iYLtbmWDvN6%2FYayExtra%20Field%20When%2050%20percent.png?alt=media&amp;token=dca94071-56c7-4dc7-bbe7-cdec6daa321a" alt=""><figcaption></figcaption></figure>
