Overview

The Layout tab defines the visual foundation and structural arrangement of the bundle widget.

It controls two core systems:

1. Bundle Layout → Global design system (Typography and Colors)
2. Split Container Layout → Structural layout system (spacing, sizing, positioning)

Together, these ensure:

• Consistent design across all components
• Proper layout structure across devices
• Accurate rendering in preview and storefront

1. Bundle Layout

Purpose

The Bundle Layout controls the global visual styling of the bundle.
All components inherit these settings to maintain consistency.

Typography

Font Family

Defines the font used across the entire bundle.

Applies to:

• Headings
• Product titles
• Buttons
• Step labels
• Bundle summary

Behavior:

• Overrides theme font within the bundle only
• Must update instantly across preview and storefront

Color System

Defines the global color palette used throughout the bundle.

Background Color

Sets the main background of the bundle container.

Primary Color

Used for primary interactive elements.

Usage:

• Button backgrounds
• Active states
• Selected items

Secondary Color

Used for supporting elements.

Usage:

• Button text
• Secondary UI elements

Text Color

Defines the main content color.

Usage:

• Titles
• Descriptions
• Labels

Accent Color

Used for high-importance elements.

Usage:

• Prices
• Discounts
• Promotional highlights

Border Color

Defines the default border appearance.

Usage:

• Cards
• Inputs
• Containers

Bundle Layout Rules

• Changes must reflect instantly in the preview.
• Must remain consistent across:
  • Visual editor
  • Storefront
  • Standalone page
• Should not conflict with theme styles
• Colors should maintain proper contrast and readability

2. Split Container Layout

Purpose

The Split Container Layout controls the structural arrangement of the bundle, especially in two-column layouts.

It defines:

• Container styling (background, border)
• Section sizing (bundle box vs product area)
• Spacing (gap, padding, margin)
• Responsive behavior

Container Styling

Split Container Background

Defines the background of the entire layout wrapper.

Split Container Border Color

Defines the outer border color of the container.

Split Container Border Style

Defines the border appearance.

Options:

• None
• Solid
• Dashed
• Dotted

Split Container Border Width

Controls the thickness of the border.

Device Control (Desktop / Mobile)

Allows separate layout configurations per device.

Layout Structure

Bundle Box Width

Defines the width of the bundle summary section.

Behavior:

• Remaining space is used by the product section
• Larger width → focus on summary
• Smaller width → focus on products

Gap

Controls the space between product section and bundle box.

Padding Inline

Controls left and right inner spacing of the container.

Padding Top

Controls top inner spacing.

Padding Bottom

Controls bottom inner spacing.

Border Radius

Controls corner roundness of the container.

Margin Top

Controls space above the container.

Margin Bottom

Controls space below the container.

Responsive Behavior

Layout adapts per device:

Desktop:

• Two-column split layout

Mobile:

• Stacked layout (vertical flow)

Important:

• Values should be optimized separately for mobile
• Avoid fixed widths that break layout

Layout Dependencies

Layout behavior is affected by:

Template System

Some templates may:

• Enforce specific layouts
• Disable split layout controls

Fixed Bundle Mode

When fixed bundle is enabled:

• Layout may simplify automatically
• Some elements (tiers, progress) may be hidden
• Structure becomes more compact

Component System

• Bundle Box position depends on layout
• Product grid adapts based on available space

Common Issues to Avoid

• Layout not updating instantly in preview
• Mismatch between preview and storefront
• Broken layout with fewer products
• Improper mobile stacking
• Overlapping or compressed bundle box
• Inconsistent spacing across components

Best Practices

• Maintain balanced layout proportions
• Use consistent spacing (gap, padding, margin)
• Optimize layout separately for desktop and mobile
• Ensure clear visual hierarchy:
  • Products first
  • Summary clearly visible
• Avoid overcrowding or excessive whitespace

Final Summary

The Layout tab is the foundation of the bundle UI system.

It controls:

• Global design (Typography and Colors)
• Structural layout (Split Container)
• Spacing and alignment
• Responsive behavior

A well-configured layout ensures the following:

• Clean and professional UI
• Consistent experience across devices
• Perfect sync between editor and storefront
• Better usability and conversion