English
Back to website

Advice and answers from the Keficommerce Team

  1. Categories
  2. Bundle Builder
  3. Build Your Own Box
  4. Build Your Own Box: Set Up Guide

Build Your Own Box: Set Up Guide

Aditya Sharma
Written by Aditya Sharma

Ready to take control and get exactly what you want? Our Build Your Own Box bundle lets you handpick your favorites and customize a box that fits your taste, your needs, and your lifestyle — no surprises, just what you love. Whether you're curating a gift or stocking up for yourself, this guide will walk you through setting it up in just a few easy steps.

Step-by-Step Guide: How to Build Your Own Box

Step 1: Select the Build Your Own Box Bundle

  1. Navigate to the Kefi Bundle Builder dashboard.

  2. Go to either the All category or the Bundle Builder category.

  3. Find the Build Your Own Box option and click Select to begin setting up your bundle.



Step 2: Access the Bundle Builder Setup Sections


After selecting Build Your Own Box, you’ll be taken to the setup screen, which includes three main sections:

  • Content – Add bundle info, configure steps, set discounts, and customize text fields.

  • Design – Customize the look and feel of your bundle widget.

  • Advanced – Manage bundle visibility, upload bundle images, set scheduling, and apply customer targeting rules.

A live widget preview appears on the right side of the screen, so you can instantly see how your changes will appear to customers.

Content Tab:


1. Bundle Info
Add a clear and engaging title for your box. This title will appear on the review step of your bundle builder screen, so make it both descriptive and enticing to encourage completion..
Example: “Make Your Own Toy Box” or “Build Your Custom Gift Set

2. Configure Step
Now it’s time to define the structure of your bundle by creating steps for customers to follow.
Step 1: Add Step Info
Start by setting up the first step in your bundle flow. This typically represents a product category or choice group (e.g., "Choose Your Games").
You'll need to fill in the following fields:

  • Step Label – The name of the step shown to customers (e.g., Step 1: Choose Your Games).

  • Page Title (Optional) – A more detailed heading displayed at the top of the step page, if needed.

  • Page Subtitle (Optional) – A supporting subheading displayed below the page title to provide additional context or instructions.

  • Widget Icon – Upload an icon to visually represent this step (helps guide users through the selection process).

  • Add Page Banner – Select this option to upload a banner image that will be displayed at the top of the step page. You can upload separate images for Desktop and Mobile views to ensure optimal display across devices.




Step Flow
After configuring your step info, it’s time to define the contents and behavior of each step in the bundle. This is done through the Step Flow configuration.
1. Choose Step Type
You’ll begin by choosing the type of step you want to add. There are two primary options:




A. Add Product to This Step
Select this option to allow customers to choose products during this step.
Product Source Options:

  • Specific Products – Manually search for and select individual products.

Collection – Dynamically pull products from a selected product collection.


Once you’ve selected the product source, click Add Products to include them in the step.

B. Add Custom Field Input
Select this option if you want to collect custom information from the customer (e.g., names, gift messages, notes).
Steps to configure:

  • Select the Field Type:

    • Text Field – For short, single-line input.

    • Textarea – For longer, multi-line input.

  • Required Field Option:

    • Tick the checkbox if this field must be filled out before proceeding.

    • Untick it if it’s optional.

  • Field Details:

    • Field Title – The label that will appear above the input (e.g., “Add a gift note”).

    • Placeholder Text – Example text shown inside the input field to guide users.

If you need to collect multiple pieces of information, click Add Field to insert additional custom fields.

2. Step Conditions
Set rules that determine how many products a customer can or must select:

  • Max Product for This Step – The maximum number of products a customer can choose.

  • Exact Product for This Step – The customer must select this exact number of products.

  • Min Product for This Step – The minimum number of products the customer must select.


3. Tooltip Message


Tooltip Message – A custom message shown when the user hovers over the ‘Next’ button, if the required condition for the step is not met.

Show Variants as Individual Products

  • this option to display each product variant (e.g., color, size) as a separate item in the selection.


5. Add More Steps

  • To create additional steps in your bundle flow, select Add Step and repeat the configuration process.



6. Add Free Gift Step (Optional)
You can include a free gift option as part of the bundle experience:

  • Click Add Free Gift Step.

  • Add the relevant products that will be offered for free.

  • These products will be marked as FREE at checkout.

  • Customers can select their preferred item(s) from the list.

  • You can define how many free gifts the user is allowed to choose.

7. Enable Substeps (Optional)
To create substeps within a main step, tick the Enable Substep option.
Once enabled, configure each substep with the following:
Substep Label – A name or title for the substep.

  • Choose Product Source – Select products from:

    • Specific Products

    • Collection

  • Add Products – Add the products to this substep.

Substep Conditions:

  • Max Product for This Substep

  • Exact Product for This Substep

  • Min Product for This Substep

