FROM CACHE - en_header

Site access - Add age verification to your online store

TyW
Community Manager
Community Manager
416 40 1116

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 48 (48)
HMarx
New Member
1 0 1

Hi there 

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

a23d1
New Member
1 0 1

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

joan93
New Member
1 0 0

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

GillPatch
New Member
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

 

Vterry
New Member
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.

Axefield
New Member
2 0 0

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

DWUCLOTHING
New Member
1 0 1

Is there a way to add to a specific product ?

JaneQ
New Member
1 0 0

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!

 

CBDyoga
Tourist
3 0 0

Did you find a solution?

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
New Member
2 0 0

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

 

drinkmellc
New Member
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??

homerly
Tourist
3 0 1

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

mememonster
New Member
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
163 3 71

@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 Verdict - Anti-Fraud Apps for Shopify
  • Blockade - Easily block countries, IP addresses, VPNs
  • Real ID - Verify your customer's real IDs easily & securely
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?

AEvers
New Member
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

NPY
New Member
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

 

blissedoutart
New Member
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