# Age verification

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

![](/files/NdIzxCgcek6AISqrWvWb)

## **Add age verification popup**

***

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></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 **Accent** text to display a small label above the main heading.

   > We recommend one or two words that label what the popup is about.
4. Enter **Heading** text for the title of your popup.

   > We recommend a short title of a few words.

   > Set the **Heading Size** to **Small**, **Medium**, or **Large**.
5. Enter **Subheading** text to display below the heading.

   > Add a few sentences to tell customers about the requirements to shop at your store.
6. Enter **Text** to display below the headings.

   > Add a few sentences to tell customers the required age to enter your site.
7. (*Optional*.) Change the default **Verify button text** ("Enter").
8. (*Optional*.) Change the default **Decline button text** ("Exit") and **Decline button link**.

   > By default exit link goes to google.com. Click the field to change which site visitors will be redirected to if they decline.
9. (*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.
10. Click **Save**.

</details>

### **Design**

***

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

<details>

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

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

1. If using the **Flyout popup**, select the **Flyout position** to display it on the **Bottom left** or **Bottom right** on desktop screens.
2. Set the **Popup size** to **Small**, **Medium**, or **Large**.
3. Select the **Content alignment** to position the headings and buttons to the **Left**, **Right**, or **Center** of the popup.
4. Add an **Image** to show within your Popup.

   > Set the **Image position** to the **Top**, **Center**, or **Left** or use it for the entire popup **Background**.

   > Select the **Image focal point** to choose which area of the image to keep centered and visible.

   > Choose whether to **Show image on mobile**. If enabled, the image will always appear as the background on mobile.
5. Select custom colors for the **Background**, **Text**, and **Buttons**.
6. (*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
7. Click **Save**.

</details>

<br>

***

> **Related links**\
> [Promotional popup](/stiletto/sections/popups/promotional-popup.md)\
> [Countdown popup](/stiletto/sections/popups/countdown-popup.md)\
> [Sign up popup](/stiletto/sections/popups/sign-up-popup.md)


---

# 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/stiletto/sections/popups/age-verification.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.