How to set the position of the side cart widget

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.

Updated on: 23/01/2026