If you’re running a website with age-restricted content—such as alcohol, tobacco, vape, CBD, or adult materials—adding an age verification pop-up is not just smart, it’s often legally required.
In this guide, we’ll show you how to add a simple, effective, and cookie-based age verification pop-up to any Squarespace website without using third-party plugins.
Why You Need an Age Verification Popup
An age gate, or age verification pop-up, ensures that only users above a certain age (usually 18 or 21) can access your content. This is important for:
- Legal compliance (alcohol, vape, adult sites)
- Protecting your brand
- Reducing liability
Squarespace doesn’t offer a native age verification feature, but with a few lines of code, you can easily add your pop-up.
What You’ll Learn in This Guide
✅ Add a pop-up with the message: “Are you 18 or older?”
✅ Two-button design: Yes (enter site), No (block access)
✅ Block access if “No” is selected (inline warning message shown)
✅ Cookie-based system remembers verified users for 3 days
✅ Mobile-friendly and customizable
Prerequisites
- A live Squarespace website (7.0 or 7.1)
- Access to Code Injection (available on Business plan or higher)
Step-by-Step Guide to Add Age Verification Popup on Squarespace
✅ Step 1: Log In and Navigate to Code Injection
- Go to your Squarespace dashboard.
- Navigate to:
Settings → Advanced → Code Injection - Locate the Header section.
Step 2: Copy and Paste This Full Code
Paste the following HTML + CSS + JavaScript into the Header section:
<!--
Age Verification Popup for Squarespace
Created by Sukesh Das: https://sukeshdas.com/
Version: 1.0
Please do not remove credit if you reuse this code.
-->
<style>
/* Sukesh Custom Popup Styles */
#age-verification-popup {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
font-family: Arial, sans-serif;
}
.age-verification-box {
background: #fff;
color: #000;
padding: 30px;
text-align: center;
max-width: 400px;
border-radius: 5px;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.age-verification-box h2 {
font-size: 18px;
margin-bottom: 15px;
}
.age-verification-buttons {
margin-top: 10px;
display: flex;
justify-content: center;
gap: 20px;
}
.age-verification-buttons button {
padding: 12px 25px;
border: 1px solid #ccc;
font-weight: bold;
cursor: pointer;
background-color: white;
transition: 0.2s ease;
}
.age-verification-buttons button:hover {
background-color: #eee;
}
/* NO button active style */
.age-verification-buttons button.active-no {
background-color: #f8d7da;
border-color: #f5c2c7;
color: #721c24;
}
#age-error {
color: red;
font-size: 14px;
margin-top: 10px;
display: none;
}
.terms-note {
font-size: 12px;
color: #555;
margin-top: 20px;
}
</style>
<!-- Sukesh Custom HTML -->
<div id="age-verification-popup" style="display: none;">
<div class="age-verification-box">
<h2>Welcome<br>Are you 18 or older?</h2>
<div class="age-verification-buttons">
<button id="age-yes">YES</button>
<button id="age-no">NO</button>
</div>
<div id="age-error">Sorry, your age does not permit you to enter at this time.</div>
<div class="terms-note">
By entering this site you are agreeing to the Terms of Use and Privacy Policy.
</div>
</div>
</div>
<script>
/* Sukesh Custom Functions - Please keep credit */
function sukeshSetCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + (days*24*60*60*1000));
document.cookie = name + "=" + value + ";expires=" + d.toUTCString() + ";path=/";
}
function sukeshGetCookie(name) {
const cname = name + "=";
const decodedCookie = decodeURIComponent(document.cookie);
const ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(cname) == 0) return c.substring(cname.length, c.length);
}
return "";
}
document.addEventListener("DOMContentLoaded", function() {
console.log("Age verification script by Sukesh is running...");
if (sukeshGetCookie("ageVerified") !== "true") {
document.getElementById("age-verification-popup").style.display = "flex";
}
document.getElementById("age-yes").addEventListener("click", function() {
sukeshSetCookie("ageVerified", "true", 3); // 3 days
document.getElementById("age-verification-popup").style.display = "none";
});
document.getElementById("age-no").addEventListener("click", function() {
const noButton = document.getElementById("age-no");
noButton.classList.add("active-no"); // make NO button look active
document.getElementById("age-error").style.display = "block";
});
});
</script>Step 3: Save and Test
- Open your website in a private/incognito window
- The pop-up should appear on all pages
- If the user clicks Yes, they’ll gain access and won’t see the pop-up again for 3 days
- If the user clicks No, an inline red message appears, and they can’t access the site
Bonus Tips
✅ Customize the Popup
- Change the text to “Are you 21+?” or use another language
- Edit the styles and colors in the CSS section
- Add a redirect to Google or another site if “No” is selected (optional)
Frequently Asked Questions (FAQ) About Adding an Age Verification Popup in Squarespace
1. Why should I add an age verification pop-up to my Squarespace website?
An age verification pop-up helps you comply with legal requirements for adult-themed content, such as alcohol, tobacco, or gambling, by confirming that visitors are of legal age before accessing your site.
2. Will an age verification pop-up affect my Squarespace website’s SEO?
No, if implemented correctly with JavaScript overlay (like in our code), search engines can still crawl and index your content, so your SEO rankings remain unaffected.
3. Can Google and other search engines see my website content if an age verification popup is enabled?
Yes. Search engine crawlers typically bypass JavaScript popups, meaning they can still access and index your site’s HTML content.
4. Can I make the popup appear only on specific pages in Squarespace?
Yes, you can add conditions to the JavaScript code so it only runs on selected URLs, such as your homepage or product pages that require age confirmation.
5. How can I make the popup remember returning visitors?
Our code uses cookies to remember if a visitor has already verified their age, so they won’t see the popup again for a set number of days (default is 3 days).
6. What happens if a visitor clicks “No” on the age verification popup?
If they click “No,” the popup displays a restriction message and can optionally redirect them to another site (such as Google) or block further access.
7. Can I customize the design of the age verification popup in Squarespace?
Absolutely. You can edit the CSS in the provided code to change colors, fonts, button styles, and spacing to match your website’s branding.
8. Is the age verification popup mobile-friendly?
Yes, the popup is fully responsive and works across desktop, tablet, and mobile devices without breaking your site’s layout.
9. Do I need coding skills to add an age verification popup in Squarespace?
Not much! You only need to copy and paste the provided HTML, CSS, and JavaScript code into Squarespace’s “Code Injection” section, which is beginner-friendly.
10. Can I track how many visitors click “Yes” or “No”?
Yes. By integrating Google Analytics event tracking into the button click functions, you can measure user interactions with your popup.
Final Thoughts
This solution gives you full control over how your age verification pop-up looks and works—without installing third-party tools or paying for extra plugins.
Whether you sell wines, vapes, CBD, or adult products, this pop-up ensures your site stays compliant and user-friendly.
Need Help?
If you’d like us to install it for you or further customize the pop-up, feel free to contact me — I specialize in custom Squarespace and WordPress development.
0 Comments