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
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 Settings > Plugins

Setting Up

  1. Navigate to Settings > Plugins
  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 The minimum age displayed in your verification message (default: 21)

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

Add data-av-approve and data-av-cancel attributes to your buttons for the approve/cancel functionality to work.

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%)

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
Redirect Redirects the visitor to a specified URL (e.g., Google or an informational page)
Hide cancel button Only shows the approve button — visitors must confirm their age to proceed

Advanced Settings

Setting Description
Show store logo Display your store's logo above the heading
Custom CSS Add custom styles to fine-tune the modal appearance
Custom HTML Replace the modal body with your own HTML (only available with Custom design)

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-modal The modal container
.av-logo The store logo image
.av-heading The heading text
.av-message The message text
.av-buttons The button container
.av-btn-approve The approve/confirm button
.av-btn-cancel The cancel/decline button

How It Works

  1. A visitor lands on your storefront
  2. The age verification modal appears as a full-screen overlay
  3. The visitor clicks the approve button to confirm their age
  4. A session cookie (age_verified) is set in the browser
  5. The modal closes and the visitor can browse your store
  6. The modal will not appear again during the same browser session
  7. When the browser is closed and reopened, the cookie is cleared and the modal will show again

Troubleshooting

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

Solutions:

  • Verify the plugin is activated in Settings > Plugins
  • 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
  • Verify the site is served over HTTPS (cookies require a secure context)

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