# Fixed bundles (Shopify Bundles)

> Sell the fixed bundles and multipacks made with the Shopify Bundles app, and list what each bundle holds on the product page and in the cart.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/features/fixed-bundles  
Updated: 2026-10-01

A fixed bundle is a product made of other products, always the same ones: a starter kit, a pack of three, a gift set. You create it in Shopify with the Shopify Bundles app. For Smootify it is an ordinary product: it syncs to the CMS, it has a product page, and it goes to the cart with the usual add-to-cart form. This page shows how to list what the bundle holds.

> [!NOTE]
> The bundles come from the **Shopify Bundles** app, installed on the Shopify store. There is nothing to turn on in Smootify.

## Fixed bundle, Magic Box or add-ons

There are three ways to sell products together. Pick the one that matches who decides what goes in:

| The customer… | Use | Set up in |
|---|---|---|
| buys a set you decided | a fixed bundle (this page) | the Shopify Bundles app |
| fills a box with products they choose | [Magic Box](https://www.smootify.io/docs/features/magic-box) | Webflow and a Magic Box entry |
| adds extras to one product | [add-ons](https://www.smootify.io/docs/features/add-ons) | the product's **Add ons** metafield |

## 1. Build the bundle’s page

The bundle has its product page like any other product: see [build the product page](https://www.smootify.io/docs/build/product-page). Its price, options and stock come from Shopify. With the Shopify Bundles app, the stock follows the stock of the products inside.

## 2. List what the bundle holds

Add `variant="components"` to an element inside `smootify-product`. Smootify makes one copy of it for each product in the bundle of the selected variant. Inside the copy, these attributes show that product:

- `component="title"`: its name;
- `component="variant"`: its variant, such as “Red / M”. Empty for a product without variants;
- `component="quantity"`: how many of it the bundle holds;
- `component="image"` on an Image: its picture;
- `component="url"` on a link: its product page, on that variant.

```html
<div>
  <div variant="components">
    <img component="image">
    <div><span component="quantity">1</span> × <span component="title">Product</span></div>
    <div component="variant">Variant</div>
    <a href="#" component="url">View</a>
  </div>
</div>
```

A copy without any `component` element inside shows a plain text such as “2× Travel mug”. When the selected variant is not a bundle, there is no copy. The list follows the variant: pick another option and it shows that variant’s contents.

What is up to you: which parts you show, and the layout of the list. See [bundle component values](https://www.smootify.io/docs/reference/attributes/component).

## 3. In the cart

The bundle is one line in the cart, with the bundle’s name. In the [cart](https://www.smootify.io/docs/build/cart), a `box-item` inside the `cart-item` template repeats once per product in the bundle, with the cart line values such as `box-item="title"` and `box-item="quantity"`:

```html
<cart-item>
  <div cart-item="title">Product</div>
  <box-item><span box-item="quantity">1</span> × <span box-item="title">Item</span></box-item>
</cart-item>
```

On a line that is not a bundle, the `box-item` is removed.

**Quotes and custom prices.** When the cart becomes a Shopify draft order (a [quote](https://www.smootify.io/docs/features/quotes), or a cart with a price set by [name your price](https://www.smootify.io/docs/features/name-your-price) or the [product configurator](https://www.smootify.io/docs/features/product-configurator)), the bundle keeps its products, and the order’s additional details list them for the merchant under “Bundle (1)”.

**Buy again.** The buy-again button of the [order pages](https://www.smootify.io/docs/build/orders) leaves bundles out: an order does not say which bundle its products came from.

## Before you publish

> [!STUCK]
> - **The list of contents is empty.** The selected variant is not a bundle in Shopify, or the element with `variant="components"` is outside `smootify-product`.
> - **Each copy shows only "2× Name".** The copy has no `component` element inside. Add the ones you need.
> - **The bundle has no contents in the cart.** The `cart-item` template has no `box-item` inside.