Shopify themes, liquid, logos, and UX
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!
Sounds like you need responsive css styling on your modal/pop-up so that it renders correctly on mobile.
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?
Hi there
Did anyone figure this out?
I would like to have pop ups just on certain products?
Has anyone been able to figure out how to apply the age verification to a collection rather than the entire page yet? If so, can someone please help me with the coding information and format??
It's been a couple of years since this last inquiry, but has anyone figured out how to apply the snippet to collections or pages?
I want to apply restrictions to some products but not my entire 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?
Has anyone been able to figure out how can the pop up appears every time that a customer enters the website?
Thank you
Is there a way to add to a specific product ?
Hi @LavishBongs
Thanks for your coding!
I've tried to implement the EXIT and ENTER button design changes on the site I'm working on but the boxes aren't appearing. Do you know why that may be?
I've looked into the theme set up but can't find anything glaringly obvious there.
I don't know my way around coding so unsure as to where to look to correct this.
Help would be VERY much appreciated - the site is currently password locked but if anyone thinks they could help let me know and I'll turn it off.
Many thanks
Gill
so how to make it pop up every time when customer visit the website?
Hi all,
When I centre the {% capture adult_text %} it changes the colour to green, instead of the black that it is when not entered.
Can anyone help me fix this?
Thank you!
I applied these changes successfully. Can anyone help me make the YES/NO buttons bigger so that there is more padding around the text on the buttons in all directions? I feel they look oddly small in comparison.
Hello! This is a super tip 🙂 thanks! how did you manage to change the color of the buttons to purple and the title?
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);
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?
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!
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?
I'm wondering if there is a way to exclude a category in the store from displaying the age check?
Did you find a solution?
And how do I change the language? That is, so that this message appears in Spanish for example
I got the age verification box up, but now it just idles there after you enter your date of birth and hit enter. It never goes away.
Hi, Thanks for this very helpful lesson towards the age verification.
I believe most people have the same issue as I do, we want our pop-up shows right away, not two weeks later, so, would you please explain how to delete the cookie "isAnAdult"? Thanks a lot!
Hi,
This is great and work perfectly fine on both desktop and mobile, thanks!
But in order for SEO to work the background would have to be transparent so Google can read the landing page. Do you have a code to add for that?
Best regards,
Björn
What is great and works perfectly? Not sure if I missed something.
To remove the background make this adjustment. You can also choose to just change the 4th rgba value to "0"
#prompt-background {
background: none;url("{{ 'age-check-background.jpg' | asset_url }}") no-repeat center center fixed rgba(0,0,0,0.5);-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9999999;
}
Thanks for this code it worked for me! Does anyone know a way to make the website have a dark transparent layer around the button until it is clicked?
Hello! Thanks for the tip, on which area/folder should we make this adjustment? Thanks 🙂
Hello again! I finally managed to make the adjustment and it works perfectly! thanks a lot for your valuable help 🙂
Is there a way to create an age verification that requires an email address like the example attach please? https://cdn.shopify.com/s/files/1/0254/2918/0496/files/Screen_Shot_2021-03-10_at_12.01.35_AM.png?v=1...
@mememonster
Yes you can send email or SMS links that will capture your customer's real government issued drivers license or passport with Real ID.
It also can integrate directly into your checkout or on account registration on your Shopify site as well.
The app takes care of securely capturing your customer's ID through their mobile device. It uses specially trained A.I. to verify the document and pairing selfie's authenticity.
First 10 ID checks are free: https://app.shopify.com/real-id
Want to see it in action? Check out our demo store.
Hello, I am having trouble putting a picture in the background, could you possibly go into more detail? And also, how to I update the age verification to the correct date? >5/21/2000
Hiii
I had great success adding the age restriction but as i don't sell restricted items now I wish to remove it, and am struggling to find out how.
Thanks if you could let me know that would be much appreciated
Hopefully this isn't too late, but if it is then I hope someone else can benefit from this.
To remove the age verification from your site, undo the step which adds it to the Layout > theme.liquid file:
Somewhere inside the <body> element should be the code: {{ render 'age-check' }} -- if you remove that entire bit of code from {{ to }} then that will remove it from your site. (it should be on its own line)
The snippet file named age-check.liquid does not need to be deleted since it's not being called, but it is safe to do so as long as it's not being rendered anywhere else.
Hope this helps!
This is great! I have a question though, the image works and looks great on the site. However, when I pull up my site on my phone, the image is distorted. Can you help me with this?
I am trying to implement this and I do not have a
<body> tag
i have a tag that is like this
<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">
and one at the end of the script that is
</body>
I have some that are <title> or <head> but not <body>
PLEASE can someone help me
thanks
I was able to add the age verification popup just fine. However, I seem to be having some difficulty adding a background image to the disclaimer. I can't seem to find an EDIT HTML/CSS option anywhere. Is there any way you could provide a more detailed explanation of adding a background photo for my age disclaimer popup? It would be greatly appreciated.
I have the same issue! I cant find that EDIT HTML/CSS option, if anyone knows it that would be highly appreciated 🙂
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024