Multi-Option Bundle

Complete guide to creating Multi-Option Bundles in Elite Bundle Builder, including options, single-product mode, discounts, design customization, and FAQ.

A Multi-Option Bundle sells a fixed group of products where customers choose one item per option. Each option can be a group of products or a single product with Shopify variant selectors.

What It Is Best For

• Outfit combos
• Matching sets
• Product kits with size or color choices
• Bundles where every component should be included

How the Customer Experience Works

1. Customer lands on the bundle product page.
2. They see each option as a labeled group (for example, "Shirt", "Trousers").
3. For each option, they pick exactly one item or variant combination.
4. A price display shows the running total and any applied discount.
5. They use the theme's native Add to cart button to purchase.
6. The bundle discount applies automatically at checkout if enabled.

Before You Start

MOB bundles require the Elite Embed Core app embed. The Multi-Option Bundle app block is optional and is only needed when you want to position the selector in a specific product-page area.

1. In Shopify, go to Online Store > Themes.
2. Click Customize on your current theme.
3. Open App embeds.
4. Turn on Elite Embed Core.
5. Click Save.

Later, if you want custom placement, add the optional Multi-Option Bundle app block to the product template.

---

Bundle Setup Sections

When you create or edit a Multi-Option Bundle, the admin is organized into three tabs: Options, Discounts, and Design.

Options Tab

This is where you define the fixed product groups customers choose from.

Option Name

Give each option a clear label that describes the product group:

• Shirt
• Trousers
• Hat
• Shoes

Option Mode

Each option can be configured in one of two modes:

• Products: Customers pick one product from a list of multiple products you select. Each product's variants are flattened into a single selectable list.
• Product with options: You select exactly one product, and customers use Shopify-style cascading option selectors (for example, Color then Size). The app validates that the chosen variant combination exists and is in stock.

Adding and Removing Options

• Click Add option to create a new option.
• Use the drag handle on an option to reorder options.
• Click the delete button on an option to remove it.
• A bundle must have at least one option.

Discounts Tab

Multi-Option Bundles use a simplified discount model. Because the bundle is a fixed combo, tier-based quantity discounts do not apply. Instead, you can apply a single flat discount to the bundle total.

Discount Type

• Percentage off: Deduct a percentage from the total bundle price (for example, 10% off).
• Fixed amount off: Deduct a flat amount from the total bundle price (for example, $5 off).

Discount Value

Enter the percentage or amount. The discount applies automatically whenever the bundle is added to cart. There are no tiers or minimums to configure.

---

Design Tab

The design tab lets you pick a template and launch the visual editor. Each MOB bundle can have its own custom design.

• Select a template: MOB bundles use MOB-specific templates (for example, Image Selector or Clean Dropdowns).
• Launch design editor: Opens the drag-and-drop editor where you customize the bundle page.

You must save the bundle at least once before the design editor becomes available.

---

Design Editor: Advanced Customization

The MOB design editor uses a drag-and-drop canvas with blocks tailored for fixed-combo bundles.

Available Block Groups

Group	Blocks
Layout	Container
Bundle	Option Selector, Price Display, Add to Cart
Content	Heading, Text, Divider, Button, Image, Video

Option Selector Block

This block renders each bundle option as a labeled group with selectable items.

Layout Settings

• Display Style:

  • Dropdown: Shows selectable items in a native dropdown list.
  • Images: Shows selectable items as horizontal image chips with labels.
• Gap between options: Vertical space between each option group.
• Group padding: Vertical padding inside each option group.

Option Label

• Color: Text color of the option title (for example, "Shirt").
• Font Size: Size of the option title.
• Font Weight: Regular, Medium, Semi-bold, or Bold.

Dropdown Style

When Display Style is set to Dropdown:

• Border Color, Border Radius, Background, Text Color
• Padding: Inner spacing of the dropdown field.
• Focus Border Color: Border color when the dropdown is focused.

Image Chip Style

When Display Style is set to Images:

• Image Height and Image Width: Dimensions of each chip image.
• Selected Border: Border color of the selected chip.
• Border Radius: Rounding of the chip corners.

Shopify Option Label

When an option uses Product with options mode, this controls the labels for cascading variant selectors (for example, "Color", "Size"):

• Show Option Name: Yes or No
• Color: Text color of the option name label
• Font Size: Size of the option name label

---

Price Display Block

Shows the computed bundle total and any discount badge.

Layout

• Alignment: Left, Center, or Right
• Padding Vertical: Top and bottom spacing

Price

• Color: Text color of the final price
• Font Size: Size of the final price
• Font Weight: Regular, Medium, Semi-bold, Bold, or Extra Bold

Original Price

• Show Original Price: Yes or No
• Color: Text color of the strikethrough original price
• Font Size: Size of the original price

Discount Badge

• Show Badge: Yes or No
• Badge Text: Use {percent} as a placeholder for the discount percentage (for example, "{percent}% OFF").
• Background: Badge background color
• Text Color: Badge text color
• Border Radius: Rounding of the badge corners
• Font Size: Size of the badge text

Label

• Show Label: Yes or No
• Label Text: Text shown above the price (for example, "Total").
• Color and Font Size

---

Add to Cart Block

This block is invisible on the storefront. It hooks into your theme's native Add to cart button and intercepts the form submit so the bundle is added with all selected options. In the editor, it shows a placeholder.

Error Message Style

• Color: Text color of error messages
• Font Size: Size of error messages

---

FAQ

Can a customer buy multiple quantities of the same bundle?

Yes. Because the bundle uses the theme's native product page, customers can change the quantity field before adding to cart, subject to inventory limits.

What happens if a variant combination is out of stock?

For Product with options mode, unavailable variant combinations are shown as sold out and cannot be selected. If every variant in an option becomes unavailable, the bundle becomes unavailable.

Can I mix Products mode and Product with options mode in the same bundle?

Yes. Each option can independently use either mode. For example, Option 1 can be a list of shirts (Products mode), while Option 2 can be a single jacket with size and color selectors (Product with options mode).

How is the bundle price calculated?

The bundle price is the sum of the selected item prices across all options. If a discount is enabled, it is deducted from this total at checkout.

Why does the Add to Cart block look like a placeholder in the editor?

The MOB Add to Cart block intentionally does not render its own button. It hooks into your theme's existing Add to cart button on the storefront. The placeholder reminds you where the theme button will be intercepted.

Can I change the option selector from dropdown to images after launch?

Yes. Open the design editor, select the Option Selector block, and change the Display Style setting. Save the design and preview before making the bundle active.

What is the difference between Products mode and Product with options mode?

• Products: You select multiple products. Customers pick one product (or one variant) from the list. Variant combinations are flattened into a single list.
• Product with options: You select exactly one product. Customers use cascading Shopify option selectors to build a valid variant combination. This is best when a single product has many variant combinations.

Do I need to add an app block for MOB bundles?

No. MOB bundles require the Elite Embed Core app embed. Add the Multi-Option Bundle app block only when you want to position the bundle selector in a specific place on a product template.

Can I have a different design for each MOB bundle?

Yes. Each MOB bundle uses its own template and design state.