> ## 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 cart page widget

 ${youtube}[How to set the position of the cart page widget](JzKUs6WyTsw)
This guide explains two different methods for positioning a widget on your main cart page: using a CSS selector for precise placement or using your theme's editor for easy drag-and-drop arrangement.

### Method 1: Using a CSS Selector

This method allows for precise control by telling the widget to appear before or after a specific element on the page.

#### **1. Find a Unique CSS Selector on Your Cart Page**

First, you need to identify a stable element on the cart page that will act as an anchor for your widget.
* On your storefront, navigate to the main cart page.
* Open your browser's developer tools by pressing `Ctrl + Shift + I` (on Windows/Linux) or `Cmd + Shift + I` (on Mac).
* Use the inspector tool to find a unique class name on an element near where you want to position the widget. For example, to place a widget above the subtotal, you might find a class named `tax-note`.
* Copy the class name. To ensure it is unique, press `Ctrl + F` (or `Cmd + F`) within the developer tools, paste the class name, and confirm the search result shows only one match.

#### **2. Apply the Selector in Kite Settings**

Next, you will paste this selector into the Kite app to control the widget's position.
* In the Kite app, navigate to **Settings** and then to **Widget and CSS Settings**.
* Find the **Cart Page Selector** section.
* Paste the class name you copied into the field. **Important:** You must add a period (`.`) at the beginning to make it a valid CSS selector (e.g., `.tax-note`).
* Choose a position from the options, such as "Above the selector" or "Below the selector".
* Click **Save**.

#### **3. Verify the New Position**

Go back to your storefront's cart page and refresh it. The widget (e.g., Free Gift, Progress Bar) should now appear in the new position you defined.

### Method 2: Using the Theme Editor (App Block Method)

This method is often simpler and uses your theme's built-in customization tools.

#### **1. Open Your Theme's Customizer**

Navigate to the theme editor for your live theme (often found under "Online Store" > "Themes" > "Customize").

#### **2. Go to the Cart Page Template**

Using the dropdown menu at the top of the theme editor, select **Cart** to view and edit your cart page layout.

#### **3. Add a Kite App Block**

* In the left-hand panel that shows the page structure, click on **Add section** or **Add block** in the area where you want the widget to appear.
* Look for the **Apps** category and select the Kite widget you want to add, such as "Free Gift" or "Goal-based Progress Bar".

#### **4. Position the Block and Save**

* The new widget block will be added to the page. You can drag and drop it in the left panel to reorder it and place it exactly where you want (e.g., above or below the subtotal block).
* Click the **Save** button in the theme editor to apply your changes. The widget will now appear in the new position on your live cart page.