Template Creator

Introduction

Welcome to the Bundle Builder template editor documentation.

Following merchant feedback, we have created the ability for you to edit the bundle page layout. You can find the template creator in the Bundle Builder app by following this path:  Settings > Template Creator

Please note you need to have a strong understanding of liquid coding to create your own bundle template implementation.


Overview

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.


Usage

Template creator has been made for you to create your own bundle page template from scratch. 

Providing replicas of the default template is not something we are able to do, however, it is currently in our development pipeline.

Here is a link to our recommended specialist page, listing developers who can help with creating custom templates from scratch:

Recommended specialists


Liquid Tags

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.

The 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 a product from a bundle.

The BundleItem instance should be removed as a parameter.

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

Example:
{% remove_from_bundle_form item %}<br><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 %}

change_variant_in_bundle_form

Use this tag to implement changing variant of product that is already added to a bundle.

The BundleItem instance should be passed as a parameter.

Example:
{% change_variant_in_bundle_form item %}
    <select name="variant">
        {% for variant in item.variant.product.variants %}
            <option {% if item.variant.id == variant.id %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
        {% endfor %}
    </select>
{% end_change_variant_in_bundle_form %}

Instances

bundle

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.
external_name string
External name of the bundle
description string (html)
Bundle description
bundle_image_url string (url)
Link to bundle image
header_image_url string (url)
Link to bundle header image
products_per_row number
Number of products in one row
discount_minimum number
Minimal price a bundle must have to apply a discount
discount_type string
Type of a bundle discount - one of fixed (e.g. discounted by $20), percentage (e.g. 10 percent discount), or price (fixed bundle price)
discount_value number
Value of the discount
limit_rules array of LimitRule instances
Limits for the bundle
taxable boolean
True if bundle is marked as taxable, false otherwise
requires_shipping boolean
True if bundle requires shipping, false otherwise
sku string
SKU of the bundle
vendor string
Vendor of the bundle
variant_prefix string
Prefix of unique bundle identification

tags array of strings
Product tags

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

Single 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 null if variants are not tracked..
sku string (optional)
A unique identifier for the product variant in the shop.

Image

The individual Product image.

id number
Unique identifier of the image
src string
Link to the image
srcset string
Responsive image definition (for the srcset attribute of img tag)

LimitRule

Rule that the bundle must fulfill before it can be added to cart.

type string
Type of the limit, one of
  • bundle-price Bundle price
  • bundle-price-before-discount Bundle price (before discount)
  • total-number-of-products Total number of products
  • amount-of-one-product Amount of one product
operation string
Operation, one of lt, lte, eq, gt, gte - meaning <, <=, =, >, => respectively
value number
Value of the limit
section number
Id of a section that this rule applies to (can be null if limit rule is for whole bundle)

Settings

General settings from Bundle Builder settings section. Use {{ settings | json }} to display the settings.


Javascript helpers

Javascript helpers are globally available functions to provide additional functionality to your custom templates.

window.BundleBuilder.canAddVariant(variantId, sectionIndex)

Returns true if a variant with given variantId from section (with index sectionIndex) can be added to the bundle, false otherwise. This depends on bundle limits and available variant quantity.

window.BundleBuilder.showMoreModal(variantId, sectionIndex, canSelectVariant, canAdd)

Show a "Read More" modal dialog that shows all product images together with product description.

The variantId is an identifier of a variant that will be displayed. The sectionIndex is index of a section to which the variant belongs. canSelectVariant is optional and if set to false, it will hide variant selection dropdowns. canAdd is optional and if set to false, it will hide the button for adding variants to the bundle.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.