Ensuring compliance with age restrictions is crucial for Shopify store owners selling age-restricted products like alcohol, tobacco, health compliments or adult merchandise. While there are many apps which can help streamline the process, one might prefer a no-cost, app-free solution to maintain full control over your store’s functionality and appearance.
In this guide, we’ll explore how to add a custom age verification check to your Shopify store without relying on third-party apps. By leveraging Shopify’s built-in tools and a bit of coding, you can create a seamless age verification process that safeguards your business and ensures a smooth customer experience.
Please note that this guide is an advanced guide and is not supported by shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.
Please note that Age Verification 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
1. From your shopify admin dashboard go to Online Store > Themes.
2. Hover to 3 dots next to the theme you want to edit and click on Edit Code.
3. Expand on snippet folder from the left panel and click on Add a new snippet.
4. Name the new snippet as age-check and click on Create Snippet. The age-check.liquid file will open in the editor on the right.
5. In a new browser tab open this file > Age Check Code
6. Copy all the code and paste it in the editor in age-check.liquid file and click on save.
7. Navigate to Layouts folder on the left panel and open the file theme.liquid
8. In the file editor on the right, search for opening body tag <body ......>
9. Right after the opening body tag, insert this line of code
{% render 'age-check' %}10. This will include the age-check.liquid snippet at the very beginning of the body content of your theme file.11. Click on save to save the changes.Customizations to the code
Add background image
To add background image to the popup 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
Change Age Verification Limit
To change the age limit, change the following code in line 3:
{% assign age = 18 %}to:{% assign age = 21 %}Add Website Logo at the top of the popup
Add the below code above line no. 15
HTML:
<div class="logo-bgs">
<div class="picture1"> </div>
</div>
And add the corresponding css in the <style> part at the end of the file before closing tag
.picture1 {
background-image: url('IMAGE_URL');
width: 160px;
height: 42px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
margin-left: auto;
margin-right: auto;
top: 0;
z-index: 9999999;
}
Change to values marked in red as per your requirements.
Please note that this script is not mobile responsive. I hope you can easily make it responsive by add css media queries. Still if you need help, feel free to comment.
Post credit: Shopify forum staff TyW
Update 1:
To remove the background image/effect, comment out line nos. 249 to 253.
0 Comments