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

TyW · ‎11-29-2019

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.

Create and include an age-check snippet

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

CRMarketing · ‎04-15-2022

Hi,

I really appreciate you making this and loved how simple it was to apply. I am having an issue with it effecting my shop's checkout though. The age verification shows up there off to the side n stacked on top of itself asking the customer to verify their again twice to be able to finally check out. Has anyone else had this issue?

Thanks

babsake · ‎05-03-2022

This is beautiful, thank you. I have a question tho, What if we want to do the check with a simple checkbox where they just click accept to enter the site?

studio429 · ‎07-26-2022

Could I add a state checker to this as well? Not all states can be shipped to, so a person needs to say they are over 21 and in specific states.

cp15764 · ‎09-14-2022

I've set up my age-check page and have a background image loaded that looks great on desktop but terrible on mobile. How can I make it appear better on mobile?

winewarehouse · ‎09-15-2022

I installed this but it’s small. How do I increase the size of this on the desktop?

SammiiMarriie · ‎01-07-2023

For everyone asking about the background photo, and how to get the pop up to be more frequent, I found a solution for both.

FOR BACKGROUND PHOTO

1. Find an large image online, 1024 x 1024 recommended.

2. Save image as age-check-background.jpg

3. Assets folder (it is 2 folders down from your snippets folder)

4. Add new asset.

5. Upload image you saved.

FOR MORE FREQUENT AGE CHECK

(This version of the age check will last for 2 weeks before asking for another age check. With this new method, the users refresh will go from 2 weeks to roughly 10 mins.)

Line 202

var days = .01; //number of days until they must go through the age checker again.

Hope this helps everyone!!! Have a great New Year and may all of your shops be successful! ❤️

PilarSantos · ‎08-02-2023

Hello! Thanks for the background photo tip you add, however I tried this on my Shopify, but is not working. Only I have to upload as a new asset with that name and thats it? Or do I need to add anything else in any other folder? Thanks!

AdamWSD · ‎01-15-2023

Hi All,

We have this implemented on our site and keep getting reports from mostly Firefox browser users advising they cannot select yes or no to enter our site. Anyone else have this issue and have a solution? We hate asking customers to try another browser.

CannVibes · ‎02-11-2023

Thanks so much.. It worked... The only thing I was not able to complete was: changing the image of the age verification. I guess need more info. Am I'm not tech savvy at all. So doing the first steps was a big thing for me. Thanks!!!

MSSLLC · ‎02-15-2023

I tried this but the enter button is transparent but still works. Is there any way to fix this?

ShushiSocal · ‎03-25-2023

Hi guys,

Is anyone experiencing the same issue where the age verification window blocking the theme customize preview screen

Clicking the enter button does not close the popup.... You can still change contents blocks and update but it is annoying not to able to see the preview live.

?

C_P · ‎07-12-2023

yes here... same issue

DaleL · ‎08-16-2023

Same issue

JaneQ · ‎08-16-2023

same issue as well.

KurtKramer · ‎08-24-2023

If you change background to None, you will be able to see your site. The pop-up won't go away when in editor mode as far as I can tell.

#prompt-background {
background: None; // url("{{ 'age-check-background.jpg' | asset_url }}") no-repeat center center fixed #555;
//-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;
}

CCaruso · ‎12-11-2023

This worked!! Thank you so much!

WELHOUSTON · ‎11-14-2023

yes same, please keep us updated

C_P · ‎07-12-2023

need help in this

after i go to customize theme and then i get this pop up, i press enter and it doesnt go away

KurtKramer · ‎08-24-2023

If you change background to None, you will be able to see your site. The pop-up won't go away when in editor mode as far as I can tell.

#prompt-background {
background: None; // url("{{ 'age-check-background.jpg' | asset_url }}") no-repeat center center fixed #555;
//-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;
}

KurtKramer · ‎08-24-2023

Does anyone know how to change the text color in the box? It seems like it is using the color theme from the website, but my website is black and text is white so with a white background you cannot read the text and with a black background, it blends in. I can figure out how to change the background color, just not the text color. I think I need to add some coding to this section, but I don't know how to specify the text color.

.modal-prompt {
background: #000;
border-radius: 2px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
width: 330px;
height: auto;
margin: 0 auto;
padding: 20px 35px 30px 35px;
position: relative;
top: 25%;
z-index: 1000000;
}

CCaruso · ‎10-30-2023

Hi there, this works great however I am unable to actual edit my shop as the pop up will not disappear after clicking enter or exit. did I place the age-check in the right place on the theme.liquid page? It doesn't seem to be working correctly. Thank you!

rootn · ‎11-01-2023

I am having the exact same issue. If you find a solution please let us know. Thank you

WELHOUSTON · ‎11-14-2023

same here please update!

WELHOUSTON · ‎11-14-2023

heres my work around for now :

One option is to use a development theme to make changes before applying them to your live theme. This allows you to work in a separate environment without triggering the age verification modal. Here's a general outline of the steps:

Duplicate Your Theme:
- In your Shopify admin, go to "Online Store" > "Themes."
- Duplicate your current theme to create a backup.
Create a Development Theme:
- In the duplicated theme, make your edits without including the age verification script.
Preview Changes:
- Use the "Preview" option in the theme editor to see how your changes will look without age verification.
Apply Changes:
- Once you're satisfied with the changes in the development theme, you can apply those changes to your live theme.

This way, you can avoid the interference of the age verification modal during the development and testing phase. Remember to thoroughly test your changes before applying them to the live theme.

dctrousers · ‎11-29-2023

Has anyone found a solution for the popup not disappearing on click in the customizer??

AdamWSD · ‎11-30-2023

I have removed this pop-up al together.

C_P · ‎11-30-2023

same

dctrousers · ‎11-30-2023

My solution at this point is to comment out the call in the theme.liquid file until I’m done making edits and then I’ll remove the comment brackets to restore the age gate.
I do wonder why it won’t clear in the customizer, though. There has to be some solution

WELHOUSTON · ‎11-14-2023

Hello, My AGE VERIFICATION is staying on in my edit mode. Im trying to edit the theme but I cant get past the "Age verification" pop up in the THEME EDIT back page side of things

WELHOUSTON · ‎11-14-2023

I'll click "enter" and itll pop up right away again not allowing me to make any edits to my site theme

leon2000 · ‎04-20-2024

The fix to hide the age-checker in editor mode:

{% unless request.design_mode %}
{% render 'age-check' %}
{% endunless %}

CrucialLabs · ‎07-17-2024

Thank you for this! Money saver for sure

Appiers · ‎07-29-2024

Hi there,
You can easily add age verification popup without messing up with the theme using Agefence's age verification popup.
It will come with a price of latte but it'll save you tons. and it has unlimited design customizations.
Just try out with 5 day free trial - https://apps.shopify.com/agefence
Learn more at https://appiers.com/agefence

Appiers · ‎08-15-2024

Hi there,
You can easily add age verification popup without messing up with the theme using Agefence's age verification popup.
It will come with a price of latte but it'll save you tons. and it has unlimited design customizations.
Just try out with 5 day free trial - https://apps.shopify.com/agefence
Learn more at https://appiers.com/agefence