> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.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).

# How to set the position of the side cart widget

${youtube}[How to set the position of the side cart widget](8xngpl5V0Uc)
 This guide explains how to manually position Kite widgets (like Free Gifts or Progress Bars) inside your Side Cart (Slide-out Cart) when they don't appear automatically or are in the wrong location.
### Why do I need to do this?
Side Carts are complex elements that often load dynamically. Sometimes, the default Kite "App Block" cannot find a place to attach itself. By providing a **CSS Selector**, you give Kite a specific "anchor point" (like the cart header or subtotal line) to attach the widget to.
### Step-by-Step Configuration
**1. Inspect Your Side Cart**
* Open your store and open the Side Cart/Drawer.
* **Open Developer Tools:**
    * **Windows:** Press `Ctrl + Shift + I`
    * **Mac:** Press `Cmd + Shift + I`
* **Select the Element:** Click the "Inspector" icon (usually a small arrow in the top-left of the dev tools panel) and click on the element where you want the widget to sit (e.g., the "Your Cart" header).
**2. Find a Unique Class**
* In the code panel, look for the `class="..."` name of that element.
* Example: `<div class="drawer-header">...</div>`
* **Verify Uniqueness (Critical):**
    * Press `Ctrl + F` (or `Cmd + F`) inside the code panel.
    * Type the class name with a dot in front (e.g., `.drawer-header`).
    * Check the result count. It **must** say `1 of 1`. If it says `1 of 5`, this class is not unique, and using it might cause the widget to appear in 5 different places. Try finding a parent or sibling element with a unique name.
**3. Configure Kite Settings**
* Go to **Settings** > **Widget Settings** in the Kite dashboard.
* Scroll to the section labeled **Individual Side Cart Selector** (or simply Side Cart Selectors).
* **Select the Widget Type:** Locate the field for the specific widget you are trying to move (e.g., "Free Gift Widget" or "Progress Bar").
* **Enter the Selector:** Paste the class name you found, ensuring you add a **dot (.)** at the beginning.
    * Correct: `.drawer-header`
    * Incorrect: `drawer-header`
* **Choose Position:** Select whether the widget should appear **Before**, **After**, or **Inside** (Append/Prepend) that element.
**4. Save & Test**
* Click **Save**.
* Return to your store, refresh the page, and open the Side Cart to verify the new position.
### Technical Notes & Limitations
> **Class Name Changes:** If you update your Shopify Theme, the class names might change. If your widgets suddenly disappear after a theme update, repeat this process to find the new class names.
> **ID vs. Class:** If the element has an ID (e.g., `id="cart-drawer-title"`), you can use that too! Just use a **hash (#)** instead of a dot (e.g., `#cart-drawer-title`). IDs are almost always unique and are safer to use than classes.
### Troubleshooting Checklist
* **Widget not showing?** Did you forget the **dot (.)** before the class name?
* **Widget appears multiple times?** The class you chose is not unique (e.g., you chose `.cart-item` so the widget appears on every single product in the cart). Look for a "wrapper" or "header" class instead.