Knowledgebase: Site Design
Can I add an Age Verification Pop Up to my Store?

If your business sells age restricted products, you may want to add a simple popup to your home page that specifically asks users if they are of a certain age. If so, there are many javascript and jquery scripts that can be used for this purpose.

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.

Additional Information
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.

As mentioned earlier, there are many free scripts available online that can help you implement this sort of pseudo-age verification pop up. 3dcart works best with javascript or jquery scripts, so a simple search on Google for the phrases "age verification " and "jquery" should point you in the right direction.

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.

Important:
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

  1. Scroll down to the bottom of this article and download the attached Zip File. (See age-verification.zip)
  2. Unzip the file to retrieve the files from it.

You should have 3 files in the zip archive.

  • age-verification.css
    The style sheet that will be used by the pop up. Color and layout changes can be made to it.
  • age-verification.js
    The javascript code that will be used to control the function
  • jquery.cookie.min
    The javascript that controls the session cookie storing for users who verify their age correctly.

To continue:

  1. Create a new folder on your computer and call it "age-verification"
  2. 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

  1. Log into your 3dcart Online Store Manager
  2. Go to Settings ->Design ->Themes & Styles
  3. 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

  1. Connect to your store's FTP access.

Tip:
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!

  1. Once you're logged in via FTP, go to web/assets/templates/[themefolder]

Be sure to replace "[themefolder]" with your theme's folder name.

  1. 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

Next, we need to reference the javascript on your site's 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:

  1. Go to Settings ->Design ->Themes & Styles
  2. Click on the "Edit HTML" button
  3. Click on the "edit" button for your frame.html
  4. Look for the closing head tag within the HTML coding.

Hint: 
The closing head tag looks like this:

</head>

Add the following code right before the closing head tag.

<!--START: AGE-VERIFICATION-->
<link href="/assets/templates/[template]/age-verification/age-verification.css" rel="stylesheet">
<script src="/assets/templates/[template]/age-verification/jquery.cookie.min.js"></script>
<script src="/assets/templates/[template]/age-verification/age-verification.js"></script>
<!--END: AGE-VERIFICATION-->

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.

Note: 
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.

Tip:
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.



Attachments 
 
 age-verification.zip (3.00 KB)

Help Desk Software by Kayako fusion