# 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 %}


---

# Agent Instructions: 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:

```
GET https://docs.liquiflow.app/add-ons/liquiflow-elements/bundles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.