# Popup with image

The popup section in Palo Alto can be used as a newsletter popup or as a sales promotion tool to display custom messages and promo codes based on where the customer arrives from, is viewing, and how they are interacting with your site.  

There are three different section blocks:

* [Popup with image](https://palo-alto.presidiocreative.com/palo-alto-4.1/popup/palo-alto-popup)
* [Cookie consent](https://palo-alto.presidiocreative.com/palo-alto-4.1/popup/cookie-consent)
* [Popup bar](https://palo-alto.presidiocreative.com/palo-alto-4.1/popup/popup-bar)

We go into more details about each block in their own posts linked above.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/8fxULfPhyWEsbmD29OSL/popup-blocks.jpg)

## Popup Behavior

There are four behavior options that you can control from the block settings:

* [Target Page](#target-page)
* [Target Referrer](#target-referrer)
* [Target Device](#target-device)
* [Delay appearance](#delay-appearance)

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/6Gpe4SIUE1zUE1Zg0oGZ/popup-target.jpg)

### Target Page

Display a custom popup to your customers only when the customer is browsing a certain page, product, collection, or blog post on your site. Target your message based on where customers are browsing on your site:

{% hint style="success" %}
Create different popups and messages for various pages of your site.
{% endhint %}

### Target Referrer

Target a specific audience by using Target Referrer. Your popup will only appear when the customer arrives at your site from a certain path or location.

{% hint style="success" %}
Enable when running a promotion on another site. Customize message based on the source.
{% endhint %}

{% hint style="success" %}
Use to provide a custom discount code to your customers when they arrive from a social media or other paid promotion.
{% endhint %}

### Target Device

Create a custom popup for mobile devices and another popup for desktop browsers with Target Device. Each popup can be customized with different assets and messaging.

{% hint style="success" %}
Enable custom popups for mobile and desktop.
{% endhint %}

### Delay appearance

Use 'Delay appearance' to delay the popup from showing on the page. There are four different delay options:

{% tabs %}
{% tab title="Show immediately" %}
Displays the popup as soon as the page is loaded.
{% endtab %}

{% tab title="Show 10 seconds after page load" %}
Displays the popup ten seconds after the page is loaded.
{% endtab %}

{% tab title="Show after user scrolls to page bottom" %}
Displays the popup after the user scrolls to the bottom of the page.
{% endtab %}

{% tab title=" Show after user has been idle for 1 minute " %}
Displays the popup after the user has been idle for one minute.
{% endtab %}
{% endtabs %}