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.


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

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.

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
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.