Kite Widget Editor Overview

Kite’s Widget Editor lets you maximize your offer's visibility by deploying customizable, global widgets—like Announcement Bars and Banners—across your home, product, and cart pages. You can fully tailor the messaging, timers, and design, then publish them instantly using Kite's Automatic Placement or manually via Shopify Theme App Blocks.

Once you successfully create a discount offer in Kite, you will be directed to the Offer Display section. From here, you can set up global widgets to ensure your customers never miss an active deal.

1. Content & Messaging Customization

• Dynamic Variables: Personalize your widget text automatically. Dynamic variables update in real-time based on the specific discount (e.g., showing the exact percentage off or amount required to unlock a tier).
• Countdown Timers: Create urgency by enabling a timer. You can set a fixed duration or a specific end date/time. You also control what happens when the timer hits zero: Restart, Do Nothing, or Hide Timer.
• Call-to-Action (CTA): Drive conversions by adding a custom CTA button or hyperlinking the entire banner to a specific product or promotional page.
• Custom HTML: If the native design tools don't fit your exact vision, you can bypass them by pasting a custom HTML banner (generated by your developer or an AI tool) directly into the editor.
• Multi-Language Support: Localize your offers by selecting a target language and inputting translated text for your international markets.

2. Design & Styling Navigate to the Design section to ensure the widget matches your brand seamlessly. You can modify themes, colors (for backgrounds, text, and individual elements), adjust padding, change icon sizes, and update typography styles.

3. Targeting & Placement Kite offers two primary ways to place your widgets on the storefront:

• Automatic Placement (Recommended): This is the quickest method. By enabling Automatic Placement, Kite dynamically injects the widget into standard locations. For example, Banners will automatically appear just below the price and quantity selector on product pages.
• Custom Placement (Shopify App Blocks): For granular control, select Custom Placement and click "Place on Store." This opens the Shopify Theme Editor. Under the Apps section of your desired page template, search for your Kite widget (e.g., "Announcement Bar") to add it as an App Block. You can then drag and drop it exactly where you want it.
• Page Targeting: For Banners, you can dictate exactly where they appear. Choose to display them globally, only on specific product pages, or exclusively within certain collections.

Technical Note/Limitation:

• Shopify OS 2.0 Requirement: Custom placement relies on Shopify's native App Blocks, which are only supported on Online Store 2.0 themes. If you are using a vintage theme, Automatic Placement or Custom HTML/Liquid insertion will be required.
• Side Cart Compatibility: While widgets can be added to standard Cart pages easily, displaying them in a Side Cart (Drawer Cart) can be complex. Because side carts often use custom AJAX code or third-party apps, standard App Blocks may not render or refresh dynamically when the cart state changes. If your side cart doesn't update the widget correctly, custom CSS selectors or specific theme integrations may be required.

Troubleshooting/Checklist:

• Widget not showing on the storefront? Ensure that you have toggled Kite's App Embed on in your Shopify Theme Settings.
• Custom placement block isn't appearing? Double-check that you hit "Save" in both the Kite app and the Shopify Theme Editor after dragging the App Block onto the page.
• Wrong product showing the banner? Review your placement targeting settings to ensure you haven't accidentally isolated the banner to a specific collection or excluded the product in question.
• Translations not appearing? Verify that your Shopify Market settings align with the language you configured in the Kite multi-language setup.

Updated on: 22/07/2026