Bundle Box

What is the Bundle Box?

The Bundle Box displays:

• Selected products in the bundle
• Product details (image, name, price, discount)
• Subtotal and applied bundle discount
• Final total price
• Add to Cart button

It updates in real time as customers add or remove items.

Key Features

1. Real-Time Updates

• Automatically updates when items are added or removed
• Reflects current discounts and totals instantly

2. Discount Visibility

• Shows applied discounts clearly (e.g., 15% OFF)
• Helps customers understand their savings

3. Editable Items

• Customers can:
  • Remove items
  • Adjust selections easily

4. Clear Pricing Breakdown

• Displays:
  • Subtotal
  • Bundle discount
  • Final total

5. Add to Cart Action

• Allows customers to add the entire bundle to cart in one click

Layout Options

You can control how the Bundle Box appears:

• Sticky Sidebar (left or right side)
• Bottom Sticky Bar / Full Width Bar

This ensures flexibility for different store designs and user experiences.

Step-by-Step: Customize Bundle Box

Open Bundle Box Settings

1. Go to the Visual Editor.
2. Click on Styling from the left sidebar
3. Click on Bundle Box from the left sidebar.

Select Layout Mode

1. Choose how the Bundle Box should appear:
   • Sticky Sidebar
   • Bottom Sticky / Full Width Bar
2. If using sidebar:
   • Select Sidebar Position (Left or Right)

2. if using bottom sticky/full-width bar

Customize Tier Selector

• If you want to display the Tier Selector inside the Bundle Box, you can fully customize it from this tab.

Here, you can adjust:

• Width of tier items
• Alignment (left, center, right)
• Colors (background, text, active states)
• Spacing between tiers
• Borders and styles
• Default, Active, and Reached tier states

You can also customize its appearance separately for desktop and mobile to ensure a consistent and optimized user experience across all devices.

Customized bundle box

You can customize what appears inside the Bundle Box from this tab.

Here, you can control:

• Whether to show item images
• Whether to show item prices
• Enable or disable placeholder slots
• Set the number of placeholder slots

This allows you to adjust how the Bundle Box looks and what elements are visible to customers, giving you full control over its content and presentation.

Bundle Horizontal Box

Bundle Horizontal Box is an important part of the Bundle Box.

From here, you can control which elements or features should appear inside the box. You can choose to show or hide different sections such as the header, next-tier progress, tier selector, selected items, step navigation, subscription, form fields, extras, cart summary, and footer/button.

You can also customize the styling of each section separately, which gives you much more flexibility. For every option, you can adjust settings such as:

• Colors
• Alignment
• Borders
• Spacing
• Typography
• Background styles
• Visibility and layout behavior

This allows you to fully personalize the horizontal bundle box and design each part according to your store’s

Bundle Horizontal Box – Selected Items

The Bundle Horizontal Box Selected Items section allows you to fully customize how the selected products appear inside the Bundle Box. This gives you complete control over both content visibility and styling of selected items.

What You Can Customize

1. Display Mode

• Choose how selected items are displayed
• Example: Horizontal layout for compact and clean design

2. Visibility Options

You can control which elements are visible for each selected item:

• Show/Hide Discounted Price
• Show/Hide Discount Percentage
• Show/Hide Original Price
• Show/Hide Variant Title
• Show/Hide Quantity Label
• Enable Expand Quantities (show items in separate rows)

This allows you to simplify or enrich the product display based on your design needs.

3. Placeholder Customization

When slots are empty, placeholder items are shown. You can customize their behavior and appearance:

• Show/Hide Skeleton Bars
• Enable/Disable Pulse Animation
• Show/Hide Plus (+) Icon
• Show/Hide Number Slot Badge
• Enable Shimmer Effect

These options help improve user experience by clearly indicating empty slots.

4. Styling Options

You can style every element of the selected items section, including:

• Title Styling (color, font, size)
• Price Styling
• Discount Badge Styling
• Background & Container Styles
• Spacing & Alignment
• Borders & Radius

Each option can be customized independently to match your brand design.

Mobile Trigger Button

The Mobile Trigger Button tab is specifically used to customize the button that appears on mobile and tablet devices. This button allows users to quickly open and view their bundle (Bundle Box) while browsing products.

What You Can Customize

1. Button Design

You can choose different styles for the trigger button:

• Pill – Rounded button style
• Full-Width Bar – Stretches across the screen
• FAB (Floating Action Button) – Floating circular button

2. Colors & Styling

You can customize:

• Background Color
• Text Color
• Border Color
• Box Shadow

3. Icon & Content

• Show or hide the icon
• Control how the button text appears (e.g., View Box (3))

4. Animations

• Add animation effects to make the button more noticeable
• Helps improve user interaction

Best Practices

• Keep the Bundle Box clean and easy to read
• Highlight savings clearly
• Ensure the Add to Cart button is visible
• Use sticky positioning for better conversion

Summary

The Bundle Box is the final step in the bundle journey. It provides a clear summary of selected items, pricing, and discounts, helping customers confidently complete their purchase. Proper customization of this section can significantly improve conversions and user experience.