Bundle Builder

Generate multi-page bundles of existing products, allowing customers to build bundles with inventory syncing, discounts and minimums.

Theme Editor

You can use the Liquid language to provide HTML for the bundle page.

There is a global object bundle that you can use to access both the bundle definition (what you've configured in the Bundle Builder app in your Shopify admin) and the current bundle configuration.


Use the following liquid tags to interact with Bundle Builder from the theme editor code:

add_to_bundle_form

Use this tag to add a product variant in to the bundle.

Current Section instance has to be used as a parameter to the add_to_bundle_form tag.

Use input or select with name="variant" inside. The value must be a variant id.

Add a button with type="submit" to add a variant to bundle.

Example:
	{% add_to_bundle_form bundle.current_section %}
            <select name="variant">
                {% for variant in product.available_variants %}
                    <option value="{{ variant.id }}">
                        {{ variant.title }}
                    </option>
                {% endfor %}
            </select>
            <button type="submit">Add</button>
        {% end_add_to_bundle_form %}
remove_from_bundle_form

Use this tag to remove product fron bundle that was added there earlier.

Use BundleItem instance that should be removed as a parameter.

Inside of the tag, a button with type="submit" must be present.

Example:
{% remove_from_bundle_form item %}
            <button type="submit">Remove</button>
        {% end_remove_from_bundle_form %}
section_switch_form

You can implement section switching (or just show all the sections at once) by yourself. You can also use a this helper to simplify the process.

Example:
{% if bundle.has_next_section %}
            {% section_switch_form %}
                <input type="hidden" name="section" value="{{ bundle.current_section.index | plus: 1 }}" />
                <button type="submit">Next</button>
            {% end_section_switch_form %}
            {% endif %}

            {% if bundle.has_prev_section %}
            {% section_switch_form %}
                <input type="hidden" name="section" value="{{ bundle.current_section.index | plus: -1 }}" />
                <button type="submit">Previous</button>
            {% end_section_switch_form %}
        {% endif %}
add_to_cart_form

Use this tag to implement adding current bundle configuration as a product to the cart.

Example:
{% add_to_cart_form %}
            <button type="submit"{% unless bundle.can_add_to_cart %} disabled="disabled"{% endunless %}>
                {% if bundle.adding_to_cart %}
                    Processing...
                {% else %}
                    Add bundle to cart
                {% endif %}
            </button>
        {% end_add_to_cart_form %}

bundle

It has following properties:
sections: list of Section instances
Multiple for multi-section bundle, one for single section bundle.
current_section: Section instance
Currently selected section.
has_next_section: boolean
True if there is some section after current one, false otherwise. Usually used to determine if the Next button should be displayed.
has_prev_section: boolean
True if there is some section before current one, false otherwise. Usually used to determine if the Previous button should be displayed.
adding_to_cart: boolean
True if the bundle is currently being added to cart, false otherwise. Add to cart button should be disabled or hidden when bundle is being added to cart.
can_add_to_cart: boolean
True if bundle configuration is valid and bundle can be added to cart, false otherwise. Hide or disable the button to add to cart if this property is false.
content: BundleContent instance
Current bundle configuration. Contains list of products added to the bundle, price, etc.
errors: list of strings
List of configuration problems that will prevent bundle creation.

BundleContent

Object that represents current bundle configuration.
items: list of BundleItem instances
List of items that were added to the bundle.
price: number
Total price of the bundle after all discounts.
compare_at_price: number
Total price of all products in the bundle before all discounts.

Section

Object that represents one section (page) of a bundle. Used even for single-section bundles.
name: string
Name of the section (blank for single section bundle).
index: number
Order of the section in all bundle sections (starting with zero).
description: description
Description of the section.
products: list of Product instances
List of products that are added to given section.

BundleItem

One item that was added to the bundle.
section: Section instance
Section to which the product belongs to. Might be null if the product is required.
variant: Variant instance
Variant of product.
isRequired: boolean
True if variants is required and shouldn't be removed from bundle, false otherwise.

Product

Representation of one Product in the store.
id: number
Unique identification of a product
title: string
Title of the product
handle: string
A unique human-friendly string for the product.
image: instance of Image (optional)
Primary image of the product.
images: array of Image instances
List of all images assigned to the product.
description: string (optional)
A description of the product. May contain HTML formatting.
variants: array of Variant instances
Variants of given product.

Variant

Variant represents one version of the product.
id: number
Unique identification of a variant
title: string
Title of the variant
price: number
Price of the variant. Use money filter to display price:
{{ variant.price | money }}
option1, option2, option3: strings
The custom properties that were used to define product variants.
image_id: number (optional)
Unique id that is used as a primary image for given variant.
available_count: number
Number of items available in stock for given variant. Value might be Infinity if variants are not tracked.
sku: string (optional)
A unique identifier for the product variant in the shop.

Image

Product image

id: number
Unique identifier of the image
src: string
Link to the image