> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/overlay-group/age-verification.md).

# Age verification

A gate that asks visitors to confirm their age before they can browse the store. It opens on the first page a visitor lands on and stays there until they answer — there is no close button, so the store stays covered until the shopper confirms.

Use it for age-restricted catalogues such as alcohol, tobacco, or adult products.

***

## Structure

```
┌──────────────────────────────┐
│  Age Verification            │
│  ┌────────────────────────┐  │
│  │  [ Header ]            │  │  ← Subheading / Heading / Text
│  │  [ Blocks ]            │  │
│  │                        │  │
│  │  [ Accept button   ]   │  │  ← always last
│  │  [ Decline button  ]   │  │
│  └────────────────────────┘  │
└──────────────────────────────┘
```

The **Button** block always sits at the bottom of the popup and cannot be removed or reordered. Everything above it is yours to build from blocks.

![Age verification overview](/files/NaCBfXHSoGJ9ELoALWAJ)

***

## How to add it

{% hint style="success" %}

1. In the theme editor, scroll to the **Overlay group** in the section list.
2. Click **Add section** and choose **Age verification**.
3. Edit the **Header** block to write your question and legal wording.
4. Select the **Button** block to set the accept and decline labels.
5. Click **Save**.
   {% endhint %}

{% hint style="info" %}
Only one Age verification popup can be added to the store, and it applies to every page.
{% endhint %}

***

## Settings

| Setting                | Description                                                             |
| ---------------------- | ----------------------------------------------------------------------- |
| Reappear after         | How many days a confirmation is remembered before the popup asks again. |
| Alignment              | Aligns the content inside the popup left, center, or right.             |
| Gap — Desktop / Mobile | Space between the blocks inside the popup.                              |

### Background

| Setting          | Description                                                                      |
| ---------------- | -------------------------------------------------------------------------------- |
| Background image | An image shown behind the popup, covering the page instead of the plain overlay. |
| Blur image       | Softens the background image so the popup content stays easy to read.            |

### Color

| Setting              | Description                                                                     |
| -------------------- | ------------------------------------------------------------------------------- |
| Color scheme         | Color of the layer behind the popup. Available when no background image is set. |
| Content color scheme | Color scheme of the popup card itself — its background, text, and buttons.      |

{% hint style="info" %}
The popup keeps working while you edit it. Selecting the section in the theme editor reopens it, so you always see what you are changing.
{% endhint %}

***

## Button

The accept and decline buttons at the bottom of the popup. This block is built into the section — it is always present and always last.

| Setting                | Description                                                                                           |
| ---------------------- | ----------------------------------------------------------------------------------------------------- |
| Accept button label    | Text on the button that lets the visitor in. Clear it to hide the button.                             |
| Label                  | Text on the decline button. Clear it to hide the button.                                              |
| Link                   | Where the decline button sends the visitor — usually an external page explaining the age restriction. |
| Open link in new tab   | Opens the decline link in a new browser tab.                                                          |
| Style                  | Button style for the decline button, so it reads as the secondary choice next to Accept.              |
| Gap — Desktop / Mobile | Space between the two buttons.                                                                        |

{% hint style="warning" %}
Give the decline button a **Link**. Without one it does nothing when clicked, and the visitor is left facing a popup they cannot get past.
{% endhint %}

{% hint style="info" %}
The accept button is always the primary button style, so it stands out as the expected answer. Only the decline button's style can be changed.
{% endhint %}

***

## Available Blocks

Add and arrange these above the buttons to build the message.

| Block                                                 | Description                                                             |
| ----------------------------------------------------- | ----------------------------------------------------------------------- |
| [Header](/helix/theme-blocks/basic/header.md)         | A container for the subheading, heading, and text, spaced as one group. |
| [Heading](/helix/theme-blocks/basic/heading.md)       | A standalone heading line — for example, "Are you 18 or older?".        |
| [Subheading](/helix/theme-blocks/basic/subheading.md) | A smaller label above the heading.                                      |
| [Text](/helix/theme-blocks/basic/text.md)             | A rich-text block for the legal wording.                                |
| [Image](/helix/theme-blocks/basic/image.md)           | An inline image, such as your logo.                                     |