Site access - Add age verification to your online store

Highlighted
Community Manager
Community Manager
399 18 373

Caution: This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.


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.

 

Caution: This method does not meet the age-verification requirements associated with current FDA regulations that govern the sale of e-cigarettes, cigars, and tobacco products.

 

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 | Community Manager @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

4 Likes
Highlighted
New Member
1 0 0

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!

0 Likes
Highlighted
New Member
1 0 0

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?

0 Likes
Highlighted
New Member
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

1 Like
Highlighted

@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
0 Likes
Highlighted
New Member
1 0 1

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 %}
1 Like
Highlighted

@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
0 Likes