# Popups

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/context/readme/theme-retirement).
{% endhint %}

{% hint style="info" %}
The Popup section was updated and the Age Verification popup was added in v5.3.0 on Oct 27, 2022. See our [change log](https://fluorescent.co/help/Context/changelog) and [Theme update guide](https://help.fluorescent.co/context/readme/theme-updates) to learn more.
{% endhint %}

The **Sign up** **popup** encourages customers to add their email to your newsletter. Context looks for "exit intent" of customers, so if they open a new tab or if their mouse accelerates to leave, the popup will appear.

Signup forms are also available in the Newsletter and Footer sections.

> **Note** | Newsletter subscribers are added to your "accepts marketing" [Customers](https://shopify.com/admin/customers?query=\&accepts_marketing=1) list. You can learn more in Shopify's guides to [Email subscriber list management](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email/email-subscriber-list-management) and [Using Shopify Email for email marketing](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email) article.

## Set up **popup**

Enable the **Popup** to appear automatically and add an image, custom message, and adjust its colors to match your store.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click to the **Popup** section to open the settings.
2. Check the **Enable** checkbox to turn on the popup feature.
3. Select the **Popup position** for where on the screen the popup should appear.

   > Choose either *Top left*, *Bottom left*, *Top right*, or *Bottom right*.

   > On mobile devices, the popup appears beneath the header at the top of the screen.
4. (*Optional*.) Change the **Close button text** when customers decline to signup.

</details>

### Add headings

Change the popup content by clicking on the **Heading** and **Subheading** blocks nested under the **Popup** section.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the **Heading** and **Subheading** blocks to edit the text.

   > We recommend a short **Heading** of less than 7 words and a **Subheading** with 1 or 2 short sentences.

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-49fadbb185e04541d684c4407c5cd0a693997cfd%2Fexit-intent-no-image.jpeg?alt=media)
2. Click **Save**.

</details>

### Add **image**

Design your popup with custom colors, images, and content layout.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Under the **Popup** section, click (**+) Add block** and select **Image**.
2. Click on the **Image** block to open the block settings and **Select image** for the the top of popup. The image does not display on mobile to avoid covering the screen.

   > We recommend a landscape (3:2) image.

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-67b9dd60eabc8b04fbc684591a8737e076257c2e%2Fexit-intent.jpeg?alt=media)
3. Click **Save**.

</details>

## Settings reference

The **Popup** section has the following settings.

| Setting           | Description                                                                                                                                             |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable            | Turn the popup feature on.                                                                                                                              |
| Popup position    | The location of the popup on desktop devices. Either Top left, Bottom left, Top right, or Bottom right. The popup appears beneath the header on mobile. |
| Close button text | Change the text for the button that closes the popup when clicked.                                                                                      |
| Image             | he image displayed at above the popup on desktop. Recommended dimensions: Landscape (3:2) image.                                                        |
| Heading           | Add text for the heading of the popup.                                                                                                                  |
| Subheading        | Add subheading text to display below the heading.                                                                                                       |