# Build Your Own Bundle A **Build Your Own Bundle** guides customers through a step-by-step flow where they pick products across multiple steps. The app adds all selected items to the cart as a single bundle. ## What It Is Best For * Gift boxes * Routine builders * Meal kits * Sample packs * Mix-and-match sets * "Choose 3" or "Pick 5" offers ## How the Customer Experience Works 1. Customer lands on the bundle page. 2. They see the first step (for example, "Choose your base"). 3. They select products, optionally picking variants like size or color. 4. They move through each step, adding items to their running selection. 5. A side cart or selected-items area shows what they have picked so far. 6. They click **Add bundle to cart** when finished. 7. Discounts apply automatically at checkout if the bundle qualifies. ## Before You Start The app embed must be enabled in your Shopify theme for BYOB bundles to render on the storefront. 1. In Shopify, go to **Online Store > Themes**. 2. Click **Customize** on your current theme. 3. Open **App embeds**. 4. Turn on **Bundle Builder**. 5. Click **Save**. If the embed is off, customers will see a standard product page instead of the bundle builder. *** ## Bundle Setup Sections When you create or edit a Build Your Own Bundle, the admin is organized into three tabs: **Steps**, **Discounts**, and **Design**. ### Steps Tab This is where you define what customers choose and in what order. #### Step Title Give each step a short, action-based name. Good titles tell the customer exactly what to do: * Choose your cleanser * Pick your snacks * Select your top * Add your extras #### Product Source For each step, choose where the selectable products come from: * **Specific products**: You manually pick which products appear. Use this when you want full control. * **Collection**: You choose one Shopify collection. The step automatically shows all products from that collection. Use this when you want the step to update automatically as your catalog changes. #### Adding and Removing Steps * Click **Add step** to create a new step. * Use the **drag handle** on a step to reorder steps. * Click the **delete** button on a step to remove it. * A bundle must have at least one step. *** ### Advanced Settings per Step Open the settings panel on any step to configure advanced rules. #### Limit Selection Quantity Enable this to set a minimum and maximum number of items customers can select in this step. | Use case | Minimum | Maximum | | ------------------------- | ------- | ------- | | Required single selection | 1 | 1 | | Optional extras | 0 | 3 | | Build-a-box core | 3 | 8 | If a step is required, set the minimum to at least 1. #### Allow Only One of Each Product Prevents customers from adding multiple quantities of the same product within the same step. Useful when each product should be chosen at most once. #### Show Variants as Separate Products When enabled, each variant (for example, size or color) appears as its own selectable card instead of being grouped under one product with a variant selector. Useful when you want every variant to feel like a distinct choice. *** ### Discounts Tab Build Your Own Bundles support tiered discounts. You can reward customers based on how much they build. #### Discount Trigger Choose what qualifies the customer for a discount tier: * **Number of items**: The total count of products selected across all steps. * **Order total value**: The sum of the selected product prices. #### Discount Calculation Choose how the discount is calculated: * **Percentage (%)**: A percentage is deducted from the bundle total. * **Fixed amount off**: A flat amount is deducted from the bundle total. * **Fixed target price**: The entire bundle is sold at a fixed price when the tier is reached. * **Amount off per item**: A fixed amount is deducted for every item in the bundle. #### Discount Tiers Add one or more tiers. The app automatically applies the highest tier the customer qualifies for. Example tier setup: | Buy | Get | | ------- | ------- | | 3 items | 5% off | | 5 items | 10% off | | 8 items | 15% off | Discounts apply automatically at checkout. Customers do not need a discount code. *** ### Design Tab The design tab lets you pick a template and launch the visual editor. Each BYOB bundle can have its own custom design. * **Select a template**: Choose a starting layout (for example, Elegant Lifestyle, Serene Wellness, Modern Minimalist). * **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 BYOB design editor uses a drag-and-drop canvas. You can add, reorder, and configure blocks. ### Available Block Groups | Group | Blocks | | -------- | -------------------------------------------- | | Layout | Container | | Commerce | Step Container, Side Cart, Discount | | Content | Heading, Text, Divider, Button, Image, Video | ### Step Container Block This block renders the product grid for the current bundle step. It contains **Product Cards** that you can style in detail. #### Product Card Settings When you select a Product Card inside the Step Container, the right panel shows these sections: **Layout** * **Card Layout**: Vertical or Horizontal * **Image Width**: Width of the image in horizontal mode **Image** * **Image Aspect Ratio**: 1:1, 4:3, 3:4, 16:9, 9:16 * **Image Border Radius**: Rounds the image corners * **Image Background**: Fallback color behind the image **Description** * **Show Description**: Yes or No * **Description Font Size**, **Color**, **Line Height** **Card Container** * **Card Background**, **Padding**, **Margin** * **Card Border Radius**, **Border Width**, **Border Color** * **Card Shadow**, **Shadow Blur**, **Shadow Color** **Content Area** * **Content Padding**, **Margin** * **Content Border Width**, **Border Color** **Title** * **Title Font Size**, **Font Weight**, **Color** * **Font Family**, **Line Height**, **Letter Spacing** * **Text Align**, **Font Style**, **Text Decoration**, **Text Transform** **Price** * **Price Font Size**, **Font Weight**, **Color** * **Compare Price Color**: For strikethrough original prices * **Font Family**, **Line Height**, **Letter Spacing** * **Text Align**, **Font Style**, **Text Decoration**, **Text Transform** **Variants** * **Show Variant Selector**: Yes or No * **Variant Type**: * **Dropdown**: Each option gets a separate dropdown (for example, one for Color, one for Size). * **Buttons**: Each option value appears as a clickable button. * **Combined**: All variants are shown in a single dropdown with images (for example, "White / M", "Black / L"). **Button** * **Button Text**: Label shown on the add-to-cart button. Leave blank to show compact circular +/- quantity buttons instead. * **Button Background**, **Button Text Color** * **Button Padding**, **Margin**, **Border Radius** * **Font Size**, **Font Weight**, **Font Family** * **Line Height**, **Letter Spacing**, **Text Align** * **Font Style**, **Text Decoration**, **Text Transform** ### Side Cart Block Shows the customer's running selection of items across steps. You can customize its position, spacing, and styling. ### Discount Block Displays discount messaging and progress. It supports three display modes: * **Progress Bar**: A visual bar showing progress toward the next tier. * **Segments**: Tier labels shown as segments. * **Thumbnails**: Visual tier indicators. For each mode you can customize: * **Layout Setup**: Flex direction, gap, alignment * **Container**: Background color * **Spacing**: Padding and margin * **Border**: Radius, width, color, style * **Text**: Font size, weight, color, family, alignment, and styling * **Progress Bar**: Show/hide, height, background fill color, border radius * **Tier Style**: Show/hide tiers, active and inactive colors, discount and item label fonts * **Messages**: Custom text for progress labels, max reached text, and discount labels *** ## FAQ ### Can a customer skip a step? If a step has a minimum quantity of 0, the customer can skip it. If the minimum is 1 or more, they must select something before adding the bundle to cart. ### What happens if a product goes out of stock? Out-of-stock products are shown as unavailable in the bundle. Customers cannot add them. If inventory tracking is enabled, the quantity selector also respects available stock. ### Can customers change their mind after selecting a product? Yes. The Side Cart block shows selected items, and customers can increase, decrease, or remove quantities before adding the bundle to cart. ### How are variants handled? By default, a product card shows a variant selector so the customer picks the correct size, color, or other option before adding. You can also enable **Show variants as separate products** in the step advanced settings to show each variant as its own card. ### Why is my discount not showing? * Confirm discount tiers are configured in the **Discounts** tab. * Confirm the bundle is added to cart from the bundle page, not as individual products. * Test in checkout, not just on the product page. * Check the app settings page for any discount service issues. ### Can I use collections for some steps and specific products for others? Yes. Each step can independently use either specific products or a collection. ### What is the difference between Vertical and Horizontal card layout? * **Vertical**: Image on top, text and button below. Best for grids. * **Horizontal**: Image on the left, text and button on the right. Best for compact lists. ### Does the design editor affect the live storefront immediately? No. You must save the design in the editor, and the bundle must be saved in the admin. Keep the bundle as **Unlisted** while testing the design. ### Can I have different designs for different BYOB bundles? Yes. Each 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/build-your-own-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.