How to set the position of the side cart widget

This guide explains how to change the position of a widget within your store's side cart. This method is useful if a widget isn't appearing where you expect, or if you simply want to move it to a different spot (e.g., from the bottom to the top).

1. Find a Unique CSS Selector on Your Storefront

First, you need to identify a stable element in your side cart to tell the widget where to place itself.

• On your live store, open the side cart so the widget you want to move is visible.
• Open your browser's developer tools by pressing Ctrl + Shift + I (on Windows/Linux) or Cmd + Shift + I (on Mac).
• Use the inspector tool (usually an icon of a mouse cursor in a box) to click on an element near where you want the widget to go. For example, click on the header of the side cart.
• In the code view, find a unique and descriptive class name for that element. For example, you might find a class like drawer__header.
• Copy this class name. To ensure it's unique, press Ctrl + F (or Cmd + F) within the developer tools, paste the class name, and confirm the search result shows "1 of 1".

2. Navigate to Widget Settings in the Kite App

Once you have the unique class name, you need to enter it into the Kite app settings.

• Go to your Kite app dashboard.
• Navigate to Settings from the main menu, and then click on Widget Settings.

3. Apply the Custom Position Selector

In this step, you will tell the widget which element to position itself next to.

• In the Widget Settings, scroll down to the Individual Side Cart Selector section.
• Find the input field for the specific widget you want to move (e.g., "Free Gift Widget").
• Paste the class name you copied from your store into this field.
• Important: You must add a period (.) to the beginning of the class name to make it a valid CSS selector (e.g., .drawer__header).
• Below the selector field, choose the desired position from the dropdown menu, such as "After the element" or "Before the element".

4. Save and Verify the Changes

Finally, save your settings and check your live store to see the result.

• Click the Save button in the Kite app.
• Go back to your online store and refresh the page.
• Open the side cart again to confirm that the widget has successfully moved to its new position.

Updated on: 11/09/2025