# 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="https://1017190968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2smJJDNU4M9yRHtLZ9O%2Fuploads%2FatJQ7kxvGBdaYpy9Om8G%2Fimage.png?alt=media&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;token=dca94071-56c7-4dc7-bbe7-cdec6daa321a" alt=""><figcaption></figcaption></figure>
