Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Site access - Add age verification to your online store

Site access - Add age verification to your online store

TyW
Shopify Staff (Retired)
463 71 1240

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.

 

ageverify.jpg

 

 

Create and include an age-check snippet

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Click on the Snippets folder to expand and view its content.
  4. Under the Snippets folder, click on Add a new snippet.
  5. Name your new snippet age-check, and click Create snippet. Your age-check snippet will open in the online code editor.
    ageverify01.jpg
  6. In a new browser tab, open the following file.
  7. Copy all of the code you see there and return to your Themes page.
  8. In the online code editor, paste the code you copied into your age-check.liquid snippet.
  9. Save your changes.
  10. In the Layouts folder, locate and click on your theme.liquid file to open it in the online code editor.
  11. In the online code editor, scroll down a bit until you see the opening <body> tag.
  12. Right after the opening <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.
  13. Click Save to save your changes.

What if I want to show an image in the background?

 

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.

 

Changing the age limit

 

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.

 

What if I want to add a date of birth picker?

 

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 %}

 

Testing the functionality

 

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 customers disable JavaScript

 

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

Replies 83 (83)

GJ2
Visitor
1 0 1

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!

Axefield
Shopify Partner
2 0 1

Sounds like you need responsive css styling on your modal/pop-up so that it renders correctly on mobile.

U-W
Visitor
1 0 7

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?

HMarx
Visitor
1 0 1

Hi there 

Did anyone figure this out? 
I would like to have pop ups just on certain products?

drinkmellc
Visitor
2 0 0

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??

XenoSpectre
Visitor
1 0 0

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.

Willy420
Visitor
1 0 1

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

GoodFy_Brasil
Explorer
65 1 3

@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

William Alencar
GoodFy Brasil
LavishBongs
Visitor
1 0 6

Thank you for this awesome snippet! I made a couple of design changes if anyone is interested. Here's a preview.

Screenshot_2020-03-24 Lavish Bongs.png

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 %}
GoodFy_Brasil
Explorer
65 1 3

@LavishBongs wrote:

Thank you for this awesome snippet! I made a couple of design changes if anyone is interested. Here's a preview.

Screenshot_2020-03-24 Lavish Bongs.png

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

William Alencar
GoodFy Brasil
lgj
Visitor
1 0 0

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.

DazeyDelivery
Visitor
3 0 0

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?

DazeyDelivery
Visitor
3 0 0

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

djshopph
Visitor
1 0 0

hi im having the same problem. were you able to resolve this?

DazeyDelivery
Visitor
3 0 0
i ended up changing the refresh time to .1 instead of 14
requires reload about every 10 minutes or so now
Taryncollister
Visitor
1 0 0

anyone solved this yet?

Par-Digital
Shopify Partner
11 0 0

Has anyone been able to figure out how can the pop up appears every time that a customer enters the website?

Thank you

DWUCLOTHING
Visitor
1 0 1

Is there a way to add to a specific product ?

GillPatch
Visitor
3 0 0

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

 

homerly
Tourist
3 0 1

so how to make it pop up every time when customer visit the website? 

NPY
Visitor
1 0 0

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!Screen Shot 2021-06-29 at 10.29.16.png

 

Screen Shot 2021-06-29 at 10.30.59.png

 

ejanko
Tourist
9 0 1

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.  

ejanko_0-1679715644028.png

 

 

 

PilarSantos
Tourist
9 0 1

Hello! This is a super tip 🙂 thanks! how did you manage to change the color of the buttons to purple and the title?

ShushiSocal
Excursionist
11 0 23

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);

 

 

TheGnome
Tourist
5 0 2

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?

Jawanza1
Visitor
2 0 0

Thank you for the link and step by step directions, however It did not work for me. Can you provide some assistance? 

Jawanza1
Visitor
2 0 0

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!

analogkid12
Visitor
3 0 0

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!

simmm
Visitor
1 0 0

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?

a23d1
Visitor
1 0 1

I'm wondering if there is a way to exclude a category in the store from displaying the age check?

CBDyoga
Tourist
3 0 0

Did you find a solution?

joan93
Visitor
1 0 0

And how do I change the language? That is, so that this message appears in Spanish for example

Vterry
Visitor
1 0 0

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.

JaneQ
Tourist
3 0 1

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!

 

Bjorn123
Tourist
4 0 3

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

CBDyoga
Tourist
3 0 0

What is great and works perfectly? Not sure if I missed something.

Axefield
Shopify Partner
2 0 1

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;
}

 

Connor11
Excursionist
25 0 6

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?

PilarSantos
Tourist
9 0 1

Hello! Thanks for the tip, on which area/folder should we make this adjustment? Thanks 🙂

PilarSantos
Tourist
9 0 1

Hello again! I finally managed to make the adjustment and it works perfectly! thanks a lot for your valuable help 🙂

mememonster
Visitor
2 0 0

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... 

dylanpierce
Shopify Partner
288 14 124

@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

 

 

Founder of Real ID - Verify your customer's real IDs easily & securely with modern A.I.

Want to see it in action? Check out our demo store.

AEvers
Visitor
1 0 0

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

blissedoutart
Visitor
1 0 0

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  

WellNaturedHemp
Tourist
5 0 6

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!

winewarehouse
Tourist
14 0 1

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?

laurabcan
Visitor
1 0 0

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

happypiper
Visitor
2 0 1

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.

PilarSantos
Tourist
9 0 1

I have the same issue! I cant find that EDIT HTML/CSS option, if anyone knows it that would be highly appreciated 🙂