Bundle Widget Placement Guide

The Bundle widget is the customer-facing interface that allows users to interact with and purchase a bundle. By default, the system uses automated positioning, but it also allows for manual placement via CSS selectors or the Shopify Theme Editor.

Steps:

1. Automatic Placement

• • Once a bundle is built, the widget is automatically injected into the bundle parent product page.
  • The default position is directly above the Add to Cart selector.

2. Selector-Based Placement (Custom ID/Class) You can override the automatic placement by defining a specific element in the app configurations:

• • Enable Selector: Toggle this option to use custom positioning.
  • Identify Element: Input the specific CSS Class or Element ID of the target location on your product page.
  • Relative Positioning: You must choose whether to place the widget Above or Below the specified selector.
  • Device Synchronization: These settings can be configured independently or applied to both Desktop and Mobile versions.

3. Manual App Block Placement

• • If you prefer a "drag-and-drop" approach, you can manually place the App Block within the Shopify Theme Editor.
  • This method bypasses the automatic and selector-based logic to give you precise control over the layout within your theme's sections.

• Prerequisite: A bundle must be fully "built" and active before the widget will appear on the parent product page.
• Theme Conflicts: If the CSS ID or Class entered in the configuration does not exist in the active theme, the widget may fail to render or revert to default behavior.
• Manual vs. Auto: Manually placing an App Block in the Theme Editor generally overrides the app’s internal positioning configurations to prevent duplicate widgets from appearing.

Example Scenario

Scenario: A merchant wants the Bundle widget to appear below the product description instead of near the "Add to Cart" button.

• Action: The merchant identifies the CSS class of the description container (e.g., .product-description).
• Configuration: In the app settings, they enable the selector, input .product-description, and set the placement to Below.
• Result: The system moves the widget from the default "Add to Cart" area to the bottom of the description section.

Updated on: 03/03/2026