# Popups

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> Ira 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://github.com/fluorescent/kb-ira/blob/main/sections/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/Ira/changelog) and [theme update guide](/ira/readme/theme-updates.md) to learn more.
{% endhint %}

Ira has two types of **Popups**: Promo popup (with optional newsletter sign-up) and Age Verification. Customize your popups with custom colors, images, and promotional text.

## Promo (Sign Up)

The regular **Popup** can be used for promotions as well as a newsletter signup.

{% hint style="info" %}
Sign up forms are also available in the [Newsletter](/ira/sections/theme-sections/newsletter.md) and Footer sections.
{% endhint %}

<details>

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

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

1. Click the arrow next to the **Popup** section to show the nested content blocks.
2. Click **(+) Add block** and select **Popup**.

   > Click the new **Popup block** to open the settings.

</details>

> Newsletter subscribers are added to your "accepts marketing" [Customers](https://shopify.com/admin/customers?query=\&accepts_marketing=1) list. You can learn more about how to manage Shopify customer emails from their [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.

### Change c**ontent and style**

Customize the headings, text, and colors of your Popup.

<details>

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

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

1. Change the **Heading** and **Subheading** text.
2. Change and match the **Background**, **Text**, **Input background**, and **Input text** color.

   > Click on the color swatch to use the color selector or add a hexcode. Use the **Currently used** colors to ensure a perfect match with your other site colors.
3. Click **Save**.

</details>

### Add b**ackground 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. (*Optional*.) Click **Select image** to choose an uploaded image for the popup background.

   > There are no required image dimensions or orientation.
2. Select the **Image position** to show the *Top*, *Center*, or *Bottom* portion of your image.

   ![Top image position](/files/ozWTA1Ca9BM9UHaTY6Fr)

   ![Center image position](/files/vZKLUR9ll1xKHZPtN3mk)

   ![Bottom image position](/files/pg2Pz8pqSNr4wsXvtBo3)
3. Use the slider to change the **Image opacity**.

   > 0% makes the image totally transparent and 100% makes the image totally opaque.
4. Click **Save**.

</details>

## Age Verification

The **Age Verification** popup appears when a customer first visits your store. They must click the verify button before proceeding.

The **Age Verification** popup appears when a customer first visits your store. They must click the verify button before proceeding.

## **Add popup**

<details>

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

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

1. Click the arrow next to the **Popup** section to show the nested content blocks.
2. Click **(+) Add block** and choose **Age verification**.

   > Click the new **Popup block** to open the settings.
3. Enter **Heading** text for the title of your popup.

   > We recommend a short title of a few words.
4. Enter **Subheading** text to display below the heading.

   > Add a few sentences to tell customers about the requirements to shop at your store.
5. (*Optional*.) Change the default **Verify button text** ("Enter").
6. (*Optional*.) Change the default **Decline button text** ("Exit") and **Decline button link**.

   > By default exit link goes to your store's password page. Click the field to change which site visitors will be redirected to if they decline.
7. (*Optional*.) Enter the **Footer text** to display a short note at the bottom of the popup.

   > The Footer text works well for disclaimers or additional information.
8. Click **Save**.

</details>

### **Design**

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. Click **Select image** to choose an uploaded image for the popup background.
2. Set the **Image position** to center the **Top**, **Center**, or **Bottom** area of your image.
3. Use the color selector to change the **Text**, **Button text**, and **Button background** colors.
4. (*Optional*.) Select an **Overlay** color and enable it by increasing the **Overlay opacity** with the slider.

   > These settings help make your text clear and readable by increasing the contrast between the text and background image
5. Click **Save**.

</details>


---

# 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/ira/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.
