BoxBuilder offers multiple layout options for the product picker and box summary. You can configure these per box product and globally in settings.
Product Grid Layouts
Grid Layout
Products are displayed as cards in a responsive grid. Each card shows the product image, name, price, and an Add to Box button.
Configure in BoxBuilder → Settings → General under Product Layout:
| Setting | Description | Default |
|---|
| Layout Style | Grid or List | Grid |
| Products per page | Number of products before pagination | 12 |
Grid layout works best for visual browsing (e.g., chocolates, flowers). Recommended: 8–16 products per page for optimal performance.
List Layout
Products are shown as compact horizontal rows. Each row has a small thumbnail, product name, price, and add button. List layout fits more products in less vertical space.
Best for boxes with many items where customers need to scan quickly.
Box Summary Panel
The summary panel shows what the customer has added to their box. It includes:
- Selected items with names and quantities
- Running total price
- Progress indicator (e.g., “6 of 12 items”)
- Gift message field (if enabled)
- Add to Cart button
Summary Position
Configure in BoxBuilder → Settings → General under Builder Position:
| Position | Description |
|---|
| Right Side | Summary panel on the right, product grid on the left (default) |
| Left Side | Summary panel on the left, product grid on the right |
Summary Display Mode
Configure in BoxBuilder → Settings → General under Box Summary:
| Mode | Description |
|---|
| List View | Items shown as a simple list with quantities (default) |
| Slot Grid | Items shown as visual slots that fill up as items are added |
| Minimal | Compact view with just item names and counts |
Slot Grid mode creates a visual “filling up” experience — great for gift boxes where seeing the box fill adds to the shopping experience.
Progress Indicator
The progress indicator shows customers how many items they’ve added and how many more they need. Configure in BoxBuilder → Settings → General under Progress Indicators.
| Style | Description |
|---|
| Progress Bar | A visual bar that fills up (default) |
| Percentage (50%) | Displays completion as a percentage |
| Slot Dots | Individual dots for each slot |
| Counter (6/12) | Shows a simple fraction of items added vs. total |
{count} placeholder.
Mobile Display
BoxBuilder is mobile-responsive out of the box. Configure mobile settings in BoxBuilder → Settings → General under Mobile.
| Setting | Options | Default |
|---|
| Mobile Layout | Stacked, Tabbed (switch views) | Stacked |
| Summary Position | Below Products, Above Products | Below Products |
| Sticky Add to Cart | Checkbox | Enabled |
Quantity Controls
Control how quantity buttons (+/-) appear on product cards. Configure in BoxBuilder → Settings → General under Interaction.
| Setting | Description |
|---|
| Always visible | Quantity controls shown on every card at all times (default) |
| On hover | Quantity controls appear when hovering over a card |
| After First Add | Quantity controls appear only after the item has been added once |
Add Mode
| Mode | Description |
|---|
| Button Click | Customer clicks the “Add to Box” button to add items (default) |
| Card Click | Customer clicks anywhere on the product card to add it (quick add) |
| Both | Either method works — button click or card click |
“Card Click” mode is faster for high-volume stores where customers add many items quickly. “Both” gives customers the flexibility to use either method.
Narrow Container Support
BoxBuilder uses CSS container queries to automatically adapt when placed in narrow containers (like sidebars or small Elementor columns). The layout adjusts columns and spacing to fit the available width.
