Positioning Widgets on Kite App: A Step-by-Step Guide.

This guide explains how to change the position of a widget on the Kite app. It covers two methods: using selectors and using app blocks on the online store. This guide applies to all widgets, not just the free gift widget.

Using Selectors Method

Step 1: Inspect the part of the store where the widget will be placed using the selectors option.



Step 2: Use the Control Shift I shortcut to inspect the desired area.



Step 3: Copy the main parent class.



Step 4: Navigate to the Settings tab on the Kite app.



Step 5: In the JavaScript settings, under the product page selector, add the copied selector with a dot at the beginning.



Step 6: Specify that the widget will be placed below the selector.



Step 7: Save the changes.



Step 8: Refresh the page.




If the selector doesn't work, find the parent class responsible for the area and use its main ID.

Step 1: Select the main ID.



Step 2: Add the ID to the settings without a dot.



Step 3: Save and refresh the page.





Now, you can also position widgets for different discounts separately on the side cart using individual selectors:

Go to Kite -> Settings -> Custom CSS and Javascript Settings -> Individual Cart Selectors

Using App Blocks Method

If the selector method doesn't work, follow these steps:

Step 1: Navigate to the Products tab on the online store.



Step 2: Add a block and drag and drop it to the desired position.

Using Selectors Method for Cart Page

For the cart page, it's mandatory to use the selectors method:

Step 1: Inspect the part of the cart page where the widget will be placed.



Step 2: Copy the class of the desired area.



Step 3: Go back to the settings page, add the copied class to the cart selector, specify that it will be placed above the selector, and save the changes.

Refresh the page to see the changes. Reach out for further assistance if needed.

Updated on: 05/11/2024