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
- Navigate to Plugins > Marketplace
- Find Age Verification
- Click Activate
- Navigate to Plugins > Age Verification
- Configure your verification settings (see below)
- Toggle Enable age verification modal to on
- 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
- A visitor lands on your storefront
- The age verification modal appears as a full-screen overlay, injected at the end of the page
- If date of birth is off, the visitor clicks the approve button to confirm their age
- 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
- On success, a session cookie (
age_verified=1) is set in the browser, scoped to your whole site - The modal closes and the visitor can browse your store
- The modal will not appear again during the same browser session
- 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-approveattribute - Ensure your cancel button has the
data-av-cancelattribute - Check the browser console for JavaScript errors
Related Documentation
- Store Settings - General store configuration
- Theme Editor - Theme customization