# Popup Gift type

At the top of the page, there are viewing modes to help you review your popup layout:

* **Device View**: See how the popup will appear to your customers on both *PC* and *mobile devices*. 
* **Gift Selection:** View how the popup looks when the gift is automatically added versus when customers can manually select their gift.
  * **Automatically add gift:** Check the popup appearance when the *condition is met* or *not met*. 
  * **Manually choose gift:** Check the popup appearance when the
    * *Condition not met:* Customers are not eligible to receive the gift.
    * *Condition met - before claiming:* Customers are eligible to receive the gift but have not claimed it. 
    * *Condition met - after claiming:* Customers are eligible to receive the gift and have claimed it. 

Here is an example of how the new Free Gift popup looks on your storefront:

<figure><img src="https://2782088585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTxhG4dtLtoZ8LGb73m7%2Fuploads%2FoPy5WlDbsG0WoVsxzKOP%2Fimage.png?alt=media&#x26;token=80944eb4-67b7-4abb-a692-f408596372f9" alt=""><figcaption><p>Popup Gift</p></figcaption></figure>

{% hint style="info" %}
You can hover an element in the preview to locate the edit option.&#x20;
{% endhint %}

<figure><img src="https://2782088585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTxhG4dtLtoZ8LGb73m7%2Fuploads%2Fr1wvkN2WjgPbFW9uL4ST%2Fimage.png?alt=media&#x26;token=569cba48-c03c-4a77-8f5e-0979d36b1eb0" alt=""><figcaption></figcaption></figure>

## Background section

Modify background-related elements with the following options:

* **Background color** – Set the overall background color.
* **Close button color** – Customize the color of the close button.

## Header style

Customize the header's appearance with the following options:

* **Header text color** – Set the color of the header text.
* **Text size** – Adjust the font size of the header text.
* **Font** – Choose the font style for the header.

## Main offer section

Customize the key elements in your main offer section to ensure it aligns with your store’s branding and user experience.

* **Offer title**
  * **Text size**: Adjust the font size of the offer title.
  * **Font**: Choose the font style that best matches your store’s theme.
  * **Text color**: Select the color for the offer title text.
* **View more/View less text**
  * **Text size**: Set the size for the “View more” or “View less” text.
  * **Font**: Pick a font style for the texts.
  * **Text color**: Choose a color for the text.&#x20;
* **Upsell message block**
  * **Text size**: Adjust the size of the upsell message.
  * **Font**: Pick a font style for the message.&#x20;
  * **Text color**: Choose a color for the upsell message.
  * **Background color**: Set the background color of the upsell block.
  * **Padding**: Adjust the padding to add spacing around the upsell message.
  * **"Add" button and quantity selector color:** Choose a color for the "Add" button.
* **Border**:
  * **Border color**: Set the color of the button's border.
  * **Border width**: Define the thickness of the border around the button.
  * **Border radius**: Adjust the roundness of the button's corners.

## **Product Detail Section**

Customize the item colors in the product detail section to match your store’s design:

* **Free text color**: Set the color for the free text displayed in the product detail section.
* **Product text color**: Choose the color for the required products' names and prices.
* **Price text color**: Customize the original price color of the gift item.

## **Manually Choose Gift Section**

{% hint style="success" %}
This section is displayed only when you select the "**Customer manually select gift**" option in your Free Gift rule setup.
{% endhint %}

* **Selected text color**: Customize the color of the text indicating the selected gift.
* **Claim Button**
  * **Text size**: Adjust the size of the button text.
  * **Text weight**: Set the thickness of the text on the button.
  * **Font**: Choose a font style, or upload a custom offline font to apply it to the popup.
  * **Text color**: Select the color for the text on the button.
  * **Background color**: Pick the background color for the Claim button.
  * **Padding**: Adjust the padding around the button text.

## **Gift Icon**

Customize the appearance of the gift icon in the popup with the following options:

* **Position**: Set the position of the gift icon within the popup.
* **Text color**: Choose the color for the text associated with the gift icon.
* **Use the default icon or upload an image**: Select whether to use the **default gift icon** or **upload a custom image** to serve as the gift icon in the popup.
* **Border color**: Set the color of the border around the gift icon.
* **Border radius**: Adjust the roundness of the icon’s border corners.
* **Border width**: Define the thickness of the border around the gift icon.

## **Animation**

* **Popup animation**: Choose the type of animation you’d like for the popup to appear (e.g., fade-in, slide-in, etc.).
* **Confetti effect**: Decide whether to **display a confetti effect** when customers meet the free gift condition or hide it from the frontend.

## Custom CSS section <a href="#customization-options" id="customization-options"></a>

* This section allows you to customize the popup with CSS code, giving you full control over its appearance and layout, thereby ensuring the popup aligns perfectly with your store’s style.
* If you’re unable to do it, don’t worry! Just click the **Contact Us** button, and our team will assist you right away.

{% hint style="info" %}
In case you want to change the text of buttons and messages, please go to the [**Translation**](https://document.tek-labs.app/salepify-userguide/user-guides/translation) section or **contact us** for further assistance.
{% endhint %}

If you have any questions, just send us a message via Live Chat or email us at **<support@tek-labs.app>**. Good luck with your promotion campaign! :heart: