How to Add a Compliant Age Verification Gate to Shopify (Without Slow Apps)

By Valkyrie Built | Updated: January 20, 2026

If you sell wine, vape products, or CBD, you are legally required to verify the age of your visitors.

Most merchants solve this by installing an "Age Gate" app. The problem? These apps often load after the rest of the site, meaning the user sees the products for 2 seconds before the popup slams into their face. It looks glitchy and unprofessional.

A native Age Gate should load instantly, block the screen immediately, and remember the user so they don't have to click "Yes" on every single page refresh.

In this guide, we will build a session-based Age Gate using 20 lines of vanilla JavaScript.

Step 1: The HTML (The Curtain)

We need a full-screen overlay that physically blocks clicks. Add this to your `theme.liquid` right after the opening `<body>` tag.

Step 2: The CSS (The Blur)

We want a modern "frosted glass" effect, not just a black box. Add this to your CSS:

.age-gate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px); /* The Blur Effect */
  z-index: 999999; /* Always on top */
  display: flex;
  justify-content: center;
  align-items: center;
}

.age-gate-content {
  background: #111;
  color: #fff;
  padding: 50px;
  text-align: center;
  border: 1px solid #333;
  max-width: 500px;
}

.age-gate-buttons {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  justify-content: center;
}

Step 3: The Logic (Session Storage)

We don't want to use "Cookies" (which are persistent). We want sessionStorage. This remembers the user as long as their tab is open, but resets if they close the browser (which is safer for compliance).

Add this script inside your `theme.liquid`:

Need stricter compliance?

For some regions, a simple button isn't enough. We build integrations with ID-Verification APIs (like Veratad or BlueCheck) directly into your checkout.

Verify Your Compliance

Does this hurt SEO?

No. Google Bots are smart enough to read the content "behind" the popup. Unlike a redirect (which sends the bot away), this method keeps your content in the DOM (Document Object Model), so Google can still crawl your keywords while keeping users out.

Summary

Compliance doesn't have to be ugly.

By building this natively, you ensure it matches your brand's fonts and colors perfectly, and it loads instantly without a "flash" of restricted content.

Need custom compliance logic? Let's build a safe, fast store.