# 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](/context/readme/theme-retirement.md).
{% 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](/context/readme/theme-updates.md) 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.

   ![](/files/swesnEf8H6LSaxLDfu5f)
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.

   ![](/files/iRnFjR0dJU1J1I41TuGL)
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.                                                                                                       |


---

# 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://help.fluorescent.co/context/sections/popups.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.