# Multi-Option Bundle 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 use a Shopify **app block** that must be added to your product template. 1. In Shopify, go to **Online Store > Themes**. 2. Click **Customize** on your current theme. 3. Navigate to a **product template**. 4. In the left sidebar, click **Add section** or find the app block area. 5. Add the **Multi-Option Bundle** app block. 6. Click **Save**. If the app block is not added, customers will see a standard product page instead of the bundle options. *** ## 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? Yes. MOB bundles require the **Multi-Option Bundle** app block to be added to your product template in the theme editor. This is different from BYOB bundles, which use an app embed instead. ### Can I have a different design for each MOB bundle? Yes. Each MOB bundle uses its own template and design state. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.elitebundleapp.com/create-bundles/multi-option-bundle.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.