How to set the position of the cart page widget

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.

Updated on: 11/09/2025