> ## 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 Position Widgets on a Product Page

${youtube}[How to Position Widgets on a Product Page](06eFs74Ajeg)
This guide explains how to place Kite widgets (like Free Gift messages or Progress Bars) exactly where you want them on your Product Pages. You can use the modern **App Blocks** method (recommended) or the advanced **CSS Selector** method.
### Method 1: Using App Blocks (Recommended)
This method is the easiest and works best with modern Shopify themes (OS 2.0).
**1. Open the Theme Editor**
* Go to **Online Store > Themes** in your Shopify Admin.
* Click **Customize** next to your active theme.
* Navigate to the **Product Page** by selecting "Products" > "Default product" from the top dropdown menu.
**2. Add the Kite Widget Block**
* On the left sidebar, look for the "Product Information" section.
* Click **Add block** (or "Add section" if placing it outside the main product info).
* Scroll down to the **Apps** category and select the Kite widget you want (e.g., **Goal Based Progress Bar** or **Free Gift Widget**).
**3. Drag and Drop to Position**
* Once added, click and hold the standard six-dot handle next to the Kite block in the sidebar.
* Drag it up or down to place it exactly where you want (e.g., right above the "Buy Buttons").
* **Save** your changes.
### Method 2: Using CSS Selectors (Advanced)
Use this method if your theme doesn't support App Blocks or if you need to inject the widget into a specific area not accessible via blocks.
**1. Identify the Target Element**
* Go to your live product page.
* **Inspect Element:** Right-click on the element you want the widget to be near (e.g., the "Add to Cart" button) and select **Inspect**.
* Find the **Parent Class** name in the code (e.g., `product-form__buttons`).
* Tip: Ensure the class is unique to that section.
**2. Configure in Kite**
* Open the Kite dashboard and go to **Settings > Widget Settings**.
* Locate the **Product Page Selector** field.
* Enter the class name starting with a **dot (.)**.
* Example: `.product-form__buttons`
* **Position:** Choose **Before** (to show above buttons) or **After** (to show below).
**3. Save & Verify**
* Click **Save**. Refresh your product page to confirm the widget appears in the correct spot.
### Technical Notes & Limitations
> **Prioritize App Blocks:** Always try Method 1 first. It is more stable and won't break if you change your theme's code later. Only use CSS Selectors if App Blocks are not available or not working.
> **Conflict Warning:** Do not use both methods for the same widget simultaneously, or the widget might appear twice on the page.
### Troubleshooting Checklist
* **Widget showing twice?** Check if you have added an App Block in the theme editor and entered a CSS Selector in the Kite settings. Remove one.
* **Selector not working?** Ensure you included the **dot (.)** before the class name. Also, check if the class is unique; if the class exists in the header or footer, the widget might be trying to load there too.
* **App Block not dragging?** Ensure you are inside the "Product Information" section. Some sections are static and don't allow reordering of blocks.