> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.promoparty.app/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).

# Customizing the gift popup

The gift pop-up lets customers pick their free gift. Here's how to turn it on, change what it says, change how it looks, and control when it shows.

---

## Turn the pop-up on or off

Open your campaign and go to **Pop-up Settings**.

* **Show Pop-up for gift selection** on: customers choose their gift (product, size, color) in the pop-up.
* Off: the app adds the first available gift option to the cart automatically.

Turn it on whenever your gift has variants or you offer more than one gift product.

---

## What customers see

* A title and short description
* One card per gift product, with its image, name, and a variant menu when the product has more than one available variant
* An **Add Gift to Cart** button
* A **Skip gift** link and a close (×) button

Gift options that aren't available to buy are left out. See [What happens when gifts sell out](https://help.promoparty.app/en/article/what-happens-when-gifts-sell-out-lfpust/).

---

## Change the pop-up text

Pop-up text is managed per language on the **Translations** page (left sidebar in Promo Party Pro). You can edit:

* The pop-up title (default: "You've received a free gift!")
* The description (default: "Select your options below:")
* The button text (default: "Add Gift to Cart")
* The free-gift label shown in the cart

To set text for one campaign only, save the campaign, then click **Edit campaign translations** in its **Pop-up Settings**.

---

## Change colors, buttons, corners, and borders

Go to **Settings > Appearance**. You can change:

* Background, text, and border colors
* Button background, button text, and button hover colors
* Close button color and size
* Corner style and shadow
* Border width

The preview on the Settings page updates as you go.

---

## Control when the pop-up shows again

If a customer closes the pop-up or clicks **Skip gift**, the app waits before offering it again, so customers who said no aren't asked over and over.

Set the wait in the campaign's **Pop-up Settings** under **Re-display pop-up after dismissal**:

* **Always**: no wait
* **After 2 minutes**, **5**, **10**, **15**, or **30 minutes** (30 minutes is the default)

The pop-up only comes back when the customer **changes their cart** after the wait is over. Refreshing the page alone won't bring it back.

**Testing tip:** the wait is saved in the browser. If you skipped the pop-up while testing, use a private (incognito) window or another browser to test again.

---

## Advanced: custom CSS

Go to **Settings > Advanced**, click **Show advanced settings**, and use the **Custom CSS** box. Anything you add there is applied to the pop-up on your store.

These class names match the pop-up on your storefront:

| Part of the pop-up | CSS selector |
|---|---|
| Pop-up box | `.x-sell-modal-container` |
| Title | `.x-sell-modal-container h2` |
| Close button | `.x-sell-modal-close` |
| Gift card | `.x-sell-gift-card` |
| Gift image | `.x-sell-gift-card-image img` |
| Gift list | `.x-sell-gift-cards-grid` |
| Variant menu | `.x-sell-gift-card-variant-selector` |
| Add to cart button | `.x-sell-add-to-cart-button` |
| Skip gift link | `.x-sell-skip-gift-link` |

**Example:** make the pop-up title white.

```
.x-sell-modal-container h2 { color: #fff; }
```

**Example:** stop gift images from stretching.

```
.x-sell-gift-card-image img { object-fit: contain; height: auto; }
```

Your theme's own styles can win over yours. If a rule doesn't take effect, add `!important`.

---

## Pop-up hidden behind your theme

**Z-Index (Layer Order)** under **Settings > Advanced** decides whether the pop-up sits above your theme. It starts at the highest possible value, so the pop-up opens on top of everything. If you lowered it and the pop-up now opens behind your header, cart drawer, or another app, raise it again or clear the field.

---

## Common fixes we make for merchants

These are the requests we see most:

* **Stretched or distorted gift images**
* **A long list of gifts** that pushes the **Add Gift to Cart** button out of view. We can make the gifts scroll sideways, with arrows.
* **Close button in the wrong place**
* **Matching your brand's fonts and colors**

Our support team makes these changes for free. Open the chat in Promo Party Pro and send a screenshot of what you'd like changed.

---

## Something disappeared after a CSS change?

If part of the pop-up goes missing (for example, the variant menu), check the **Custom CSS** box for code that hides elements, such as `display: none`. Remove it and test again, or ask us to take a look.