# Popup old version type

At the top of the page, there are two 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 Eligibility:** Check the popup appearance for customers who are either *eligible* or *not eligible to receive a gift*.

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

<figure><img src="/files/u8Y82itl1i8JscCWAPYe" alt=""><figcaption><p>Old Free Gift popup type</p></figcaption></figure>

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

<figure><img src="/files/CtmXIql2vyfrnvGfZYI9" alt=""><figcaption></figcaption></figure>

## Container style <a href="#customization-options" id="customization-options"></a>

Customize the container's appearance, including:

* Border color
  * Border radius
  * Border width
* Background (of the container) color

## Gift icon style <a href="#customization-options" id="customization-options"></a>

Change the gift icon style by using either of:

* Default icon (from Salepify). In this case, you can customize the Icon color
* Upload image to use as an icon&#x20;

## Header style <a href="#customization-options" id="customization-options"></a>

Adjust the header's style:

* Choosing the color for the&#x20;
  * Block header text color
  * Header subtitle color&#x20;
* Adjust the Padding

## Product item style <a href="#customization-options" id="customization-options"></a>

Customize the item color to align with your store's design:

* Free text and Checkbox color
* Product text color
* Price text color

## Button style <a href="#customization-options" id="customization-options"></a>

> This button will display when your customers are eligible to receive a gift.

Here are some elements of a claim button that you can modify:

* Text size
* Text weight
* Text color
* Background color
* Padding

## Confetti effect section <a href="#customization-options" id="customization-options"></a>

Decide to show the confetti effect of not when your customers meet the free gift condition.&#x20;

## 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** section or **contact us** for further assistance.
{% endhint %}

(gắn link sang doc Translation)

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!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://document.tek-labs.app/salepify-userguide/user-guides/styling/popup-old-version-type.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.