Tooltip Message:

  • Displayed when hovering over the ‘Next’ button, if the condition is not satisfied.

Note: You can create multiple substeps by selecting Add More Substep.

Review Step
To give customers a final chance to review their selections before checkout, you can enable the Review Step.


Here’s how to set it up:

  • Review Label – Add a short label that will appear in the navigation (e.g., Review Your Box).

  • Page Title (Optional) – Add a more detailed title for the review page (e.g., Here’s What You’ve Picked!).

3. Discount
The next part of the content setup is configuring how discounts will be applied to the bundle. You can choose from multiple discount types depending on how you want to incentivize customers.

Select Discount Type
Choose one of the following options:

  • Percentage Discount
    Apply a percentage off the total bundle price (e.g., 15% OFF).

  • Fixed Amount Discount
    Subtract a fixed dollar amount from the total (e.g., $10 OFF).

  • Fixed Bundle Price
    Set a single fixed price for the entire bundle, regardless of the total of the individual item prices (e.g., Get all for $49).

  • Without Discount
    No discount is applied; products are simply grouped together as a custom selection.

  • Tier Discount
    Apply tiered pricing based on quantity or value thresholds — ideal for motivating customers to buy more.

Configure Tier Discount
Once Tier Discount is selected, you can define discount tiers based on the number of items a customer adds to the bundle. Each tier allows you to control the discount type, value, and messaging.

Step-by-Step Configuration

1. Add Number of Items
Specify the minimum number of items a customer must add to the bundle for the tier discount to apply.
For example:

  • 2 items

  • 4 items

  • 6 items

2. Select Discount Type
For each tier, choose one of the following discount types:

  • Percentage Discount – e.g., 10% off

  • Fixed Amount Discount – e.g., ₹100 off

3. Enable/Disable Tier Messages
Message Before Tier Completion (Optional)
Tick this option to show a dynamic message before the customer qualifies for a tier discount.

Use the following variables:

  • {noOfRemainingProducts} – Displays how many more products the customer needs to add to unlock the discount.

  • {discount} – Shows the discount they will receive (e.g., 10% off, ₹100 off).

  • Example message:
    Add {noOfRemainingProducts} more to get {discount}!

  • Success Message After All Tier Completion (Optional)
    Tick or untick this option to show or hide a success message after the customer qualifies for the highest tier.

4. Add More Tiers
Click Add Discount options to define additional discount levels.
Example Configuration:

  • Add 2 items → 10% off

  • Add 4 items → ₹200 off

  • Add 6 items → 25% off

4. Customize Text Fields
This section allows you to personalize all the text that appears on your bundle widget. Whether you're aligning the language with your brand voice or translating content for different regions, this gives you full control over the messaging.
You can customize text for key elements like:

  • Product Card

  • Selected Products Bar

  • Review Page

  • Bundle Ready Title

  • Order Summary Subtotal

  • Footer Text

  • Free Text


Once you've completed all the steps in the Content tab— click the Next button at the bottom of the page to move on to the Design tab.


Step 3: Design – Customize the Look of Your Bundle Widget


The Design tab allows you to tailor the visual appearance of your bundle widget so it aligns seamlessly with your store’s branding. A cohesive, branded design not only builds trust but also enhances the overall shopping experience.


1. Product Card
Fine-tune every visual aspect of your product cards to ensure they match your store’s look and feel.


General Settings

  • Background Color – Set the card background color.

  • Card Border Color – Customize the border color.

  • Image Height – Adjust image height within the card.

  • Image Display – Choose how and when images are displayed (e.g., desktop only, mobile only).

  • Product Card Desktop Size – Define the size of the card on the desktop.

  • Product Card Mobile Size – Define the size of the card on mobile.

  • Border Width – Control the thickness of the product card border.

  • Border Radius – Adjust the roundness of the card’s corners.


Title

  • Text Color

  • Size

  • Style (e.g., bold, italic)

Price

  • Product Price Color

  • Product Price Size

  • Product Price Style

Compare-at Price

  • Compare-at Price Size

  • Compare-at Price Style

CTA (Call to Action)

  • Background Color

  • Text Color

  • Size

  • Style

Variant Selector

  • Text Color

  • Size

  • Style

Image Popup
Customize the styling of the image preview popup:

  • Background Color

  • Text Color

2. Steps Page
This section lets you style the main navigation and layout for the bundle creation steps.


General

  • Bundle Widget Background Color

  • Font Family


Step Label

  • Text Color

Substep CTA

  • Background Color

  • Text Color

Page Title

  • Text Color

  • Size

  • Style

Page Subtitle

  • Text Color

  • Size

  • Style

Bottom Bar (Footer)

  • Background Color

  • Text Color

  • Size

  • Style

Navigation Buttons


  • Next Button

    • Background Color

    • Text Color

  • Previous Button

    • Background Color

    • Text Color