> For the complete documentation index, see [llms.txt](https://help.joy.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.joy.so/on-site-content/branding/widget-v4/joy-and-aov-bundles.md).

# Joy and AOV.ai Bundles

{% hint style="info" %}
Requires the **Unified Widget** and the **AOV.ai Bundles Upsell** app installed on your store.
{% endhint %}

### Overview

Joy surfaces your AOV.ai bundle offers directly on the Unified Widget's product cards. When a product has a bundle or discount in AOV.ai, Joy adds a small **chip under the price** showing the offer — right next to the loyalty points customers earn. Clicking the chip opens the product page, where AOV.ai renders the full bundle.

Joy doesn't build bundles — it **annotates** your existing widget product cards so loyalty and bundle offers appear together.

#### What customers see

* A bundle **chip under the product price** (e.g. "Save up to 20%", "Bundle"), color-coded by offer type
* The **Joy points** they earn on that product
* A **"Buy more, save more"** section in the widget

> **Note:** Bundles are created and managed inside the AOV.ai app. Joy only displays them.

***

### Before you start

* Your store uses the **Unified Widget** (not Classic).
* Have the **AOV.ai Bundles Upsell** app ready — you can install it from inside Joy in Step 5.

***

### How to set it up

{% embed url="<https://app.arcade.software/share/Xcb9T7i5qfF4BnVd956h>" %}

{% stepper %}
{% step %}
**Open On-site content**

In the **Joy Loyalty** app, go to **On-site content** in the left menu.
{% endstep %}

{% step %}
**Open the Widget tab**

Select the **Widget** tab at the top.
{% endstep %}

{% step %}
**Set up the Unified widget**

On the **Unified widget** card (marked *Live*), click **Setup** to open the Widget design editor.
{% endstep %}

{% step %}
**Enable the Bundling extension**

In the left sidebar, open **Extensions** and toggle **Bundling** on. Until it's on, the panel shows "Extension disabled — toggle this extension on in the sidebar to enable it."
{% endstep %}

{% step %}
**Install AOV.ai Bundles (if needed)**

If AOV.ai isn't installed, click **Install AOV.ai Bundles app** in the Bundling panel. Install it from the Shopify App Store, then open it.
{% endstep %}

{% step %}
**Create your bundle offers in AOV.ai**

In the AOV.ai Bundle app, set up the bundle offers you want — volume discount, frequently bought together, mix & match, fixed bundle, or bundle builder.
{% endstep %}

{% step %}
**Configure the badge in Joy**

Back in Widget design → **Bundling** (now showing *Extension enabled*), configure:

* **Bundling app connector** — AOV.ai Bundles
* **Badge style** — Tinted, Filled, or Outlined
* **Hide badge on** — optionally hide the badge on *Recently viewed*, *Recommended*, or *Wishlist*

The preview shows the offers and the **Buy more, save more** section.
{% endstep %}

{% step %}
**Save**

Click **Save** to apply. The offers go live on your storefront widget.
{% endstep %}
{% endstepper %}

***

### FAQ

**Where do I create the bundles?** In the AOV.ai Bundles Upsell app. Joy only displays the offers AOV.ai exposes — it doesn't create or edit bundles.

**Does this work on the Classic widget?** No — only the Unified Widget.

**What if I uninstall AOV.ai?** The bundle chips stop showing. The product cards fall back to normal with no errors.

**Can I hide the badge on certain cards?** Yes. Use **Hide badge on** for Recently viewed, Recommended, or Wishlist.

**What do the chip colors mean?** Each AOV offer type has its own color — Frequently Bought Together, volume discount, fixed bundle, mix & match, and bundle builder.


---

# 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://help.joy.so/on-site-content/branding/widget-v4/joy-and-aov-bundles.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.