# Pop-up

{% hint style="info" %}
This feature is available for all types of campaigns.
{% endhint %}

### What is the Pop-up Widget?

The Pop-up Widget in the AOV Free Gift app displays promotional messages on your store, product, or cart pages. It highlights deals like gifts, discounts, or volume-based offers that shoppers can unlock by meeting specific conditions.

### Why use the Pop-up Widget?

<details>

<summary>Instantly grabs attention without disrupting browsing</summary>

Pop-ups are effective because they grab customers' attention when they are actively browsing or about to complete a purchase. With the Pop-up Widget, you can target customers at the right moment, encouraging them to take advantage of promotions and spend more.

</details>

<details>

<summary>Encourages customers to meet gift/discount conditions</summary>

Displaying a limited-time offer or exclusive discount in a Pop-up makes customers more likely to act quickly, adding more to their cart to avoid missing out on the special deal.

</details>

<details>

<summary>Drives higher engagement and conversions</summary>

A well-designed pop-up from AOV Free Gift can help reduce cart abandonment by reminding customers of available discounts or promotions before they leave the store.

</details>

<details>

<summary>Easy Setup and Customization</summary>

The AOV Free Gift app’s Pop-up Widget is designed to be easy to configure, even for merchants without technical expertise. Merchants can adjust the colors, text, and call-to-action buttons, ensuring the popup matches their brand while delivering a clear and compelling message.

</details>

### How to set up the Pop-up Widget?

{% hint style="info" %}
To give merchants **full flexibility and control**, the Pop-up feature is configured in two distinct places, each serving a different purpose:

* **Campaign ( Display setting )**

This section lets you define the message content shown inside the Pop-up for each campaign. It’s campaign-specific because different campaigns may have different offers, tones, or messages.

* **Widget Styling (Gift alerts on qualification)**

This section controls how the Pop-up looks across your storefront, regardless of the campaign. It ensures consistent design and branding across your store.
{% endhint %}

**Step 1: Navigate the Pop-up on the Campaign setting screen**

Select the **Display setting** section on the bar, then choose **Pop-up** ( second option). This will activate the pop-up on your storefront instead of the congrats bar or the floating button.

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2FmLiHlqVqniirwTeyd8Pd%2Fimage.png?alt=media&#x26;token=9d12b634-967c-46a7-9743-cbd858e81c57" alt=""><figcaption></figcaption></figure>

**Step 2: Customize Pop-up Text**

Once selected, configure the following text that will appear on the pop-up.

**Title**

* Sets the header text in the pop-up once it opens. You should highlight the excitement and exclusivity of the offer.

**Description**

* Sets the text that appears below the title in the gift pop-up to explain what users should do.

**Variant Picker (Optional)**

* Toggle it **on** if your gift products include variants and you want to allow customers to select variants and quantities directly from the pop-up.

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2Fo8fLkfAXZoFqoUAXZYth%2Fimage.png?alt=media&#x26;token=2575d578-9994-4e8e-b28d-98d358c3649e" alt=""><figcaption></figcaption></figure>

#### Step 3: Navigate the Pop-up widget

Navigate to **Widget Styling ->** **Pop-up** among the options. Choose **Customize** to start customizing the Pop-up.

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2Fp0C0HBEWdK7hmrgunHdI%2Fimage.png?alt=media&#x26;token=1d13ea12-b690-42db-834c-817a25518101" alt=""><figcaption></figcaption></figure>

*\*From the **Display setting section,** there's a shortcut you can click on the **Edit Widget** button to navigate to the Customize Widget section.*

#### Step 4: Customize Widget Style

**Select layout**\
There are three customizable layouts for the Pop Up:

* **Modern**
* **Classic**
* **Horizontal**

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2FLUg6IJiyTjkukxOidbjS%2Fimage.png?alt=media&#x26;token=7cb1866e-0b36-45c2-9e54-27ab7968e7a7" alt=""><figcaption></figcaption></figure>

**Display location**

* You can set the pop-up's display on all pages, the cart page, or the product page

**Widget theme**

* You can choose the theme for your pop-up so that you don't have to manually change its style. There are several colors to choose from, and you can try them out until you've found your desired color.

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2F2ju7jV4Z5eHzg76jCE9C%2Fimage.png?alt=media&#x26;token=824d02ff-a23c-4f8e-9d26-360a461a8d4c" alt=""><figcaption></figcaption></figure>

#### Step 5: Customize Widget Style

**Set up Pop-up Background**

* Choose whether you want the gradient banner background or not by ticking the box. Then choose a color that complements your store’s branding.

#### Set the Text Color

* Select a color that ensures the text is easily readable against the background. You can style the color of the text on the banner, normal text, and even the sale price.

**Choose an Icon**

* Select an icon that fits the theme of your promotion and adds visual interest to the Pop-up. Then, change its color as you want.

**Customize 'Add to cart' button**

* Customize the **button color** and **text colors on the button** to align with your store’s branding.

**Customize the Border radius**

* You can control how rounded the corners of your pop-up appear, helping match your store’s design style.

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2FQPZxPFfDLW2V5YRx19GO%2Fimage.png?alt=media&#x26;token=5b3f4493-99e9-49c5-a476-a7abdb3febf3" alt=""><figcaption></figcaption></figure>

#### Step 6: Customize Widget Content

**Popup text:** You can customize the text on the button according to the messages you want to deliver.

* **'Unlock Your Gift' button**
* **'Continue shopping' button**
* **'Gift(s) selected' text**

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2Fip9P8Vd2RV3UIVd9D7M1%2Fimage.png?alt=media&#x26;token=6b87c7b9-7858-49cf-8d25-c4cbefd8d84c" alt=""><figcaption></figcaption></figure>

#### Step 7: Finalizing the Popup Customization

* Utilize the preview feature on desktop and mobile versions to visualize how your customizations appear in real time

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2FTvXJSVL3SxcODv3DI75b%2Fimage.png?alt=media&#x26;token=b4c28cb1-7ecd-47be-8f8b-568a4bc86e01" alt=""><figcaption></figcaption></figure>

* Test the Pop-up on your storefront to ensure it displays correctly and functions as expected. This is an example of the pop-up displaying on your store:

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2F3K56E5NVHvKEKId5OKC8%2Fimage.png?alt=media&#x26;token=a3ed3e0b-b1d8-4743-816d-941eb9b02a8c" alt=""><figcaption></figcaption></figure>

By customizing the Pop-up, you can create a more engaging and personalized experience for your customers, encouraging them to take advantage of your promotion campaigns and enhancing their overall shopping experience.