> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://helpdesk.skailama.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Bundle Widget Placement Guide

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

${frame}[](https://www.youtube.com/embed/HspEDAHL124)

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