> 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="/files/xW8nkM1kkFmaowEXaDHK" 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="/files/1cZ1XkFbWhAuIGMfjPO0" 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="/files/x3QemHRQRtPlopCbaf8Z" alt=""><figcaption></figcaption></figure></div>

<figure><img src="/files/cvAVr3Ncv9XqTn5Pcswv" 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="/files/I9ma1SrMFK4x3UiH3M09" 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="/files/trMnBLaFuZ6vbcdn4Fxo" 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="/files/xDfsG0bgTnJmghFh8CEg" 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://nuflorist.gitbook.io/nuflorist/product-widget/customizing-the-widget.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.