> For the complete documentation index, see [llms.txt](https://document.tek-labs.app/salepify-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/salepify-userguide/user-guides/styling/popup-old-version-type.md).

# 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!