Javascript Age Gate For Shopify (21+, 18+)

A Foxco client has a Shopify store with too many apps which slows the site down (and of course they all cost some amount of money each month).

Because it’s an alcohol delivery and gift site by law shoppers must be over 21 years old or older. Hey check out the site if you like top shelf whiskey, rum, gin, bourbon, wine, tequila etc it’s called Sipsy.com 🙂

Many other sites require you to be 18+ for a variety of reasons. Anyhow, below is the javascript code with instructions on how to add it to your Shopify store. I’ve highlighted the areas in yellow that you might want to change. If you like this js please consider using Foxco.net as your redirect URL (too many people use Disney.com and they don’t really deserve all those backlinks IMO).

If anyone requests it i’ll make a lightweight wordpress plugin based on this with styling tools — or you can just install the .js below yourself.

/**
 * Foxco Shopify Age Gate - 21+ Verification (with 30s delay after full page load)
 * 
 * Installation Instructions:
 * 1. Go to Shopify Admin > Online Store > Themes
 * 2. Click "Actions" > "Edit code"
 * 3. Under "Assets", click "Add a new asset" and create "age-gate.js"
 * 4. Paste this entire code inside
 * 5. In your theme.liquid file, before </body> add:
 *    <script src="{{ 'age-gate.js' | asset_url }}" defer></script>
 */

window.addEventListener('load', function() {
  // Run the age gate script after 30 seconds of full page load
  setTimeout(function() {

    (function() {
      'use strict';

      const AGE_GATE_CONFIG = {
        minimumAge: 21,
        cookieName: 'age_verified',
        cookieDays: 30,
        redirectUrl: 'https://www.google.com' // Where to send users who don't meet age requirement
      };

      // Check if user has already been verified
      function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
        return null;
      }

      // Set verification cookie
      function setCookie(name, value, days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        const expires = `expires=${date.toUTCString()}`;
        document.cookie = `${name}=${value};${expires};path=/;SameSite=Lax`;
      }

      // Check if already verified
      if (getCookie(AGE_GATE_CONFIG.cookieName) === 'true') {
        return; // User already verified, exit
      }

      // Create age gate HTML
      const ageGateHTML = `
        <div id="age-gate-overlay" style="
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #00ffda;
          z-index: 999999;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        ">
          <div style="
            background: white;
            padding: 50px 40px;
            border-radius: 12px;
            max-width: 450px;
            width: 90%;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
          ">
            <h2 style="
              margin: 0 0 15px 0;
              font-size: 32px;
              color: #333;
              font-weight: 600;
            ">Age Verification</h2>
            
            <p style="
              margin: 0 0 40px 0;
              font-size: 18px;
              color: #666;
              line-height: 1.5;
            ">Are you ${AGE_GATE_CONFIG.minimumAge} years of age or older?</p>
            
            <button id="age-gate-yes" style="
              background: #333;
              color: white;
              border: none;
              padding: 18px 60px;
              font-size: 24px;
              border-radius: 8px;
              cursor: pointer;
              font-weight: 600;
              width: 100%;
              transition: background 0.3s;
              margin-bottom: 15px;
            ">YES</button>
            
            <button id="age-gate-no" style="
              background: transparent;
              color: #999;
              border: none;
              padding: 8px;
              font-size: 14px;
              cursor: pointer;
              font-weight: 400;
              text-decoration: underline;
              transition: color 0.3s;
            ">No</button>
          </div>
        </div>
      `;

      // Insert age gate into page
      document.body.insertAdjacentHTML('beforeend', ageGateHTML);

      // Handle YES button
      document.getElementById('age-gate-yes').addEventListener('click', function() {
        setCookie(AGE_GATE_CONFIG.cookieName, 'true', AGE_GATE_CONFIG.cookieDays);
        document.getElementById('age-gate-overlay').style.display = 'none';
        document.body.style.overflow = '';
      });

      // Handle NO button
      document.getElementById('age-gate-no').addEventListener('click', function() {
        window.location.href = AGE_GATE_CONFIG.redirectUrl;
      });

      // Prevent scrolling when age gate is active
      document.body.style.overflow = 'hidden';

    })();

  }, 20000); // 20 seconds delay

});