How to Position Widgets on a Product Page

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.

Updated on: 23/01/2026