---
title: "Age Verification"
description: "Display a customizable age verification modal on your storefront"
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.firearmcart.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Age Verification

Require visitors to confirm their age before accessing your store with a fully customizable verification modal.
---

## Features

| Feature | Description |
|---------|-------------|
| **Multiple designs** | Choose from Classic, Modern, Minimal, or fully Custom HTML |
| **Background images** | Set a background image from your media library or free stock photos |
| **Store logo** | Optionally display your store logo on the modal |
| **Configurable text** | Customize the heading, message, and button labels |
| **Cancel behaviors** | Choose what happens when a visitor declines: nothing, redirect, or hide the button |
| **Date of birth** | Optional date-of-birth picker that checks the visitor's age against Minimum Age |
| **Custom CSS/HTML** | Full control with custom CSS selectors and custom HTML templates |
| **Session cookie** | Modal only shows once per browser session |

---

## Prerequisites

Before setting up, you need:

- Age Verification plugin activated from **Plugins > Marketplace**

---

## Setting Up

1. Navigate to **Plugins > Marketplace**
2. Find **Age Verification**
3. Click **Activate**
4. Navigate to **Plugins > Age Verification**
5. Configure your verification settings (see below)
6. Toggle **Enable age verification modal** to on
7. Click **Save Settings**
---

## General Settings

| Setting | Description |
|---------|-------------|
| **Enable** | Master toggle to enable/disable the modal on your storefront |
| **Minimum Age** | 18–99, default 21. When **Require date of birth** is on, this is the age the visitor must meet. When it is off, the setting is not enforced — the age the shopper sees comes from the **Message** and button text you write. |

---

## Design Templates

Choose from four design templates to match your store's look and feel.

### Classic

A centered white card with clean styling. Best for stores that want a professional, straightforward appearance.

### Modern

A glass-morphism card with backdrop blur over the background image. Creates a sleek, contemporary look — works best with a background image.

### Minimal

Simple centered text with no card border. The most understated option — text and buttons float directly over the background.

### Custom

Use your own HTML to create a completely unique design. Available placeholders:

| Placeholder | Replaced With |
|-------------|---------------|
| `{{heading}}` | Your configured heading text |
| `{{message}}` | Your configured message text |
| `{{approve_text}}` | Your approve button text |
| `{{cancel_text}}` | Your cancel button text |
| `{{dob_fields}}` | The date-of-birth month / day / year selects (empty when date of birth is off) |

Add `data-av-approve` and `data-av-cancel` attributes to your buttons for the approve/cancel functionality to work. When date of birth is required, include `{{dob_fields}}` wherever you want the picker to sit. If you leave the placeholder out, the picker is added to the end of your HTML so the modal still works — the position is just unlikely to be where you want it.

---

## Text Settings

| Setting | Description |
|---------|-------------|
| **Heading** | The modal title (e.g., "Age Verification") |
| **Message** | The body text explaining the age requirement |
| **Approve Button Text** | Text for the confirmation button (e.g., "I am 21 or older") |
| **Cancel Button Text** | Text for the decline button (e.g., "I am under 21") |

---

## Background Image

Set a background image for the full-screen overlay behind the modal.

| Setting | Description |
|---------|-------------|
| **Background image** | Select from your media library or browse free stock photos |
| **Dark overlay** | Add a dark overlay on top of the background image for better text readability |
| **Overlay opacity** | Control how dark the overlay appears (0-100%) |

The overlay only renders when a background image is set. With no background image, the modal sits on a plain 70%-black backdrop.

> **Tip:** The Modern design template looks best with a background image and a 40-60% overlay opacity.

---

## Cancel Behavior

Control what happens when a visitor clicks the cancel/decline button.

| Option | Description |
|--------|-------------|
| **Do nothing** | Simply closes the modal — the visitor can browse freely. No cookie is set, so the modal returns on the next page load. |
| **Redirect** | Redirects the visitor to a specified URL (e.g., Google or an informational page). A URL is required when this is selected. |
| **Hide cancel button** | The cancel button is not rendered at all — visitors must confirm their age to proceed |

---

## Date of Birth

Off by default. When enabled, the one-click “I am 21 or older” confirmation is replaced by a month / day / year entry. The visitor’s age is computed in the browser and compared to **Minimum Age**.

This is a **front-end UX gate, not a legal control**. Nothing is stored, nothing is enforced server-side, and a visitor can enter any date.

