> For the complete documentation index, see [llms.txt](https://modifit.gitbook.io/modi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modifit.gitbook.io/modi/customize-button/fit-assistant-button-design.md).

# Fit Assistant Button Design

You can customize the appearance of the "Fit Assistant" button on your PDP.

From the Modi app, click on the green "Button Customization" within the Virtual Fitting Section. 

<figure><img src="https://200750857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRDEpukm76R2l7Y3GkF4E%2Fuploads%2FfWE4U3NFxH1nHH9ap0W0%2Fimage.png?alt=media&amp;token=8a85a527-eea9-43b1-9060-fca5c70dae4e" alt=""><figcaption></figcaption></figure>

## Choose your Button Style

&#x20;First choose from four different button styles:&#x20;

<figure><img src="https://200750857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRDEpukm76R2l7Y3GkF4E%2Fuploads%2Fbh6mjEEElug8hjavGXVg%2FScreenshot%202024-02-21%20at%205.38.26%20PM.png?alt=media&amp;token=3c989e2f-cca9-4cf5-8a54-a26de09f2365" alt=""><figcaption></figcaption></figure>

Once you've chosen a button-style, you can customize everything from the colors and fonts to the padding.&#x20;

<figure><img src="https://200750857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRDEpukm76R2l7Y3GkF4E%2Fuploads%2FGbARakJby6Kuw5czY9hK%2Fimage.png?alt=media&amp;token=6cc1be07-78a4-4f2a-8fad-05d908f6924f" alt=""><figcaption></figcaption></figure>

To customize the colors of the button, enter the HEX code. &#x20;

<figure><img src="https://200750857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRDEpukm76R2l7Y3GkF4E%2Fuploads%2F1iIluIYPwHquJIj48H7U%2Fimage.png?alt=media&amp;token=3212e6f3-4086-43a5-9fb7-e67e883ead05" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you need to convert RGB codes, or want to explore different HEX Codes you can use online tools like  [image color picker](https://imagecolorpicker.com/en)
{% endhint %}

To change the font, select from the "font family" dropdown or choose (+) Add font to add your own&#x20;

<figure><img src="https://200750857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRDEpukm76R2l7Y3GkF4E%2Fuploads%2FB9SpTu8z71LBEz4FHdoe%2Fimage.png?alt=media&amp;token=45cba0f7-e719-488c-9054-4d040d55f88b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://200750857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRDEpukm76R2l7Y3GkF4E%2Fuploads%2FtrEMnoYzg0igZKTUgwhw%2Fimage.png?alt=media&amp;token=88cd7a94-7b79-4b4a-b1f8-e5a1911392f9" alt=""><figcaption><p>You can choose to enter a font family or upload a custom font. </p></figcaption></figure>

{% hint style="info" %}
If you choose to enter a font family, the spelling must match exactly.&#x20;
{% endhint %}

You will see a preview of the button appearance on desktop and mobile the right-side of the screen.&#x20;

<figure><img src="https://200750857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRDEpukm76R2l7Y3GkF4E%2Fuploads%2FAHszb4kmAv4PKCZUMhVZ%2Fimage.png?alt=media&amp;token=9fca6d97-85cb-4df0-a029-44bae9bbb563" alt=""><figcaption></figcaption></figure>

Make sure to click "Save" to confirm your changes!

<figure><img src="https://200750857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRDEpukm76R2l7Y3GkF4E%2Fuploads%2Fo0Z6a2p9rpcURSVr4uNs%2Fimage.png?alt=media&amp;token=b238a8ed-61d5-4118-be34-47d7b6b3104c" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Next: [Review Set-Up](/modi/reviews-setup/email-settings.md)

If you have any questions, please do not hesitate to reach out to our team by emailing us at **<contact@modifit.io>**
{% endhint %}

Next:

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Review Set-Up</td><td></td><td></td><td><a href="/modi/reviews-setup/email-settings.md">REVIEWS SETUP</a></td></tr></tbody></table>