Build Your Own Bundle
Complete guide to creating Build Your Own Bundles in Elite Bundle Builder, including steps, products, discounts, design customization, and FAQ.
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
Customer lands on the bundle page.
They see the first step (for example, "Choose your base").
They select products, optionally picking variants like size or color.
They move through each step, adding items to their running selection.
A side cart or selected-items area shows what they have picked so far.
They click Add bundle to cart when finished.
Discounts apply automatically at checkout if the bundle qualifies.
Before You Start
The Elite Embed Core app embed must be enabled in your Shopify theme for bundles to render on the storefront.
In Shopify, go to Online Store > Themes.
Click Customize on your current theme.
Open App embeds.
Turn on Elite Embed Core.
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.
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:
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
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.
Last updated
Was this helpful?