| Setting | Description |
|---------|-------------|
| **Require date of birth** | Show the date picker and check the visitor’s age before setting the session cookie |
| **Under-age action** | What happens when the entered date is under the minimum age (see below) |
| **Under-age error message** | Shown for the **Show an error** action. Use `{age}` to insert the current Minimum Age so the two stay in sync |
| **Under-age redirect URL** | Required when the under-age action is **Redirect**. Independent of the cancel-button redirect |

### Under-age actions

| Option | Description |
|--------|-------------|
| **Show an error** (default) | An inline message appears under the date fields. The modal stays open and no cookie is set |
| **Same as cancel** | Follows the **Cancel Behavior** redirect. If your cancel behavior is *Do nothing* or *Hide cancel button* there is nowhere to send the visitor, so the inline error is shown instead — an under-age visitor is never let through |
| **Redirect** | Sends the visitor to the under-age redirect URL, separate from the cancel action |

Incomplete or impossible dates (for example February 30) always show an inline error and never set the cookie, regardless of the under-age action.

---

## Advanced Settings

| Setting | Description |
|---------|-------------|
| **Show store logo** | Display your store's logo above the heading. Only appears if your store has a logo set. |
| **Custom CSS** | Add custom styles to fine-tune the modal appearance |
| **Custom HTML** | Replace the modal body with your own HTML (only used when the design is set to Custom and the field is not empty) |

### CSS Selectors

Use these selectors in the Custom CSS field to target specific parts of the modal:

| Selector | Target |
|----------|--------|
| `.av-overlay` | The full-screen background overlay |
| `.av-bg-overlay` | The dark tint layer over the background image |
| `.av-modal` | The modal container |
| `.av-modal-classic` / `.av-modal-modern` / `.av-modal-minimal` / `.av-modal-custom` | Design-specific modifier on the modal container |
| `.av-logo` | The store logo image |
| `.av-heading` | The heading text |
| `.av-message` | The message text |
| `.av-dob` | The date-of-birth field row |
| `.av-dob-select` | Each month / day / year select |
| `.av-error` | Inline error under the date fields |
| `.av-buttons` | The button container |
| `.av-btn-approve` | The approve/confirm button |
| `.av-btn-cancel` | The cancel/decline button |

Your custom CSS is injected after the built-in styles, so it wins on equal specificity.

---

## How It Works

1. A visitor lands on your storefront
2. The age verification modal appears as a full-screen overlay, injected at the end of the page
3. If date of birth is **off**, the visitor clicks the approve button to confirm their age
4. If date of birth is **on**, the visitor enters month / day / year and clicks approve. The browser checks that the date is real and that their age is at least Minimum Age. An under-age result follows the configured under-age action
5. On success, a session cookie (`age_verified=1`) is set in the browser, scoped to your whole site
6. The modal closes and the visitor can browse your store
7. The modal will not appear again during the same browser session
8. When the browser is closed and reopened, the cookie is cleared and the modal will show again

---

## Troubleshooting

### Modal Not Showing

**Symptoms:** The age verification modal doesn't appear on your storefront

**Solutions:**
- Verify the plugin is activated in **Plugins > Marketplace**
- Ensure the **Enable age verification modal** toggle is on
- Click **Save Settings** after making changes
- Clear your browser cookies — you may have already accepted during testing
- Clear your store's page cache

### Modal Shows Every Page Load

**Symptoms:** The modal reappears on every page, even after clicking approve

**Solutions:**
- Ensure your browser accepts cookies
- Check that no browser extensions are blocking cookies
- If your cancel behavior is **Do nothing**, clicking cancel deliberately does not set the cookie — the modal comes back on the next page

### Date of Birth Fields Not Appearing

**Symptoms:** The modal shows, but there are no month / day / year selects

**Solutions:**
- Verify the plugin is activated and **Enable age verification modal** is on
- Ensure **Require date of birth** is on
- Click **Save Settings** after turning the toggle on
- Clear your store's page cache
- If you use the Custom design, add the `{{dob_fields}}` placeholder to control where the picker sits — without it the picker is appended after your content

### Custom HTML Not Working

**Symptoms:** Custom design shows but buttons don't function

**Solutions:**
- Ensure your approve button has the `data-av-approve` attribute
- Ensure your cancel button has the `data-av-cancel` attribute
- Check the browser console for JavaScript errors

---

## Related Documentation

- [Store Settings](/store-setup/store-information) - General store configuration
- [Theme Editor](/themes) - Theme customization

Source: https://docs.firearmcart.com/integrations/age-verification/index.mdx