For the most part, these scripts are easy to implement and will display a simple pop up window asking the user to verify that they are whatever age you specify.
Before we continue, let’s be completely clear on one important topic.
These pop up age verification methods are by no means legally binding as they do not actually verify the user’s age in any way. All they will do is provide a pop up notification asking the user to verify (in good faith) that they are of a certain age.
For a true verification of the user’s age, you will need to go with an Identity Verification service like IDology. Click here for more information on their services.
To help you along the way, we’ve prepared the following article which will help you install a very basic script called age-verification.js which offers this basic pop up functionality.
The following article is being offered strictly as a courtesy to help you implement a basic age verification pop up on your cart.
The steps outlined here will require knowledge in FTP and some basic HTML coding which is not within the scope of 3dcart’s technical support services. Wherever possible, we will outline the necessary steps here in this KB Article, but please be aware that 3dcart’s support team is neither qualified nor allowed to implement any coding changes for you.
Also note that the script described and used in this article is not developed nor managed by 3dcart. It is based on a free script readily available by clicking this link.
As such, we are unable to provide direct support or troubleshooting services for the script, and we assume no responsibility in its use. For documentation on using and customizing the script, please refer to the link above.
Ok, we’re done with the disclaimers. The rest of this process will be fun. Let’s get to it!
Before You Begin
Please be sure to have the following ready before you proceed.
- An FTP client such as Filezilla or CuteFTP
- Your store’s FTP login information
- The age-verification.js files (see file attachment at the bottom of this article)
- A devil may care attitude about editing your store’s frame.html file (required)
- A cavalier, “if at first you don’t succeed…” predisposition for trial and error. (optional but highly recommended)
Step 1 – Download the attached Zip File
- Scroll down to the bottom of this article and download the attached Zip File. (See age-verification.zip)
- Unzip the file to retrieve the files from it.
You should have 3 files in the zip archive.
The style sheet that will be used by the pop up. Color and layout changes can be made to it.
- Create a new folder on your computer and call it “age-verification”
- Place the three files you unzipped earlier into this new folder.
Now that you have the files needed, our next step will be to upload it to your site via FTP. But first, you need to know which theme folder to upload it to, so let’s find that out first.
Finding your Theme
- Log into your 3dcart Online Store Manager
- Go to Settings ->Design ->Themes & Styles
- Make note of Selected Theme that your site is using.
The name of the theme will also be the name of the folder that you will navigate to with FTP. Armed with the theme folder information, let’s proceed to the next step.
Step 2 – FTP to your Store
- Connect to your store’s FTP access.
If you’re unfamiliar with FTP, click here to brush up on it a bit.
We promise that it’s really easy once you get the hang of it!
- Once you’re logged in via FTP, go to web/assets/templates/[themefolder]
Be sure to replace “[themefolder]” with your theme’s folder name.
- Upload your age-verification folder (created earlier) to the theme folder in FTP
Alright. That was the hard part. We’re halfway there. Onto the next step!
Step 3 – Editing your frame.html file
Although this step might be a little scary, we’ll do our best to make it as painless and easy as possible.
From your 3dcart Online Store Manager:
- Go to Settings ->Design ->Themes & Styles
- Click on the “Edit HTML” button
- Click on the “edit” button for your frame.html
- Look for the closing head tag within the HTML coding.
The closing head tag looks like this:
Add the following code right before the closing head tag.
<link href=”/assets/templates/[template]/age-verification/age-verification.css” rel=”stylesheet”>
Save your changes and let’s go test your store!
Now, when you first visit your store, you will see the following pop up verification dialogue.
Clicking on the “Yes” button will hide the popup and it won’t appear anymore until the session cookie is reset or expires – which it is set to do after a year has passed.
If you are unable to see the popup, try clearing your browser’s cache or using an alternate browser since you likely have a session cookie already on your browser.
The look and feel of the age verification script is pretty customizable since it is handled by the age-verification.css file you uploaded in the above steps.
The settings of the actual script are pretty easy to configure as well. For example, the age requirement can be set by editing the “// Question Content” section of the age-verification.js file
Again, please refer to the scripts original documentation for specifics on what each setting does.