If you sell products such as wine, cigarettes, or dangerous goods, then you might want to discourage visitors under a certain age from browsing your website. You can do this by adding an age selection form to your storefront.
Keep in mind that age verification is not the best way to prevent visitors from browsing your website, as there's nothing preventing them from lying about their age. It might even be a nuisance to regular visitors, who will have to make an additional click to access your store.
age-check.liquid
snippet.theme.liquid
file to open it in the online code editor.<body>
tag.<body>
tag, paste the following code:{% render 'age-check' %}
This will include the
age-check.liquid
snippet at the very beginning of the body content of your theme file.
Upload a large JPG image (at least 1024 by 1024 pixels) to your theme assets on the Edit HTML/CSS page. Rename that file age-check-background.jpg
.
To see the age verification in action, take a look at this demo store.
In your age-check.liquid snippet, change the following code on line number 2:
{% assign age = 18 %}
to:
{% assign age = 21 %}
You can also edit the text on lines 6 and 10.
In your age-check.liquid snippet, change the following code on line number 1:
{% assign enter_date_of_birth = false %}
to:
{% assign enter_date_of_birth = true %}
Once you have clicked on the Enter link, you are not prompted about your age again for another 2 weeks. To bring on the age verification again, you need to manually delete a cookie called isAnAdult. To delete cookies, you can use the following extension in Google Chrome.
If you want to keep out customers that have JavaScript disabled, add the following to the head section of your theme.liquid
file in the Edit HTML/CSS page:
<noscript> <meta http-equiv="refresh" content="1; url=/pages/age-check" /> </noscript>
Replace age-check
with the handle of the page you want to redirect to on your website.
TyW | Online Community Manager @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Hi,
First off thank you for the tutorial! We implemented this code on our website and it works great for desktop users, however for mobile users the pop up page is so zoomed in that it just looks like a grey page. Can you please provide any insight on how to fix this?
Thank you!
This is absolutely brilliant, works perfectly for desktop and mobile. Is there a way to code this to appear only on specific collections/pages/products rather than denying access to the full site?
I just added this age verification to our site and it seems to work great, but it seems that something is off in how it calculates age eligibility when using the option to input your birth date.
I just tested it out, and it will only allow you into the online store if you are age 19 plus 1 month (I changed the age to as you mentioned).
As an example, today is Feb 19, 2020 so I assumed that a birthday of Feb 18, 2001 would allow me access and a date of Feb 20, 2001 would not allow me to proceed. When I tested, the latest birthday that I could input that would allow me through the age verification was Jan 19, 2001. Any Birthdates in the first half of Feb 2001 are not being accepted.
Is this something anyone else is having an issue with?
Thanks
@Willy420 wrote:I just added this age verification to our site and it seems to work great, but it seems that something is off in how it calculates age eligibility when using the option to input your birth date.
I just tested it out, and it will only allow you into the online store if you are age 19 plus 1 month (I changed the age to as you mentioned).
As an example, today is Feb 19, 2020 so I assumed that a birthday of Feb 18, 2001 would allow me access and a date of Feb 20, 2001 would not allow me to proceed. When I tested, the latest birthday that I could input that would allow me through the age verification was Jan 19, 2001. Any Birthdates in the first half of Feb 2001 are not being accepted.
Is this something anyone else is having an issue with?
Thanks
Hi There @Willy420 ... I am working on this code to learn JavaScript and Liquid and I do believe that you issue is due a part of CODE like this :
if (selectedMonth === "1") {
this.setDaysForMonth(29);
Where you see if (selectedMonth === "1") ... it SHOULD BE if (selectedMonth === "2") , that way CODE is assuming every FEBRUARY will have 29 days ... so I do believe that setup this condition to MONTH 1 was a TYPo
if you still have this issue , try change that at ageCheck.js
Thank you for this awesome snippet! I made a couple of design changes if anyone is interested. Here's a preview.
First I changed the Enter/Exit to center and changed the Exit to a button styled like the Enter button. Replace lines 185-187 with this.
<center><button id="submit_birthdate" class="button-enter btn styled-submit" onclick="ageCheck()" style="display:inline-block">Enter</button> <span style="padding: 0 4px">or</span> <button id="exit" class="button-enter btn styled-submit" onClick="parent.location='http://www.google.com'" style="display:inline-block">Exit</button></center>
I also styled the heading and body text.
{% capture adult_header %} <center>WARNING</center> {% endcapture %} {% capture adult_text %} <center>This website contains products that cannot be sold to minors. <br><br>Please verify that you are over the age of 21.</center> {% endcapture %}
@LavishBongs wrote:Thank you for this awesome snippet! I made a couple of design changes if anyone is interested. Here's a preview.
First I changed the Enter/Exit to center and changed the Exit to a button styled like the Enter button. Replace lines 185-187 with this.
<center><button id="submit_birthdate" class="button-enter btn styled-submit" onclick="ageCheck()" style="display:inline-block">Enter</button> <span style="padding: 0 4px">or</span> <button id="exit" class="button-enter btn styled-submit" onClick="parent.location='http://www.google.com'" style="display:inline-block">Exit</button></center>I also styled the heading and body text.
{% capture adult_header %} <center>WARNING</center> {% endcapture %} {% capture adult_text %} <center>This website contains products that cannot be sold to minors. <br><br>Please verify that you are over the age of 21.</center> {% endcapture %}
Congratulations @LavishBongs wonderful JOB
Is there a way I can disable the cookie verification that causes the popup to not show for 2 weeks? I'd like the popup to always display.
Same problem, I have gotten it down to either popping up once a day or popping up and not being able to go away by changing the days to refresh from 14 to 1 or 0, anyone know how you can get it to pop up everytime you go to the website but still allow you to enter the site problem free?
var today = new Date;
if ((today.getTime() - theirDate.getTime()) < 0) {
window.location = 'http://google.com'; //enter domain url where you would like the underaged visitor to be sent to.
} else {
var days = 1; //number of days until they must go through the age checker again.
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = 'isAnAdult=true;'+expires+"; path=/";
location.reload();
};
I'm assuming the change is somewhere in here but i cant quite figure it out
hi im having the same problem. were you able to resolve this?
anyone solved this yet?
Thank you so much for this! So excited to have it on my site! How do I go about disabling other apps on my site until verification happens?
Also, if I have 2 pages - 1 of which is age verified - and the non verified one links to a collection page on the verified site, what would I add in and where to have this pop up at those entry points too?
Has anyone been able to figure out how can the pop up appears every time that a customer enters the website?
Thank you
Thank you for the link and step by step directions, however It did not work for me. Can you provide some assistance?
I was finally able to set up the age-check verification, but I am having trouble uploading a background image. I do not know where to find theme assets to upload an image as well as the edit html/css page? Please help
Thank you!
New to this. The only <Body> tag I could find theme.liquid was <Body with no closed > Do I insert the code there? {% render 'age-check' %}? It pops up sometimes but does not stay just flashes on the screen. Please help a noob!
I was able to fix this issue (a month off). Hope it works for you too.
Before:
var theirDate = new Date((year + min_age), month, day);
After:
var theirDate = new Date((year + min_age), month - 1, day);
thanks for this it works great; however, my age verification shows at the top of the site is there any way to move it down to the middle?
User | RANK |
---|---|
217 | |
52 | |
50 | |
27 | |
23 |