# Popups

{% 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 [changelog](/lorenza/readme/changelog.md) and [theme update guide](/lorenza/readme/theme-updates.md) to learn more.
{% endhint %}

Lorenza 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](/lorenza/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.

   ![](https://github.com/fluorescent/kb-lorenza/blob/main/.gitbook/assets/popup-settings.jpeg)
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 about your promotion or let them know what they can expect when they subscribe to your newsletter.

   Leave this field blank to remove the subheading.
5. (*Optional*.) Choose whether to **Enable newsletter signup** by clicking the checkbox. The signup is enabled by default.
6. Select the **Popup position** to display it on the **Top left**, **Top right**, **Bottom left** or **Bottom right** on desktop screens.
7. Upload and select an **Image** to display at the top of the popup, above the headings.

   We recommend a landscape (3:2) image.

   ![](/files/4YwRceLHmYsnJYja9UPY)

   ![](/files/UaZ0IkL4WFmlXoluv2UY)
8. Use the color selector to change the **Text**, **Background**, and **Border** colors.
9. Click **Save**.

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

![](/files/4YwRceLHmYsnJYja9UPY)

## Age Verification

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

<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.

   ![](https://github.com/fluorescent/kb-lorenza/blob/main/.gitbook/assets/popup-age-settings.jpeg)
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. Leave this field blank to remove the footer text.
8. Upload and select an **Image** to display at the top of the popup, above the headings.

   We recommend a landscape (3:2) image.
9. Use the color selector to change the **Text**, **Background**, and **Border** colors.
10. (*Optional*.) Select an **Overlay color** to display overtop of the image and adjust the **Overlay opacity** using the slider.

    The **Overlay** lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're readable.

    Set the opacity to *0%* to turn off the overlay color; set it to *100%* to create a solid color block with no image.
11. (*Optional*.) Click the **Overlay gradient** option to add a color overlay that fades across a range of hues.

    You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more.
12. Click **Save**.

</details>

![](/files/khEOKhaBuqaGDcMYDaa5)


---

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