Changing Kite Widget Position - Shopify App Blocks & CSS Selectors

You can easily reposition Kite widgets (like Free Gifts) using Shopify's Theme Editor App Blocks for your Product and Cart pages. For Side Carts, which usually do not support App Blocks, you can position the widget using CSS Selectors directly within the Kite app settings.

Method 1: Repositioning on Product and Cart Pages (Using Shopify Theme Editor) By default, Kite identifies standard elements and places the widget above the "Add to Cart" or "Checkout" buttons.

To customize this:

1. Go to your Shopify Admin and navigate to Online Store > Themes.
2. Click Customize on your current theme.
3. Use the top dropdown menu to navigate to the template you want to edit (e.g., Products > Default product or Cart).
4. Look for the Product Information section (or the main Cart section) on the left sidebar.
5. Click Add block, select the Apps tab, and choose your specific Kite widget (e.g., Free Gift).
6. Click and drag the new App Block by its handle (the six dots) to your desired position, such as directly above the variant picker.
7. Click Save in the top right corner. Refresh your storefront to see the changes.

Method 2: Repositioning on the Side Cart (Using CSS Selectors) Most Shopify themes do not allow you to drag and drop App Blocks directly into a slide-out Side Cart. You will need to tell the Kite app exactly where to place the widget using a CSS Selector.

1. Open your storefront in your browser, add an item to your cart, and open the Side Cart.
2. Right-click on the exact area where you want the widget to appear and select Inspect (or Inspect Element). This opens your Browser Developer Tools.
3. In the Elements panel, look at the highlighted line of code and identify the class or ID name of the element. For example, it might say <div class="drawer_header">.
4. Copy that specific name (e.g., drawer_header).
5. Open the Kite app in your Shopify Admin and navigate to Settings > Widget Settings.
6. Select the specific widget you want to reposition (e.g., Free Gift Widget).
7. Paste the copied name into the Element Name field.
8. Apply the correct CSS prefix so the app knows what to look for:

• • Add a period (.) before the name if it is a Class (e.g., .drawer_header).
  • Add a hash (#) before the name if it is an ID (e.g., #drawer_header).

9. Choose whether you want the widget to show Above Selector or Below Selector.
10. Click Save and refresh your storefront to view the updated Side Cart.

Technical Note/Limitation: App Blocks are fully supported on Online Store 2.0 themes. If you are using a Vintage Shopify theme, the Theme Editor drag-and-drop functionality will not be available, and you will need to rely on the CSS Selector method for all pages. Additionally, if your Side Cart relies heavily on AJAX to re-render, the widget might occasionally require a script refresh to maintain its position after an item is added or removed.

Troubleshooting/Checklist:

• Widget isn't moving in the Theme Editor: Ensure you have added the Kite App Block from the "Apps" section and aren't confusing it with a standard theme text block.
• Side Cart widget is missing: Double-check your CSS prefix. A common mistake is using a dot (.) for an ID or forgetting the prefix entirely.
• Typo in the selector: Ensure the class or ID name is copied exactly as it appears in the Developer Tools, including hyphens or underscores (e.g., drawer-header vs drawer_header).
• Changes aren't showing up: Clear your browser cache or view the storefront in an Incognito/Private window to bypass cached versions of your site.

Updated on: 15/05/2026