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

# Age Verification Popup

The Age Verification Popup section shows a full-screen modal that blocks access to the store until the visitor enters their birth year and meets a minimum age. It is intended for alcohol, tobacco, or other age-restricted stores. The popup cannot be dismissed by closing, pressing Escape, or clicking outside; users must complete verification. Use **Test mode** to design and preview the popup without triggering the “already verified” logic.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FgMrGZFHzy7bG4VoeqZFZ%2Fimage.png?alt=media&amp;token=69e02341-f7f0-45a4-acce-5e6c0d7c9f82" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store > Themes > Customize**.
2. The Age Verification Popup section lives in an overlay group. If you don’t see it, open the left sidebar and check **Sections** (or the group that contains overlays) for **Age Verification Popup**; add it if your theme allows.
3. Open the **Age Verification Popup** section and make your changes.
4. Preview on different devices, then click **Save**. Remember to turn **Test mode** off before publishing.
   {% endhint %}

### Settings

* **Enable popup**: Turns the age verification popup on or off. When off, the popup never shows.
* **Test mode**: When enabled, the popup shows immediately on every page load and ignores the “already verified” check. Use this to design and preview; turn it off before publishing.
* **Minimum age**: The minimum age (in years) the visitor must be to pass verification. Range is 18–25 years. Birth year is compared to the current year to compute age.
* **Image**: Optional full-bleed background image behind the popup content. Improves visual appeal and can match your brand.
* **Media overlay opacity**: Opacity of the overlay on top of the background image (0–100%). Higher values darken the image so text stays readable.
* **Media overlay color**: Color of the overlay on top of the background image. Used with the opacity above.
* **Color scheme**: Sets the background and text colors for the popup when no background image is used, or as a base when an image is present.

***

### Blocks

#### Logo

* **Logo**: Image displayed at the top of the popup (e.g. store logo). If left blank, a placeholder graphic is shown.
* **Logo width (desktop)**: Maximum width of the logo on desktop (100–400 px). Mobile uses a smaller fixed size.

#### Heading

* **Heading**: Main title inside the popup (e.g. “Age Verification” or “You must be 18+ to enter”).
* **Heading size**: Size of the heading (S, M, or L).
* **Underline**: When enabled, adds an underline under the heading.

#### Paragraph

* **Text**: Body text below the heading. Use it to explain why age verification is required (e.g. alcohol or restricted products).
* **Text size**: Size of this text (4XS, S, M, L, XL).

#### Birth year form

* **No configurable settings.** The block renders a 4-digit birth year input (one digit per box). Users type or paste a year; the form auto-submits when all four digits are entered. Validation checks that the year is valid and that the computed age is at least the minimum age.

***

### Behavior

* **Trigger**: When the section is enabled and not in test mode, the popup shows on first visit if the visitor has not yet passed verification (no `localStorage` flag).
* **Persistence**: After successful verification, a flag is stored in `localStorage` under the key `age-verification-verified`. The popup will not show again until that key is removed (e.g. different browser/device or cleared storage).

***

### Tips

* Use **Test mode** while building the popup so you can see layout and styling without being blocked by “already verified.” Turn it off before going live.
* Set **Minimum age** to match your legal requirement (e.g. 18 or 21). The theme only supports 18–25 in the range; the actual check is “age ≥ minimum age.”
* If you use a background **Image**, increase **Media overlay opacity** so heading and form remain readable.