Why you should consider age verification for your store
If you sell age-restricted products, you need to add Age verification to your store to ensure compliance with laws and prevent underage access to potentially harmful goods.
Check the product categories below, and if you see your goods listed -this article should be right for you.
Product categories that strongly recommend the use of age verifications on the store:
- Alcohol and tobacco
- Vapes and e-cigarettes
- Medical and pharmacy
- Cannabis and all related to it
- Weapons and related accessories
- Adult content (pornography and explicit materials)
- Dating services
- Online gambling (gambling services, casino games, sports betting, lotteries, etc.)
So, if you work in these categories, you must carefully assess the age requirements based on jurisdiction and the specific products you sell. You may also need to consult with lawyers to ensure that you run your business properly, maintain legal compliance, protect minors, and uphold responsible business practices.
NOTE: Remember that age verification is not the best way to prevent visitors from browsing your website, as nothing prevents them from lying about their age.
Two Methods on How to Verify Shopify Store Visitor Age
In general, there are two main ways to add age verification to your Shopify store:- Manually create and include an age-check snippet
- Using Pro:Wrning Shopify app
In this article, I will describe the first manual method in detail. To succeed, you'll need some knowledge of HTML, CSS, JavaScript, and Liquid.
Creating and including an age-check snippet manually
- From your Shopify admin, go to the Online Store > Themes.
- Choose a theme you want to edit, and click Actions > Edit code.
- Find and click the Snippets folder to expand its content.
- Below the Snippets folder, click on the Add a new snippet.
- Name your new snippet age-verification, and click Create snippet. Your age-verification snippet will be opened in the code editor.
- In the newly opened age-verification file Paster following code and Save changes
{% assign enter_date_of_birth = false %} {% assign age = 18 %} {% capture adult_header %} Adults only (18+) {% endcapture %} {% capture adult_text %} This website contains age-restricted materials! By entering, you affirm that you are at least 18 years of age or the age of majority in the jurisdiction from which you are accessing the website. {% endcapture %} <div id="modal-wrapper" class="modal-wrapper"> <div id="age-check-prompt" class="modal-prompt"> <h1> {{ adult_header }} </h1> <p> {{ adult_text }} </p> <div unless enter_date_of_birth style="display:none;" endunless class="age-select-wrapper"> <select name="bmonth" id="bmonth" unless enter_date_of_birth value="1" endunless> {% if enter_date_of_birth %} <option value="1">- Month -</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> {% endif %} </select> <select name="bday" id="bday" unless enter_date_of_birth value="1" endunless> {% if enter_date_of_birth %} <option value="1">- Day -</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> {% endif %} </select> <select name="byear" id="byear" unless enter_date_of_birth value="1950" endunless> {% if enter_date_of_birth %} <option value="2015">- Year -</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> <option value="1949">1949</option> <option value="1948">1948</option> <option value="1947">1947</option> <option value="1946">1946</option> <option value="1945">1945</option> <option value="1944">1944</option> <option value="1943">1943</option> <option value="1942">1942</option> <option value="1941">1941</option> <option value="1940">1940</option> <option value="1939">1939</option> <option value="1938">1938</option> <option value="1937">1937</option> <option value="1936">1936</option> <option value="1935">1935</option> <option value="1934">1934</option> <option value="1933">1933</option> <option value="1932">1932</option> <option value="1931">1931</option> <option value="1930">1930</option> <option value="1929">1929</option> <option value="1928">1928</option> <option value="1927">1927</option> <option value="1926">1926</option> <option value="1925">1925</option> <option value="1924">1924</option> <option value="1923">1923</option> <option value="1922">1922</option> <option value="1921">1921</option> <option value="1920">1920</option> <option value="1919">1919</option> <option value="1918">1918</option> <option value="1917">1917</option> <option value="1916">1916</option> <option value="1915">1915</option> <option value="1914">1914</option> <option value="1913">1913</option> <option value="1912">1912</option> <option value="1911">1911</option> <option value="1910">1910</option> {% endif %} </select> </div> <div class="btn-wrapper"> <button id="submit_birthdate" class="button-enter btn styled-submit" onclick="ageVerification()" style="display:inline-block">I am 18 or older - Enter</button> <a href="http://google.com/" id="button-exit" name="button-exit">I am uder 18 - Exit</a> </div> </div> </div> <script> function ageVerification() { var min_age = {{ 18 }}; // Set the minimum age. var year = parseInt(document.getElementById('byear').value); var month = parseInt(document.getElementById('bmonth').value); var day = parseInt(document.getElementById('bday').value); var theirDate = new Date((year + min_age), month, day); var today = new Date; if ((today.getTime() - theirDate.getTime()) < 0) { window.location = 'http://google.com'; //Domain URL where the underaged visitors will be redirected to } else { var days = 30; //Number of days before the next age check var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); document.cookie = 'ageVerified=true;'+expires+"; path=/"; location.reload(); }; }; function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }; var ageVerified = readCookie('ageVerified'); if (ageVerified) { document.write("<style> #modal-wrapper { display: none; }</style>"); }; </script> <style> .modal-wrapper { display: flex; background: url('https://drscdn.500px.org/photo/89393805/q%3D90_m%3D2048/v2?sig=042e6c19c592fdc927d30ef4ad09ab8938545db4e0de6ea43f5acfd51a2a244f')no-repeat center center fixed rgba(0,0,0,.95); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: fixed; inset: 0 0 0 0; z-index: 9999; } .modal-prompt { width: 50%; margin: auto; padding: 1rem 2rem; background: #fff; border-radius: 6px; } .modal-prompt p, .modal-prompt h1 { margin-block: 0 1rem; color: #000; } .modal-prompt h1 {text-align: center;} .age-select-wrapper { display: flex; justify-content: center; gap: 1rem; padding-block: 1rem; } .btn-wrapper { display: flex; justify-content: center; align-items: center; gap: 2rem; } </style> - In the Layouts folder of the code editor, find and click on your
theme.liquidfile to open it in the editor. - In the online code editor, scroll down until you see the opening
<body>tag. - After the opening
<body>tag, paste the following code:{% render 'age-verification' %} - Click Save to save your changes.
How do I change or disable a background image?
To change the background image go to the age-verification.liquid and find this style code:
Change the URL parameter with your new image address. If you need to apply a solid color instead of an image, just remove all code after the background: and paster HEX/RGB/RGBA color value.
How do I change the age limit and pop-up content?
In you age-verification.liquid change the following code to the necessary value
to:
You can also edit all text in the age verification pop-up.
- The heading text is placed after the string:
{% capture adult_header %}. - And the main body text you'll find after the string:
{% capture adult_text %} - Buttons text is in the div with the
class="btn-wrapper"
Is it possible to add a birth date picker?
Yes. In you age-verification.liquid change the variable value from "false" to "true"
to:
Testing age verification functionality in action
Open your storefront to check that all works properly. Once you click the Enter button, you are not prompted about your age again for the next 30 days. To show the age verification again, you need to delete a cookie called ageVerified in the browser's development console on the Application tab.
Adding extended Age Verification with Pro:Wrning Shopify app
If you prefer a no-code solution with much more customizations the Pro:Warnings app is an excellent choice. This app allows you to set up any kind of warnings and verifications, including an age verification pop-up.
Pro:Warnings Notifications
Store alerts, age verification, before checkout warnings, geographic warning, delivery terms, T&C, etc.
Just install the app from the Shopify App Store and set up all the necessary features. You can choose a warning type, change its design, add icons, etc. Basically, the app gives you all the tools to adjust it for any business need and store design.
