A Shopify age verification popup is a simple way to grant shoppers access to your store based on age.
If you are making your store accessible to certain countries, this becomes essential to abide by their laws. Learn here the direct steps on how to add age verification to Shopify without any complications.
How Does Age Verification Popup Work in Shopify?
An age verification popup on Shopify appears when the user visits your site for the first time.
Something like this:
- When they select Yes, then they can explore your site
- When they select No, they are redirected back to Google.com
When the users accept they are above the needed age limit, the age verification popup will not appear during the entire session.
How to Add Age Verification to Shopify?
Step 1: Head to Theme Editor
From your Shopify admin panel, head to Online Store > Themes.
Click on the three dots and open the Edit code.
Step 2: Add the Age Verification Code
Open the theme.liquid file and add the following age verification code before the closing </body> tag. You can modify the content and text as per your preferences.
<!-- Meetanshi Age Verification Popup Starts -->
<div id="age-verification-popup" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; backdrop-filter:blur(10px); background-color:rgba(0, 0, 0, 0.8); z-index:9999;">
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background-color:#fff; padding:30px; text-align:center; border-radius:15px; max-width:400px; width:90%; box-shadow:0px 8px 16px rgba(0,0,0,0.3);">
<h2 style="font-size:26px; margin-bottom:20px; color:#ff6f61;">Age Verification</h2>
<p style="font-size:18px; margin-bottom:20px; color:#444;">
You must be <strong>18 years or older</strong> to access this site. Please confirm your age below.
</p>
<button onclick="verifyAge(true)" style="background-color:#28a745; color:#fff; padding:12px 25px; border:none; border-radius:30px; cursor:pointer; font-size:16px; font-weight:bold; margin-right:10px; transition:background-color 0.3s;">Yes, I'm 18+</button>
<button onclick="verifyAge(false)" style="background-color:#dc3545; color:#fff; padding:12px 25px; border:none; border-radius:30px; cursor:pointer; font-size:16px; font-weight:bold; transition:background-color 0.3s;">No</button>
<p style="font-size:14px; margin-top:20px; color:#888;">
By continuing, you agree to our <a href="/terms" style="color:#007bff; text-decoration:none; font-weight:bold;">Terms & Conditions</a>.
</p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const agePopup = document.getElementById("age-verification-popup");
// Show the popup if sessionStorage does not have the flag
if (!sessionStorage.getItem("ageVerified")) {
agePopup.style.display = "block";
}
});
function verifyAge(isOfAge) {
const agePopup = document.getElementById("age-verification-popup");
const referrer = document.referrer;
if (isOfAge) {
// Set session-based flag
sessionStorage.setItem("ageVerified", "true");
agePopup.style.display = "none";
} else {
// Check if the referrer is not Google, then redirect back to the referrer
if (referrer && !referrer.includes("google.com")) {
window.location.href = referrer;
} else {
// Redirect to a custom URL for users under 18
window.location.href = "https://google.com"; // Replace with your custom URL
}
}
}
</script>
<!-- Meetanshi Age Verification Popup Ends -->
And click Save and finish the process.
This will add the age verification popup to the entire Shopify store. A new user will first get the age verification popup, and based on the action they take, they will continue accordingly.
This code is fully functional across devices and optimized for better UX, so you must not worry about any issues or disturbances in your core file.
Give this simple code a try and get the needed age verification access in your Shopify store for free.
