Bundlizer

Getting started

Bundlizer turns the options of a product into its components in the cart: the customer picks options on the product page, and each choice becomes a line of the order at its own price.

Installing the app

1. Install Bundlizer from the Shopify App Store.
2. Open it from the Apps section of your Shopify admin.

Plan

Bundlizer has a single plan, free, given to your store the first time you open the app:

• Unlimited options and bundles
• Options and option prices shown in the cart
• Option display can be overridden in your theme
• Manual sync of options

Enabling the Options app embed

The options show on your store through the Options app embed of your theme. Its status is on the home page of Bundlizer: Enabled or Disabled.

1. On the home page of Bundlizer, click App embed settings. The theme editor opens on the app embeds, with Options selected.
2. Turn Options on.
3. Click Save.

You can also open the theme editor from Online Store › Themes › Customize, then the App embeds panel.

Trying the example

To see Bundlizer at work before creating your own options, create the example from the home page of Bundlizer: an Urban E-Bike sold with four options, Battery, Helmet, Accessories and Spare inner tubes, whose choices are six component products.

1. On the home page of Bundlizer, in Create your first options and bundle, click Create the example. The 7 products are created with their photos and tagged Bundlizer example, unlisted in your Online Store channel: they don't show in search, collections or recommendations, and open only from a direct link. The 4 options are added to the bike.
2. Click Preview on store: the product page of the bike opens in a new tab, with its options.
3. Pick options and add the bike to the cart: each choice shows as a component of the bike, in the cart and at checkout.

Delete the example deletes its 7 products and 4 options, including your changes to them. Dismiss hides the section for your whole store; to show it again, click show the example section under How does it work? on the home page.

Creating options

Creating an option

An option is an entry of the Option Bundlizer metaobject.

1. Go to Content › Metaobjects › Option Bundlizer.
2. Click Add entry.
3. Fill in the fields described below, then click Save.

Title, description and image

They head the option on the product page. The description and the image are optional.

Selectable variants

The choices of the option: variants of your products, from one product or several. Each choice keeps the title, image and price of its variant, and becomes a component of the order.

Selection mode

• Single choice — one choice in the list, the first one selected to start with. For an add-on the customer may skip, make the first choice a free one, such as “None”: a paid add-on must not start selected.
• Multiple choices — the customer ticks as many choices as they want, none to start with.
• Single choice with quantity — one choice, with a quantity.
• Quantity per choice — a quantity for each choice.

A single choice shows as radio buttons, or as a dropdown list when Display is set to Dropdown.

Quantities

• Default quantity — the quantity a choice starts with. Empty, it is 0 in Quantity per choice, so that no paid choice starts selected, and 1 in the other modes.
• Quantity step — the quantity moves by this many units, paid by blocks of this size.
• Free units — the first units are free, the price applies beyond them.
• Maximum quantity — the highest quantity per choice.

Price

• Price based on — Variant price, the price of the chosen variant, or Product price, the price of the product that carries the option.
• Price modification — Percentage of the base price, Minus or Plus an amount. Empty, the base price applies.
• Tier quantities and Tier values — two lists in the same order: from each quantity, the value of its tier applies, a percentage or an amount in your store currency.

For an installation sold at 65% of the product price: Product price, Percentage, tier quantity 1, tier value 65.

Suffixes

The words shown after a quantity, in the singular and the plural: “server”, “servers”.

Custom definition (JSON)

An advanced setting, for developers: a JSON object that overrides the option. Its objects are merged key by key, its other values replace those of the option, and its new keys are added, for example to hand the option to a theme override.

Adding options to a product

1. Open the product in Products.
2. In its metafields, click Bundlizer options and select the options.
3. Click Save, then synchronize the options.

The options show on the product page in the order of the list.

Synchronizing options

Your store and checkout read a copy of the options saved in each product. After creating or changing an option, an entry of the metaobject or the options of a product, refresh this copy:

1. Open the Configuration page of Bundlizer.
2. Click Resynchronize all options.

The button gives the number of products processed, and points out an option without a selectable variant.

On your store

On the product page

The options show in the add-to-cart form, above the quantity and the buttons, with the price of each choice and the total with options. The total is given for information: the price of each component is set at checkout.

In the cart and at checkout

The product and its options make a single cart line, split into components: the product, then each choice, at its own price. Under the line, the components fold behind Show N items, on the cart page, in the cart drawer and in the add-to-cart notification.

At checkout, each component shows with its price. The order carries the real variants: stock and reports count them.

Settings

Configuration

• Options shown in the cart — shows under each cart line the options the customer selected. Turn it off if your theme already shows them.
• Option prices in the cart — shows the price of the product and of each component under the cart line.
• Resynchronize all options — refreshes the options of every product.

Translations

The texts Bundlizer adds to your store, such as “Free”, “Total with options:” or “Show N items”, are translated on the Translations page of the app, for each language of your store.

The titles of options, of their choices and of products are translated in Translate & Adapt, on the Option Bundlizer entries and on the products. Option translations reach your store at the next synchronization.

For developers

Styling the options

Each option is a fieldset.bundlizer-option that carries its selection mode in data-selection (one, many, one_quantity, many_quantity). Its parts keep stable classes: bundlizer-option__title, __image, __description, __choices; bundlizer-choice__label, __image, __title, __price, __suffix; bundlizer-quantity.

.bundlizer-option[data-selection="many_quantity"] .bundlizer-choice__image { display: none; }

Overriding the display

An asset of your theme, loaded in layout/theme.liquid, registers its overrides:

(window.Bundlizer = window.Bundlizer || []).push((bundlizer) => {
  bundlizer.option("my-extension", { render, price, entries });
  bundlizer.cart({ components });
});

• bundlizer.option takes over the options whose custom definition holds "extension": "my-extension": the element shown instead of their choices, the price of a choice, the entries sent to the cart.
• bundlizer.cart draws the block of a split cart line, instead of the Show N items button.
• The bundlizer:change event follows each change of choice, variant or total.