# 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](https://help.fluorescent.co/ira/readme/theme-updates) 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](https://help.fluorescent.co/ira/sections/theme-sections/newsletter) 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](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-dbba41655fad3074f09f9d7fd41b15ff7561310d%2Fpopup-image-top.jpeg?alt=media)

   ![Center image position](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-38743400ddd4f543ce5e5a2563f5b5ac2535489f%2Fpopup-image-center.jpeg?alt=media)

   ![Bottom image position](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-2752148b52aefc8df166ddd29a386df9d236fea7%2Fpopup-image-bottom.jpeg?alt=media)
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>