[New] Mix and Match Bundle Templates and Customization Guide

This article details the mechanics of customizing your bundle’s visual appearance. It covers how to apply landing page or product page templates, configure element-level UI toggles, apply global branding, and utilize advanced CSS or expert color controls to modify the bundle interface.

Initial Bundle Preview Generation

Before template customization can begin, a base bundle must be generated.

• IF the bundle is created via AI, THEN the app automatically pulls your store's brand colors and applies a base configuration to generate the preview.
• IF the bundle is created manually, THEN you must first complete step and category creation, product selection, and discount setup before the base bundle preview is generated.

Template Selection and Display Routing

Once the base preview is active, you can swap between templates in the editor to see live updates.

• Landing Page Templates: There are four distinct templates designed to host the bundle on an independent landing page.
• Product Page Templates: There are four distinct templates designed to embed the bundle on a product page.
• Display Routing Logic: When a bundle the system automatically generates a "virtual parent bundle product" in the backend. IF you select a Product Page template, THEN the bundle automatically renders on this specific virtual parent product page by default.

Template-Level UI Toggles

Depending on the selected template, specific UI elements can be toggled and configured directly in the editor. You can click on any element in the live preview to open its corresponding setup menu.

• Empty Slots: * IF toggled to "Show," THEN the empty slots are displayed in the UI, and you can customize the slot icon.
• • IF toggled to "Hide," THEN the empty slots are removed from the customer's view.
• Variant Picker: * IF the bundled products have variants, THEN a variant picker must be displayed.
• • IF configured to inline, THEN the variant picker displays directly on the bundle builder interface.
  • IF configured to pop-up, THEN the variant picker appears inside a modal window when a customer interacts with it.
• Button Style: * You can toggle the product selection button between a minimal plus (+) icon or a full-width text button labeled "Add to Box."
• Bundle Cart Drawer (Product Page Templates Only):
• • IF this setting is toggled on, THEN a dedicated bundle cart drawer slides out during the selection process. This drawer exclusively displays the products currently selected for the bundle (it does not trigger the store's native Shopify cart drawer).

Global Design and Branding

The Design section controls the overall aesthetics of the bundle. Settings within this menu change dynamically based on the active template.

• Global Colors: The app prepopulates this section with your store's brand colors, categorized into Primary, Secondary, and Accent colors. IF you change a global color, THEN all UI elements grouped under that designation will update simultaneously.
• Typography & Layout: You can universally adjust font sizes, font styles, border radiuses, and image fit styles across the bundle UI.
• **Image Fit: **controls how the product images fit inside the bundle product cards

Advanced Customization & Expert Controls

For granular control over the UI, the app provides three advanced configuration methods.

• Expert Color Controls: Located in the Design Control Panel.
• • IF standard global settings are active, THEN elements share batch color assignments (e.g., all primary elements are blue).
  • IF Expert Color Controls are enabled, THEN you unlock independent customization, allowing you to assign specific colors to individual elements without affecting the global palette.
• Custom CSS: * To inject custom CSS into the bundle builder, navigate to the main App Settings, open the Controls sub-setting, and input your code into the Custom CSS field.
• Custom SDK: * You can utilize the provided custom SDK to build a completely unique bundle UI from scratch while maintaining the app's backend functionality.

Banner Limitations (Landing Page Templates)

• Feature Constraint: Banners can only be added to Landing Page templates.
• Format Constraint: Banners only accept image files. You cannot input rich text, HTML, or widgets (like countdown timers) into the banner slot.
• Dimension Constraints: Uploaded banner images must strictly adhere to the following dimensions to render correctly:

Updated on: 02/06/2026