Mix and Match

The Build Your Own Bundle (BYOB) feature allows the merchant to create a customizable bundle where customers can select products from a defined product pool and build their own bundle. The merchant can configure bundle information, eligible products, quantity-based discount rules, storefront layout, bundle styling, and typography.

The customer-facing preview on the right side updates according to the configured bundle settings.

This section allows the merchant to define the basic information displayed for the bundle.

• Allows the merchant to enter an internal name for the bundle.
• This name is used to identify the bundle within the Shopify admin/app.
• Example: BYOB #7286.

• Defines the main heading displayed to customers on the storefront.
• Example: Build your bundle.

• Defines supporting text displayed below the bundle title. Can be used to explain how customers should build the bundle.
• Example: Pick products and unlock tier discounts.

• This section controls where and how the bundle is displayed, as well as how customers interact with it.

• Determines where the bundle interface is displayed on the storefront.
• Full Width (bundle page block): Displays the bundle interface on the selected product’s page using the app embed.

• Product Page (app embed): Allows the merchant to select specific Shopify products on which the bundle should appear.

• Click Select products to choose which product pages show this bundle. The selected products are displayed below the button. The number of selected products is also shown.

• Allows customers to select a specific product variant while building the bundle.For example, customers can select a size, color, or other available variant. When disabled, variant selection is not provided through the bundle interface.

• Displays a progress indicator showing the customer’s progress toward completing the bundle or reaching the next configured discount tier.

• Hides the bundle’s calculated total price and the Add to Cart button from the bundle interface.

• Controls how the bundle is represented in the cart. When enabled, the bundle can be grouped together as a single cart line rather than displaying each selected product separately.

Determines which products customers can select while building the bundle.

• All products: Makes all eligible products available for selection.
• Specific Products: Allows the admin to select which products are available in the bundle.
• Collections: Allows the admin to select one or more collections, making the products in those collections available for the bundle.

The product pool can be used to control the source of products available to customers.

Controls the presentation of products within the bundle interface.

• Grid: Displays the selected/available products in a grid layout. When this option is selected, columns can be configured. 
• List: Displays the selected or available products in a list layout.

• The Rules section allows the merchant to configure quantity-based discount tiers for the bundle.

• Determines how the configured discount will be applied.
  • Percentage Off: Applies a percentage-based discount when the customer reaches the configured quantity.
  • Fixed Amount Off: Applies a fixed monetary discount when the customer reaches the configured quantity. 
  • Fixed Bundle Off: Applies a fixed discount to the entire bundle when the customer purchases the configured quantity.

• Adds another discount rule/tier to the bundle.
• Multiple rules can be configured to provide increasing discounts as customers add more products.

Rule #1

Box Title

Defines the label shown for the corresponding discount tier.

Example: Box of 2

Determines what condition is used to trigger the discount.

• Quantity: The discount is triggered based on the number of products selected.

The condition defines the minimum quantity required to activate the rule.

Example:

• is greater than or equal to
• 2

This means the customer must select 2 or more products to qualify for this tier.

Percentage Off

Defines the percentage discount applied when the rule condition is satisfied.

Example: 5%

Therefore:

2 or more products → 5% discount

Remove

• Removes the selected discount rule from the bundle.

Rule #2

The second rule follows the same configuration structure but allows the merchant to create a higher discount tier.

Example configuration:

• Box Title: Box of 4
• Condition: Quantity ≥ 4
• Percentage Off: 10%

Therefore:

4 or more products → 10% discount

This allows the merchant to create progressive discounts, encouraging customers to add more products to the bundle.

• Adds another discount tier.
• Merchants can continue creating rules for additional quantities and discounts.

This section controls the visual appearance of the bundle component.

Rule Box Style

Determines how the configured discount rules are displayed to customers.

• Progress bar — Displays the discount tiers as a progress-based interface.

For example, the customer can visually see:

Box of 2 → 5% off → Box of 4 → 10% off

Color Palette

Allows the merchant to select the color scheme used for the bundle.

• Multiple predefined color palettes are available.
• Custom can be used when the merchant wants to configure a custom appearance.
• The selected palette is applied to the bundle interface.

Show More

• Expands the color palette section.
• Displays additional available color options.

Reset

• Restores the Bundle Style settings to their default configuration.

The Typography section controls the text styling used within the bundle interface.

• Allows the merchant to configure typography-related settings.
• The section is collapsed by default in the provided interface.
• The Reset option restores typography settings to their default values.

• Log in to your store. Navigate to the Product Page where the Build Your Own Bundle is configured. The Build Your Own Bundle section will be displayed on the product page.

