> For the complete documentation index, see [llms.txt](https://nuflorist.gitbook.io/nuflorist/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nuflorist.gitbook.io/nuflorist/product-widget/customizing-the-widget.md).

# Customizing the widget

Customizing the appearance of the widget in NuFlorist is essential for it to follow your Shopify store’s design. Here’s a detailed guide on how to customize the widget:

## Customize the widget

### Product

Dynamically link a product to the widget, this is a smart option, so you can reference the current product in the page effortlessly (automatic default) and more. [Learn more.](/nuflorist/product-widget/customizing-the-widget/product-option.md)

<figure><img src="https://3921206916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY2Zj6yf7mzr5DgaLY1Lh%2Fuploads%2F31cX1yzUZFbIMMO66xng%2Fimage.png?alt=media&amp;token=f1dee727-cd39-40f4-95e2-76e97f087182" alt=""><figcaption></figcaption></figure>

### Variant and Quantity Picker

{% hint style="warning" %}
NuFlorist' s **Product Widget** is only compatible with its own **Variant Picker**, **Quantity Picker** (optional) and **Buy button** (required). In order to use the widget, you must remove your theme's equivalents.
{% endhint %}

These options are turned on by default so your customers can use the app properly. Your variant and quantity pickers won't work with the app, you'll need to turn them off.

<figure><img src="https://3921206916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY2Zj6yf7mzr5DgaLY1Lh%2Fuploads%2FvNHDR2dC0Ntu1EokwTku%2Fimage.png?alt=media&amp;token=7da5d454-6d58-4920-87fe-fbc716fb2ad8" alt=""><figcaption></figcaption></figure>

### Typography

Adjust the typography to match your brand identity. You can choose specific fonts for headings and body. You can also customize a heading to appear at the top of your widget.

<div align="center"><figure><img src="https://3921206916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY2Zj6yf7mzr5DgaLY1Lh%2Fuploads%2Fyp5CdjTGTNFERyKKr8q9%2Fimage.png?alt=media&amp;token=c2c15837-4b98-430f-bdf8-2082e4a41ab2" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://3921206916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY2Zj6yf7mzr5DgaLY1Lh%2Fuploads%2F6mhRS3fCBW8McdSTyvsT%2Fimage.png?alt=media&amp;token=d065ac57-7361-41eb-aba6-0e5d28840abc" alt=""><figcaption></figcaption></figure>

### Colors

You have 4 options for colors, and each of them will change a specific element in your widget.

* Text: change color for headings and body text
* Background: changes the background color for the entire section
* Buttons: change the background color for buttons

<div align="center"><figure><img src="https://3921206916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY2Zj6yf7mzr5DgaLY1Lh%2Fuploads%2FbhtwRCNbNz9y2EE7Vra2%2Fimage.png?alt=media&amp;token=08e3fc47-a29e-47ad-8466-959be890f6f2" alt=""><figcaption></figcaption></figure></div>

### Layout&#x20;

Helps you match the layout of the widget to follow the aesthetics of your theme.

* Space between sections: change the space between the steps.
* Vertical padding: add equal spacing for top and bottom between the border and the content inside the section
* Horizontal padding: adds horizontal spaces for left and right between the border and the content inside the section
* Corner radius: changes the radius of the section. It’s only possible to see the difference if the section color is different from the page background.

<div align="center"><figure><img src="https://3921206916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY2Zj6yf7mzr5DgaLY1Lh%2Fuploads%2FTcm9ijBUuHUTchbflyfO%2Fimage.png?alt=media&amp;token=bcc67398-6f90-4c45-9143-26e25a50f42a" alt=""><figcaption></figcaption></figure></div>

### Buttons

Color and shape options that affect the **Buy Button** (Add to cart) and if enabled, the **Variant Pickers** pills.

<figure><img src="https://3921206916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY2Zj6yf7mzr5DgaLY1Lh%2Fuploads%2FGR91pGykTDGnozxAhcQU%2Fimage.png?alt=media&amp;token=68355d84-182b-4d99-912e-16d679215140" alt=""><figcaption></figcaption></figure>

## Save Changes

After customizing the widget make sure to save your changes and publish the updates to your store.<br>

## Test the widget

Preview the product page to make sure that the widget is functioning as expected.