If your website contains products that are intended for mature audiences, having an age verification popup can be worthwhile to avoid legal issues down the road.

While there are apps that will certainly achieve this for you, there is a noticeable performance improvement by coding such feature into your theme since there's no external content being loaded.

In Shopify, apps are executed only after the DOM content is loaded, so every app will always take a bit longer to show up when compared to hard-coding it into your theme. In addition, you won't be tied to a monthly fee.

That's why, today, we'll be showing you how to add an age verification popup snippet to your theme that loads at least 3 times faster than apps.

You can check the end result here: live preview. (Password: 123)

Downloading the code files

You can download the code files clicking here. (live preview [Password: 123] )

Complete details about it can be found here.

Making a backup of your theme

Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.

Step 1: opening the code editor

1. In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
2. Inside the .zip you downloaded you'll find two files:
   1. ezfy-age.txt
   2. settings_schema.txt

Step 2: Creating the age popup file

1. Open the ezfy-age.txt file and copy all the code in there.
2. Now go back to your Shopify code editor and below Snippets click on “Add a new snippet“. Name it exactly:
   
   ezfy-age
   
   
   
3. Paste the code that you copied and click on save, at the top right corner.

Step 3: Enabling the code

1. Find the file named theme.liquid. You can type it on the search bar to ensure you select the correct one.
2. Inside this file, press CTRL + F (or CMD + F on Mac) and search for:
   
   </body>
   
3. Paste the following code before the </body> tag you found and save:
   
   {% include 'ezfy-age' %}

4th and final step: updating the settings_schema.txt file

1. Open the settings_schema.txt file and copy all the code in there.
2. In your Shopify code editor, find the settings_schema.json file in your theme.
3. Within this file, scroll all the way down.
4. Paste the code before the last line, after the } sign, as indicated the image below.
   
   So, for example, in this case, the code should be pasted on the line 1638 (the quantity of lines may vary depending of your theme, so don't worry if it shows a different number on yours).
   
   
   
   Paste the code to the right of the } character that the arrow is pointing to.
   
   
   
5. Save and you're ready to go!

Troubleshooting common issues

Question: It shows me an error after I edit the settings_schema.json file. What do I do?

Answer: You very likely pasted the code at the bottom of the file. Please make sure you paste the code at the penultimate (second last) line as indicated in the step 4.

Your file must end with this character: ]

If you're still facing any issues please reach out to us via ezfycode@gmail.com and we'll be more than happy to help you out!

Customizing the age verification popup

This code snippet comes with a fair share of customizable options: colors, text, font sizes and more. To edit them, please do the following:

1. In your Shopify admin, navigate to Online Store > Themes >Customize.
   
2. Scroll all the way down and navigate to Theme settings >Age Verification Popup by EZFY
   
3. Inside the Age Verification Popup by EZFY menu you'll find all available customizable options.