Skip to main content
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:
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:

​
Summary Display Mode

Configure in BoxBuilder → Settings → General under Box Summary:
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. You can also enable an “almost full” encouragement message (e.g., “Add 3 more items!”) using the {count} placeholder.

​
Mobile Display

BoxBuilder is mobile-responsive out of the box. Configure mobile settings in BoxBuilder → Settings → General under Mobile. When Stacked is selected, products and the summary are displayed vertically. Tabbed mode lets customers switch between “Products” and “Your Box” views — ideal when screen space is limited. The Sticky Add to Cart keeps the button fixed at the bottom of the screen on mobile.

​
Quantity Controls

Control how quantity buttons (+/-) appear on product cards. Configure in BoxBuilder → Settings → General under Interaction.

​
Add Mode

“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.