> For the complete documentation index, see [llms.txt](https://document.tek-labs.app/free-gift-userguide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://document.tek-labs.app/free-gift-userguide/user-guides/styling/popup-gift-type.md).

# Popup gift

Style the popup where customers view and claim their gifts.

The Popup gift shows the available gifts in an overlay. Customers can open it from anywhere in the store and claim their gifts.

<figure><img src="https://2782088585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTxhG4dtLtoZ8LGb73m7%2Fuploads%2Fgit-blob-697b54138bca57fb24f9a44e36851d1ea02580f5%2Fsp-st-popup.png?alt=media" alt="Popup gift style editor"><figcaption></figcaption></figure>

## Layouts

The popup has two layouts:

* **Detailed offers list**: lists each offer with its condition, a progress message and the gifts. A floating **Icon popup** reopens it.
* **Gifts only**: a compact popup with just the gifts and a claim button.

If your popup still uses the Detailed offers list, choose the layout in the **Layout** section. Once you switch to **Gifts only**, the layout picker disappears. Shops on the older Gifts only design see a **New Gift Only design available** banner with **Use new popup UI**.

**Preview** (Detailed offers list): choose **Automatically add gift** or **Manually choose gift**, then a state: **Condition not met**, **Condition met - before claiming** or **Condition met - after claiming**. Use the Desktop and Mobile icons to switch devices.

## Sections

Which sections you see depends on the layout and the preview state.

| Section                | Settings                                                                                                                                                                                            |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Item direction**     | **Vertical** or **Horizontal** gift list.                                                                                                                                                           |
| **Background section** | Background and border colours, border radius and width. Font family (Gifts only).                                                                                                                   |
| **Header style**       | Header and subtitle colour, size and weight; close button colour.                                                                                                                                   |
| **Offer section**      | Offer title, "Reward selection" text and "Do not show this again" text: colour, size, weight. Offer border, background and radius (Detailed offers list).                                           |
| **Progress bar**       | Upsell message colour, size and weight; bar and background colours (Detailed offers list).                                                                                                          |
| **Product section**    | Border, background, product text and price colours, text size and weight, padding, gap between product blocks (Detailed offers list).                                                               |
| **Add button**         | Text and button colour, size and weight (Detailed offers list).                                                                                                                                     |
| **Claim button**       | Text and button colour, size and weight; "Selected" text colour.                                                                                                                                    |
| **Reward section**     | Border, background and selected-border colours; reward name, discounted price and product price colours, sizes and weights; padding and item gap.                                                   |
| **Select button**      | Select and Unselect text and background colours, font size and weight.                                                                                                                              |
| **Product image**      | Image border radius and size; quantity badge and text colours.                                                                                                                                      |
| **Countdown timer**    | Timer badge, text and icon colours; size and weight.                                                                                                                                                |
| **Gift icon**          | Gifts only: show the logo, icon colour, background and radius.                                                                                                                                      |
| **Icon popup**         | Detailed offers list: the floating launcher. **Position** (Bottom left, Bottom right, Center right, Center left), text colour, **Default Icon** or **Upload Image**, icon colours and size, border. |
| **Popup animation**    | **Fade in**, **Slide in up**, **Slide in down**, **Slide in left**, **Slide in right** or **Zoom in**.                                                                                              |
| **Custom CSS**         | Your own CSS.                                                                                                                                                                                       |

{% hint style="info" %}
Hover over an element in the preview to find the setting that controls it.
{% endhint %}