Squarespace has no built-in age verification, but you can add one for free. Paste the code below into Code Injection and every visitor sees an “Are you 18 or older?” popup before they can use your site. It takes about five minutes, needs no plugin or monthly fee, and works on Squarespace 7.0 and 7.1.
I’m Sukesh Das, a Squarespace Circle Platinum Partner. I wrote this age gate to be light, easy to edit and free to use, so shops selling wine, spirits, CBD, vape or other age-restricted products can add one without paying for a widget.
How to add age verification to Squarespace (quick steps)
- Open Code Injection. In Squarespace 7.1 go to
Website → Pages → Custom Code → Code Injection. - Copy the full age verification code from Step 2 below.
- Paste it into the Footer box and click Save.
- Open your site in a private window and check that the popup appears.
What this Squarespace age gate does
- Shows an “Are you 18 or older?” popup on every page. Changing it to 21 takes one edit.
- Yes lets the visitor in. No keeps the site covered and shows a short message.
- Remembers verified visitors for 3 days with a cookie, so nobody is asked again on every page.
- Works on phones, tablets and desktop.
- No plugin, no third-party widget and no monthly fee.
Before you start
- A Squarespace 7.0 or 7.1 website.
- A plan that includes Code Injection: Core, Plus or Advanced, or the older Business and Commerce plans. The Basic and Personal plans do not include it.
Step by step: add the age verification popup to Squarespace
Step 1: Open Code Injection
- Log in to Squarespace and open your website.
- On Squarespace 7.1, go to
Website → Pages, scroll below your pages toCustom Codeand chooseCode Injection. - On Squarespace 7.0, go to
Website → Pages → Website Tools → Code Injection. - Quicker on either version: open the search in the Squarespace panel and type “Code Injection”.
Step 2: Copy and paste the age verification code
The code below holds the HTML, CSS and JavaScript in one piece, so you only paste once. Paste all of it into the Footer box. If you added it to the Header box before, it still works there, but the Footer is the cleaner place for it.
<!--
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
- Click Save, then open your website in a private or incognito window.
- The popup should appear on every page.
- Click Yes and the popup closes. It stays away for 3 days on that browser.
- Click No and a red message appears while the site stays covered.
- To see the popup again while testing, open a new private window or clear your cookies.
How to customize the age verification popup
Every change below is a small edit inside the code you pasted. Nothing else needs to be installed.
- Ask for 21+ instead of 18+: find
Are you 18 or older?and change 18 to 21. - Remember visitors for longer: find
sukeshSetCookie("ageVerified", "true", 3)and change the 3 to the number of days you want, for example 30. - Match your brand: in the style section, change the background and text colors of
.age-verification-box, the button colors, andfont-family: Arialto your site font. - Link your Terms and Privacy pages: edit the “By entering this site” line and wrap the page names in links to your own policy pages.
- Send under-age visitors away: inside the NO button function, add
window.location.href = "https://www.google.com";on a new line to redirect them instead of showing the message. - Show it on one page only: skip the site-wide panel and paste the code into that page’s own settings under
Page Settings → Advanced → Page Header Code Injection.
Free code or an age verification plugin for Squarespace?
Squarespace does not have plugins in the WordPress sense. What gets sold as an “age verification plugin for Squarespace” is usually a third-party widget or a code snippet, often with a monthly fee. Those can make sense if you need a date-of-birth field, reporting or a no-code settings screen.
For the common case, a simple yes or no age gate that remembers visitors, the free code in this guide does the same job. It loads from your own site, adds no outside scripts, and you can change every word and color.
Is an age verification popup enough to meet the law?
A popup like this is a self-declaration: the visitor confirms their age with one click. That is the usual first step for wine, beer, spirits, CBD and similar online shops, and it makes your age limit clear to every visitor.
Some products and places need more than a click. Online vape sales in the US, adult content in the UK and in a growing number of US states, and alcohol delivery often require a real ID or age check at checkout or on delivery. Check the rules for your products and region, and add an ID verification service where the law asks for one. This guide is not legal advice.
Squarespace age verification FAQs
Does Squarespace have built-in age verification?
No. Squarespace has no age gate setting, so you need a small piece of code like the one above or a third-party widget.
Which Squarespace plan do I need for an age verification popup?
Any plan with Code Injection: Core, Plus or Advanced, or the older Business, Commerce Basic and Commerce Advanced plans. The Basic and Personal plans cannot add custom code.
Will an age verification popup hurt my SEO?
No. The popup sits on top of the page while your content stays in the HTML, so Google can still crawl and index it. Google’s own guidance on intrusive interstitials treats legally required popups, such as age gates, as an exception.
Can I show the popup on specific pages only?
Yes. Instead of the site-wide Code Injection panel, paste the code into the page’s own settings under Page Settings → Advanced → Page Header Code Injection. Repeat for each page that needs it.
How long does the popup remember a visitor?
Three days by default. The code saves a small cookie when someone clicks Yes. Change the 3 in sukeshSetCookie("ageVerified", "true", 3) to any number of days.
What happens when a visitor clicks No?
The site stays covered and a short message explains that their age does not allow them in. You can redirect them to another site instead with the one-line change in the customization section.
Is the popup mobile friendly?
Yes. It uses a centered box with a maximum width, so it fits phones, tablets and desktop screens without breaking your layout.
Do I need coding skills to add it?
No. You copy the code, paste it into one box and save. Small changes such as the age or the colors are simple text edits.
Can I track how many visitors click Yes or No?
Yes. If your site uses Google Analytics, add an event call inside each button’s click function and the clicks show up in your reports.
Want it installed for you?
If you would rather not touch code, I can add the age verification popup to your site and style it to match your brand. I build and support Squarespace sites every week as a Squarespace web designer, so it is a quick job. Send me a short brief and I will reply within one working day.
