Bundles

With the Liquiflow 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.

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.

Webflow

li-element = bundle-container

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.

Webflow

li-element = bundle-add-to-bundle

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

Webflow

li-element = bundle-add-to-cart

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

Webflow

li-element = bundle-item

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

Webflow

li-element = bundle-quantity

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

Webflow

li-element = bundle-quantity-increase

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

Webflow

li-element = bundle-quantity-decrease

li-js-object: Now you can use li-js-object to access all item information, such as product or variant details. For example, retrieve the product title with:

Webflow

li-js-object = item.product.title

Webflow

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

Webflow

li-js-price = item.variant.price