Articles on: Mix & Match Bundle

Understanding the Bundle Editor

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



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:


  1. Click Add element
  2. Select a component type
  3. 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.


Updated on: 01/07/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!