Product Page Bundle Builder: Empower Customers to Create Their Own Custom Sets
In today's e-commerce landscape, customers aren't just looking for products—they're looking for personalized experiences. They want to feel in control of their choices, making shopping interactive and fun.
The Product Page Bundle Builder is designed to deliver exactly this: it transforms any standard product page into a dynamic "build-your-own" experience. It empowers your shoppers to mix, match, and create their own custom product bundles directly on the page, without having to navigate anywhere else.
Whether a customer is curating a skincare set tailored to their specific routine, building a snack box filled with their favorite flavors, or assembling a themed gift bundle for a friend, this tool makes the process effortless and enjoyable.
By giving customers this high level of creative control, the Bundle Builder not only boosts satisfaction and engagement but also naturally drives a higher Average Order Value (AOV) and encourages valuable repeat purchases.
Key Scenarios: The Flexibility of the Bundle Builder
The flexibility of the Product Page Bundle Builder makes it perfect for virtually any e-commerce scenario where products can be combined. Here are a few ways merchants use it:
Make Your Toy Box: Pick 3 games, 2 crafts, and 1 surprise toy for a fun, custom play set.
Create a Gift Set: Mix soaps, lotions, and candles to build the perfect, custom-priced gift for any occasion.
Build Your Outfit: Choose a top, bottom, and accessory to get 15% OFF your complete, custom look.
Mix & Match Chocolates: Select 6 bars from 20+ flavors and automatically save on every bundle created.
How the Bundle Builder Elevates the Shopping Experience
The core of the Product Page Bundle Builder is a seamless, guided, and interactive process. Here are the standout capabilities that make this feature so engaging and effective for your customers:
Seamless On-Page Experience: Customers can build their bundles directly on the product page—there's no need to navigate away or reload, making the process fast and intuitive.
Step-Based Selection Flow: Guide shoppers through clear, structured selection steps (e.g., “Choose Your Base Product,” “Add Accessories”) to create an enjoyable, guided journey.
Live Pricing & Discounts: As shoppers add or remove items, the system automatically displays updated subtotals, bundle discounts, and total savings in real-time.
Quick Product Add & Edit: Shoppers have complete control, easily adding, removing, or adjusting quantities of products in the bundle with simple clicks.
Interactive Product Popup: Clicking to add a product opens a powerful product selector where customers can browse, search, and pick items without ever leaving the main bundle view.
Custom Discount Logic: Offer flexible discount types—percentage off, fixed amount, or “buy more, save more”—based on bundle size or specific product combinations.
Responsive & Mobile-Friendly: The experience is optimized for all devices, ensuring smooth, user-friendly bundle creation whether on desktop, tablet, or mobile.
How to Create a Product Page Bundle Builder?
STEP 1
Go to the Kefi Bundle Builder homepage and select the Product Page Bundle Builder. Click ‘Select’.
STEP 2
There are 3 sections available: Content, Design and Advanced.
The Widget Preview is available on the right side.
STEP 3
Let’s begin with the Content section.
The Content section is where you define the core structure and behavior of your bundle.
Bundle Info
Title: Enter a custom name for your bundle (e.g., “Bundle and Save More”).
This title is customer-facing and should be compelling yet clear. The maximum character limit set is 80.
STEP 4
Choose Products
Click “+ Add Products.”
Your entire product list will appear.
Select the checkboxes beside the products you want to include.
Once you’ve made your selection, click “Select.”
Note: At least one product must be selected .
Optional:
Enable “Show Variants as Individual Products” if you want to display product variants separately.
Step Conditions
Under Condition 1, configure as follows:
Condition On: Total Items
Limit products for this step: Exact products for this step
Items Count: 2
Error Message: Select exact {productCount} products
This ensures the customer must select exactly 2 products in this step.
STEP 5
Show Swatches - You can also display product variants-such as different colors, sizes, or styles-by enabling the Show swatches option.
This allows customers to view and select from the available variants directly within the bundle widget, improving the shopping experience.
Show Swatches Option: Enable swatches for the products in the bundle to let customers view and select different variants (e.g., color or size)
For details, check out this article on setting up swatches.
STEP 6
Setting Discounts for Your Bundle
To make your bundles even more attractive, you can apply automatic discounts directly within the builder.
In the Discount section (as shown in the screenshot), select the discount type and value you want to offer:
Percentage Discount (%) – Apply a percentage off the total bundle (e.g., 5% OFF).
Fixed Amount Discount ($) – Deduct a fixed dollar amount from the total.
Fixed Bundle Price ($) – Set a single, fixed price for the entire bundle.
Without Discount – Offer the bundle without any price modification.
This flexibility lets you tailor promotions to fit your sales strategy — whether you’re running limited-time offers, incentivizing larger orders, or rewarding customers for exploring your product range.
STEP 7
Design section
Using the Design Editor
Switch to the Design Editor tab to customize the appearance of your bundle (as shown in the image).
When you click on any section—such as “Choose Any 2 Foundation” or “Choose 1 Primer”—the corresponding element in the Design Editor will be automatically highlighted. This helps you easily locate and modify the specific design section you’re working on.
From there, you can:
Change the heading text, font, or color.
Adjust spacing, layout, and button styles.
Preview changes instantly to match your store’s look and feel.
1. General
Adjust general design settings for the widget:
Bundle Widget Background: Set the background color for the entire widget.
Font Family: Choose a font that matches your brand’s typography.
Title
Style the bundle title to stand out clearly:
Text Color: Select a color for the bundle title text.
Size: Adjust the font size to suit your layout.
Style: Choose font styling options such as bold, italic, or underline.
2. Product Card
Customize the look and feel of each product card within the bundle to enhance visual appeal and match your store's design.
General
Background Color: Set the background color for individual product cards.
Card Border Color: Define the border color to create visual separation between cards.
Image Border Color: Style the borders around product images.
Image Size: Choose the size for product images displayed within the card.
Image Display: Set how the image appears (e.g., square, circle, contain, cover).
Title
Text Color: Customize the color of the product title text.
Size: Adjust the font size of the product title.
Style: Select font styles like bold, italic, or underline for the title.
Price
Product Price Color: Choose a color for the standard product price.
Product Price Size: Set the font size for the product price.
Product Price Style: Apply styling (bold, italic, etc.) to the price text.
Compare-at Price Color: Set the color for the compare-at (original) price.
Compare-at Price Size: Adjust font size for the compare-at price.
Compare-at Price Style: Choose font styling for the compare-at price.
Variant Selector
Swatches Color: Define the color shown in swatch options (e.g., color or texture swatches).
Size: Set the size of the swatches for product variants.
Style: Choose how swatches are displayed (e.g., rounded, square, bordered).
3. Step Page
Customize the step-by-step navigation section of the bundle widget for a seamless shopping experience.
Step Label
Text Color: Set the color of the step label text.
Size: Adjust the font size of the step label.
Style: Choose font styling such as bold, italic, or underline.
Bottom Bar
Background Color: Set the background color of the bottom navigation bar.
Next Button
Background Color: Choose the background color for the “Next” button.
Text Color: Set the text color for the “Next” button label.
Previous Button
Background Color: Choose the background color for the “Previous” button.
Text Color: Set the text color for the “Previous” button label.
4. Footer
Customize the footer area of the bundle widget, including the total pricing display and the “Add to Cart” button, to ensure a consistent and branded checkout experience.
Total Section
Style the area displaying the total bundle price:
Background Color: Set the background color for the total section.
Text Color: Choose the color for the “Total” label and related text.
Total Text Size: Adjust the font size for the “Total” label.
Total Text Style: Apply font styling (e.g., bold, italic) to the “Total” label.
Price Size: Set the font size for the total price displayed.
Price Style: Choose styling for the price (e.g., bold or italic).
Add to Cart
Customize the appearance of the “Add to Cart” button:
Background Color: Set the button’s background color.
Text Color: Choose the button text color.
Size: Adjust the font size of the button label.
Style: Apply font styles like bold, italic, or uppercase to the button text.
Border Radius: Control the roundness of the button’s corners for a sharp or soft appearance.
STEP 8
Advanced section.
This section gives you greater control over where, when, and to whom your bundle appears.
You can then choose Visibility.
This setting determines where your bundle widget will appear across your product pages. You can control where bundles are shown to match your marketing goals and customer journey.
1. Show on All Included Product Pages - Displays the bundle on every product page that contains a bundle item.
Best for: Maximum visibility and cross-selling.
2. Show on Specific Product Pages - Lets you choose where the bundle appears.
Best for: Focused promotions and cleaner layouts
1. Widget Position
By default, the widget will appear below the Add to Cart button.
To change its position, open the Shopify Theme Editor, and simply drag the app block to your preferred location on the product page—no coding required.
Embed Bundle via HTML
You can also embed this bundle manually on any page using HTML.
Display the bundle wherever you like by placing the provided HTML tag directly into your theme file.
Here is the detailed article to Embed code via HTML.
Hide Shopify Elements
You have the option to hide specific Shopify elements (like the default Add to Cart button or product price) to reduce redundancy when showing bundles.
Simply enter the CSS selectors of the elements you'd like to hide.
Product Settings
The Product Settings section gives you powerful customization control over how products are displayed and managed within each step.
Here’s what each option does:
Hide Out of Stock Products
Automatically removes products that are sold out from your bundle steps.
This ensures customers only see items that are currently available, improving the shopping experience and avoiding frustration at checkout.
Show Search Bar
Displays a search bar within the product selection popup.
This is ideal for stores with large inventories, allowing customers to quickly find the product they want instead of scrolling through a long list.
Max Quantity Selection Per Product
Set a limit on how many units of a single product a customer can include in a bundle.
For example, if you set the max to 2, customers can’t add more than two of the same item in that bundle.
Product Card Size
You can define how product cards appear across devices for a clean, consistent layout:
Desktop Card Size: Choose between Small, Medium, or Large to adjust grid density.
Mobile Card Size: Optimize visibility on smaller screens for a mobile-friendly experience.
Allow Pre-selected Products
You can pre-select specific products for customers when the bundle loads.
This is useful for guided bundles (e.g., “Starter Kits” or “Recommended Sets”) where some items are already chosen by default.
Note - Product that are already in the bundle only can be preselected
Add Conditional Logic
This feature enables dynamic bundling rules.
You can create conditional relationships between products based on user selections.
Example:
If Selected Products Include: “10lb Dumbbells”
Hidden Products: “15lb Dumbbells”
This ensures incompatible or duplicate products aren’t displayed together. It’s ideal for managing size-based, variant-based, or exclusive bundle options.
1. Widget Position
By default, the widget will appear below the Add to Cart button.
To change its position, open the Shopify Theme Editor, and simply drag the app block to your preferred location on the product page—no coding required.
Embed Bundle via HTML
You can also embed this bundle manually on any page using HTML.
Display the bundle wherever you like by placing the provided HTML tag directly into your theme file.
Hide Shopify Elements
You have the option to hide specific Shopify elements (like the default Add to Cart button or product price) to reduce redundancy when showing bundles.
Simply enter the CSS selectors of the elements you'd like to hide.
For example:
.product__price
.product-form__buttons
This helps create a cleaner, more focused layout around your bundle widget.
Summary: Why the Bundle Builder Matters
Personalization: Gives customers creative control over what they buy, leading to a stronger brand connection.
Higher Conversion & AOV: Bundled deals increase the perceived value, incentivizing customers to add more products to their cart.
Dynamic Preview: Shoppers see their custom bundle update live as they select products, increasing confidence in their purchase.
Easy Merchant Setup: You can define bundle steps, limits, and discounts effortlessly within a simple, guided interface.
Need Help?
If you have any questions or need assistance, feel free to contact us:
Live Chat: Available via the Kefi Bundles app or website.
Email: [email protected]