> For the complete documentation index, see [llms.txt](https://vshop.gitbook.io/vshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vshop.gitbook.io/vshop/theme-sections/offer-popup.md).

# Offer Popup

The Offer Popup Section displays a special offer or product recommendation when visitors are about to leave your site — helping reduce bounce rate and encourage conversions.

To customize the Offer Popup in our theme please follow the steps:

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Offer Popup**
3. **Save**
   {% endhint %}

## **Section Settings**

* **Enable popup** – Activate or disable the popup.
* **Delay in sec** – Time delay before showing (e.g., *10 seconds*).
* **Days expired (cookie)** – Duration before the popup reappears to the same visitor (e.g., *0 day* = always show).
* **Color scheme** – Choose theme style (e.g., *Scheme 2*).
* **Heading** – Title text for popup (e.g., *Recommended Products*).
* **Image** – Optional image or banner to attract attention.
* **Image ratio / Custom ratio** – Keep image proportions consistent (*21:9* recommended).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FbrGaCCUqAuND0F7Ohrx3%2Fimage.png?alt=media&amp;token=125b34b1-1eb4-45b3-9ecf-25b3e2759f34" alt=""><figcaption></figcaption></figure>

***

**Product List Settings**

* **Color scheme** – Apply consistent design (*Scheme 1*).
* **Product list** – Select which products to display.
* **Limit product** – Set the number of items shown (e.g., *5*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F2ua1gIAiBijXNSO26kwW%2Fimage.png?alt=media&amp;token=d602bbd3-083f-42ed-b1a8-913112b4063e" alt=""><figcaption></figcaption></figure>

***

## Block Settings

### **Text Block**

* **Text** – Main message (e.g., *WAIT! BEFORE YOU LEAVE*).
* **Font size text** – Adjust text size (e.g., *20px*).
* **Font weight text** – Set boldness (e.g., *400*).
* **Margin bottom** – Add spacing below the text (e.g., *10px*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FHAzYhX6xFsOQ6zMY0SBc%2Fimage.png?alt=media&amp;token=7574c1db-703c-4f12-8cc4-29bf3dd4c83c" alt=""><figcaption></figcaption></figure>

***

### **Discount Block**

* **Discount code** – Input promo code (e.g., *VSHOP2026*).

  > Maximum 20 characters.

  <figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FY2cWO39NYnhB850CNE83%2Fimage.png?alt=media&amp;token=364c31f2-dfb5-4570-a803-b4375a89aa49" alt=""><figcaption></figcaption></figure>

***

### **Button Block**

* **Button label** – Call-to-action text (e.g., *Grab the discount*).
* **Button link** – Choose target page (e.g., *All collections*).
* **Open link in new tab** – Toggle ON/OFF depending on preference.
* **Type button** – Choose style (*Underline*, *Primary*, *Secondary*, etc.).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FfoXhChxMfrZbzMK0YZPD%2Fimage.png?alt=media&amp;token=89f09ac8-9936-47cf-8a26-3fcb15b5bd4c" alt=""><figcaption></figcaption></figure>

***

💡 **Tips:**

* Use a short, urgent message (e.g., *Don’t leave yet — get 10% off!*).
* Pair with a product list or coupon to drive engagement.
* Test different delays (5–10s) for optimal performance.