• Click the Add button to open the available Product Pool.

• Select the first product from the product pool. Select the second product as required.

• The products will be added to the bundle. Click the Add to Cart button.

• The selected products will be added to the cart as a bundle.

The Multi-Step Bundle feature allows the merchant to create a bundle that customers complete through multiple predefined steps.

Each step can have its own:

• Product pool
• Number of slots
• Required selections
• Title
• Subtitle

Bundle Name

• Allows the merchant to enter an internal name for identifying the bundle.
• Example: Multi-Step #9570.

Bundle Title

• Defines the main title displayed to customers.
• Example: Build your bundle.

Subtitle

• Provides supporting instructions for customers.
• Example: Complete each step to build your bundle.

Storefront Layout

Determines where the multi-step bundle is displayed.

• Full Width (bundle page block): Displays the bundle interface on the selected product’s page using the app embed.
• Product page (app embed) — Displays the bundle on a selected product page through the app embed.

Bundle Appears On

Determines which product pages will contain the multi-step bundle.

• Specific products: Allows the merchant to select the products whose pages the bundle will appear on.
• Collection: Allows the admin to select one or more collections, making the products in those collections available for the bundle.

Product Selection on Product Page

Determines how customers access the bundle selection interface from the product page.

• Modal (product picker): Opens the bundle product selection interface in a modal/popup when the customer selects products.
• Pre-curated(inline pool): Displays the available products directly within the bundle interface, allowing customers to select products without opening a separate modal or popup. 

Choose Modal Layout

Controls how products are displayed inside the selection modal.

• List: Displays available products in a list format.
• Grid: Displays available products in a grid format.

Let Customers Choose Variants

• Allows customers to select product variants while completing the bundle.
• For example, a customer may choose the required size or color for a selected product.

Choose Button Label

Defines the text displayed on the button customers use to select a product.

Example: Choose product

The merchant can customize this label according to the storefront’s requirements.

• The Steps section is the core configuration area of the Multi-Step Bundle.
• Each step represents a stage that the customer must complete while building the bundle.

Add Step

• Creates an additional step in the bundle.
• Each new step can be independently configured.

Step #1

Slots

Defines the number of product positions available in the step.

Example: 1

This means the step provides one product slot.

Required

Defines how many selections the customer must make to complete the step.

Example: 1

This means the customer must select one product before the step is considered complete.

Title

Defines the heading displayed for the step.

Example: Step 1

The merchant can replace this with a more descriptive title such as:

Choose your main product

Subtitle

Provides additional instructions for the step.

Example: Choose our product

This can be customized to explain what the customer should select.

Product Pool

Determines which products customers can choose from for this particular step.

• All products: Includes all products available in the store for selection in this step. 
• Specific products: Allows the merchant to select particular products for this step.
• Collections: Allows the merchant to select one or more collections, making the products within those collections available for selection. 

Remove Step

• Removes the current step from the bundle.

Step #2

Step #2 contains the same configuration structure as Step #1 but can have a completely different product pool and customer requirement.

Slots

Defines the number of available product slots.

Example: 1

Required

Defines how many products the customer must select.

Example: 1

Therefore, the customer must make one selection to complete Step #2.

Title

Defines the heading for the second step.

Example: Step 2

Subtitle

Provides supporting instructions.

Example: Choose another

Product Pool

Defines the products available specifically for Step #2.

• All products: Includes all products available in the store for selection in this step. 
• Specific products: Allows the merchant to select particular products for this step.
• Collections: Allows the merchant to select one or more collections, making the products within those collections available for selection. 

Remove Step

• Removes Step #2 from the bundle.

Step Ordering

• The step can be moved in the configured sequence using the available ordering control.
• This allows the merchant to change the order in which customers complete the bundle.

The Bundle Style section allows the merchant to customize the Multi-Step Bundle’s visual appearance.

Color Palette

• Provides predefined color palettes for the bundle.
• The merchant can select a palette that matches the store’s branding.
• Custom can be used for a customized color configuration.

Show More

• Expands the available color palette choices.

Reset

• Restores the Bundle Style configuration to its default values.

The Typography section controls the text appearance of the Multi-Step Bundle.

• Allows typography settings to be customized.
• The section can be expanded to access the available typography options.
• Reset restores the typography configuration to its default state.

• Log in to your store. Navigate to the Product Page where the Multi Step Bundle is configured. The Multi Step Bundle section will be displayed on the product page.

• Click the Add button in the step to open the available Product Pool.

• Select the first product from the product pool. Select the second product as required.

• The products will be added to the bundle. Click the Add to Cart button.

• The selected products will be added to the cart as a bundle.