# Bundles

{% columns %}
{% column %}
With the <code class="expression">space.vars.Company</code> Bundle element, you can easily create bundle features in your Shopify store. You have full control over the design and functionality, and you can use the element anywhere.
{% endcolumn %}

{% column %}

<figure><img src="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2FQP4SwmgqRAEixB2kTQgx%2F6725f0785c0cfea5d4df6c03_Bildschirmfoto%202024-11-02%20um%2010.26.22.avif?alt=media&#x26;token=e133692a-8766-45ed-8d0c-8bc1c58a4b1e" alt="" width="263"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

### Bundle Container

The key part to understand is that the `li-element="bundle-container"` opens an Alpine.js store where you can add individual products by clicking on li-element="add-to-bundle". Then, `li-element="add-bundle-to-cart"` adds all the products in the bundle to the cart, making it very flexible for your store’s needs.

**bundle-container:** This Element wraps and renders the component. All the following Elements need to be inside this Element.

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-container
```

{% endcode %}

{% tabs %}
{% tab title="bundle-container" %}
**bundle-add-to-bundle:** This element enables the "add-to-bundle" function. Whenever someone clicks on it, the currently selected variant will be added to the bundle. It needs to be inside the `product-variant-container` or the product form.

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-add-to-bundle
```

{% endcode %}

**bundle-add-to-cart:** Add this attribute to a button or div to allow customers to add all products they’ve included in the bundle with `bundle-add-to-bundle` directly to their cart. It needs to be inside the `product-variant-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-add-to-cart
```

{% endcode %}

**bundle-item:** This element generates a list of all products added to the bundle store via `bundle-add-to-bundle`. Within each `bundle-item`, you have access to both the variant and product objects for each item. It needs to be inside the `product-variant-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-item
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="bundle-variant-container > bundle-item" %}
**bundle-quantity:** Place this attribute on an input or text field, so the user can adjust the quantity of a bundle item. It needs to be inside the `bundle-item`

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-quantity
```

{% endcode %}

**bundle-quantity-increase:** Add this attribute to a div to let users increase the item quantity by clicking on it. It needs to be inside the `bundle-item`

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-quantity-increase
```

{% endcode %}

**bundle-quantity-decrease:** Add this attribute to a div to let users decrease the item quantity by clicking on it. It needs to be inside the `bundle-item`

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-quantity-decrease
```

{% endcode %}

**li-js-object:** Now you can use [`li-js-object`](#li-object-vs-li-js-object) to access all item information, such as product or variant details. For example, retrieve the product title with:

{% code title="Webflow" fullWidth="false" %}

```
li-js-object = item.product.title
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-js-object:src = item.product.featured_image
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-js-price = item.variant.price
```

{% endcode %}
{% endtab %}
{% endtabs %}