> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/swatch/bundles/create-a-product-bundle.md).

# Create a product bundle

Build a bundle from its name to its discount and its placement.

{% stepper %}
{% step %}

### Start a new bundle

Go to **Bundles** and click **Add Product Bundle**.
{% endstep %}

{% step %}

### Set name

Under **General**:

* **Internal Bundle Name** — for your reference only.
* **Bundle Title (visible to customers)** — the heading above the widget. It starts as `Complete the Look`. The **Bundle title suggestions** button offers ready-made wordings: *Complete the Look*, *Best Value Bundle*, *The Perfect Match*, *Style Set*, *Beauty Essentials*, *Outfit Combo*, *Glow-Up Kit*, *Ready in One Click*, *Bestseller Bundle*, *Matching Vibes*, *All-in-One Set*.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-fcb0ec2e6bfbeba0e8d2e574ffe476ed995cbd8d%2Fimage%20(63).png?alt=media" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Add the products

Under **Add products**, click **Browse** and pick the products in the bundle. Each becomes a row where you can:

* drag to reorder — the order here is the order shoppers see;
* edit **Product title** to change the label shown in the widget;
* set **Qty** — how many of that product the bundle includes;
* **Delete** it from the bundle.

Keep it short. Bundles of two or three products convert better than long lists, and the app's own guidance suggests up to five.
{% endstep %}

{% step %}

### Set the status

**Status** is **Active** or **Draft**. Leave it on **Draft** while you're still building.
{% endstep %}

{% step %}

### Set the discount

Under **Discount**, choose a **Discount Type**:

* **None** — no discount; the bundle is just a convenient way to add everything at once.
* **% Discount (example: 10% off)** — a percentage off the bundle total.
* **$ Flat Discount (example: 25$ off)** — a fixed amount off the bundle total.

Then enter the **Discount Value**.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-e1180381cb10cb3a596790f6978b348926a4fa5a%2Fbundles-discount.png?alt=media" alt="The Discount section with Discount Type set to None and the Discount Value field disabled"><figcaption><p>Discount Value stays disabled until you pick a discount type.</p></figcaption></figure>
{% endstep %}

{% step %}

### Adjust the wording

Under **Settings**:

| Field                      | What it does                                                                                |
| -------------------------- | ------------------------------------------------------------------------------------------- |
| **Show out of stock text** | Tell shoppers when part of the bundle is unavailable. Ticking it reveals the message field. |
| **Button label**           | The add-to-cart button's text. Default `Add bundle to cart`.                                |
| **Total label text**       | The label before the combined price. Default `Total`.                                       |
| {% endstep %}              |                                                                                             |

{% step %}

### Choose the layout and the pages

* **Layout** — **Vertical** or **Horizontal**.
* **Show on included products page** — tick which of the bundle's products should show the widget on their own product page. A bundle usually belongs on its main product's page rather than on every accessory's page.
  {% endstep %}

{% step %}

### Save and place the block

Click **Save**, then go to **Online Store → Themes → Customize**, open a product template, click **Add block → Apps → Product Bundles Combo**, drag it where you want it and click **Save**.

Open one of the included products on your storefront and check that the bundle appears and that the discount is applied at checkout.
{% endstep %}
{% endstepper %}

## Themes and page builders without app blocks

Place this container where the widget should go:

```html
<div class="globo_color_swatch_bundle_combo"></div>
```

See [Themes without app blocks](/swatch/app-integrations/themes-without-app-blocks.md).

## Related pages

* [Customize the bundle widget](/swatch/bundles/customize-the-bundle-widget.md)
* [Product bundles overview](/swatch/bundles/overview.md)