Articles on: Kite - Free Gift App

How to Customize the Free Gift’s Color, Text & Icon

This guide explains how to style the Kite Free Gift widget to match your brand, including modifying fonts, colors, icons, and text states.

Step-by-Step Customization Guide

To access the editor, navigate to your Offer setup page and click Edit and Style Widget. The editor is divided into two main sections:

1. Left Panel: Content & Configuration This area controls what the widget says.

  • Title Bar & Drop-down: Edit the headings users see.
  • Gift Options: Configure how the product details appear.
  • Messages: Customize the text displayed for the Bill and Claim buttons.
  • Icons & Pins: You can choose to change the default icon or enable/disable the "Pin" feature to keep the widget visible.

2. Right Panel: Design & Styling This area controls how the widget looks.

  • Typography: Adjust font size and font weight.
  • Color Palette: Change text colors, background colors, and button colors to match your theme.

Managing Widget States

The widget changes appearance based on the customer's cart progress. You can customize the text and colors for each specific state using the navigation at the top of the editor:

  1. Before Unlock: What the customer sees when they haven't reached the spend goal yet.
  2. Unlocked: The appearance immediately after the goal is met.
  3. Added to Cart: The state once the gift has been successfully added to the cart.

Technical Notes & Limitations

Important: The "Claim" Button LogicManual Offers: The "Claim" button is visible and necessary for the customer to add the gift to their cart.Automatic Offers: The "Claim" button will not appear because Kite adds the gift automatically when the goal is met.Opt-Out Exception: If you are using an Automatic offer but have enabled the "Opt-out" feature, a button may appear to allow customers to remove or decline the gift.
Dynamic Variables The widget supports dynamic variables (often enclosed in curly braces like {{ variable }}). These allow the widget to display real-time data, such as the remaining amount needed to unlock a gift. Avoid removing these variables if you want the text to remain dynamic.

Troubleshooting

  • Changes not showing? Ensure you clicked Save in the editor before closing it. Afterwards, click View Offer to preview the live widget.
  • Button missing? If you cannot find the "Claim" button in the preview, double-check if your offer is set to "Automatic" (see Technical Notes above).

Updated on: 20/01/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!