The Bundle Editor is where you build, customize, and manage your bundle experience.
This guide explains how the editor is structured, how pages and components work together, and how to customize your bundle across desktop and mobile.
Bundle Editor Structure
The Bundle Editor is divided into four main areas:
Header
Body
Summary panel
Quick view
Each area has a different purpose and behavior inside the bundle.
Header
The Header appears at the top of the bundle page.
It is typically used for:
Banner
Step bar
Intro content
If your bundle contains multiple Step pages, the same Header is shared across all pages.
This means:
Editing the Header updates every Step page
Step navigation stays consistent throughout the bundle flow
Recommended Header Components
Common components inside Header:
Banner
Step bar
Text
Image
Body
The Body is the main content area of each page.
Unlike Header and Summary panel, the Body is page-specific.
This means each Step page can have a completely different layout and set of components.
You can insert components such as:
Text
Image
Product list
Box size selector
Subscription widget
Accordion
Banner
Summary Panel
The Summary panel displays the customer’s bundle selections and checkout actions.
The Summary panel is shared across all pages.
This means:
The same Summary panel appears on every Step page
Bundle selections remain visible throughout the flow
Summary Panel Features
The Summary panel can include:
Selected products
Quantity summary
Bundle pricing
Discount information
Add to cart button
Checkout button
You can position the Summary panel:
On the right side
At the bottom of the page
Quick View
Quick View allows customers to view product details without leaving the bundle page.
Quick View is global across all pages.
This means:
One Quick View configuration is shared throughout the bundle
Product cards can open the same Quick View experience
Quick View can be triggered from:
Product card
View details action
Understanding Pages
A bundle can contain multiple pages.
Supported page types:
Step page
Review page
You can switch between pages from the top navigation bar inside the editor.
You can also:
Add new pages
Rename pages
Reorder pages
Working with Components
The component list allows you to manage all components inside the current page.
You can:
Add components
Rename components
Duplicate components
Delete components
Drag and reorder components
Adding Components
To insert a new component:
Click Add element
Select a component type
The component is inserted into the selected area
Available component types include:
Text
Image
Product list
Banner
Accordion
Subscription widget
Box size selector
Selecting Components
The editor supports two-way component selection.
From the Component List
When you click a component in the component list:
The preview area automatically scrolls to that component
The component becomes selected for editing
From the Preview Area
When you click a component directly inside the preview:
The corresponding component is selected in the component list
Its settings become editable
This helps you navigate complex layouts more efficiently.
Product List and Product Card
Product list and Product card are separate component layers.
Product List
The Product list controls:
Product source
Grid layout
Product limits
Spacing
Card arrangement
You can:
Select products
Limit product quantity
Configure product display behavior
Product Card
Each product inside the Product list uses a Product card.
The Product card structure is customizable.
Supported Product card elements include:
Image
Title
Price
Compare-at price
Variant picker
Color swatch
Product rating
View details
Add to bundle button
Each element can be:
Reordered
Styled
Hidden
Customized independently
Color Themes
The Bundle Editor includes a Color theme system.
Themes allow you to quickly apply consistent colors across your bundle.
Theme Colors
A theme can define:
Primary color
Text color
Background color
Border color
Built-in and Custom Themes
The editor includes preset themes.
You can also:
Create your own theme
Save as New
Reuse themes across bundles
Component-level Color Override
Components can inherit colors from the global theme.
However, individual components can also override colors independently.
This allows:
Global consistency
Local customization where needed
Responsive Styling
The editor supports separate styling for:
Desktop
Mobile
You can independently configure:
Layout direction
Gap
Alignment
Spacing
Component sizing
Device Preview
Use the top toolbar to switch between:
PC preview
Mobile preview
Changes are previewed in real time.
No separate Preview button is required.
Translation
The editor supports multi-language translation.
You can preview translations directly inside the editor.
Translation applies to:
Global text
Component text
Shared bundle content
Components can also override global text individually when needed.
