Website Design, Squarespace Development and Shopify Commerce

Age Verification Plugin for Squarespace

Clearer audience. Minimum inconvenience.

selling-alcohol-age-verify-banner-tny.jpg

Why do I need the Age Verification Plugin?

Our age verification plugin prevents underage people from buying age restricted products on your Squarespace website. You should have one if you’re selling items such as tobacco, alcoholic, or adult products. It works by asking customers to verify their age before they can view or buy age restricted products from your Squarespace store.

 
easy installation

Easy Installation

This newer version is even easier to install and customise to meet your needs.

multi language text

Full language support

Edit the text and the buttons to make it visitor-friendly in any language.

colours can be changed

Match your brand

Change the colours to match your brand image.

 
Compatible with all templates

Full template support

The plugin works with all Squarespace templates.

SEO unaffected

SEO unaffected

Our plugin does not affect your site’s ranking on search engines.

mobile support responsive

Mobile friendly

The popup is responsive, adjusting for smaller mobile and tablet screens.

 

Make your website family friendly. Check each visitor’s age.

34.99
Buy Now

Reviews

Frequently Asked Questions

How do I install the plugin?

Full instructions are provided when you purchase this plugin. Installation is as simple as copying and pasting the code into your website’s code areas. If you are unsure, you can book a developer to install it for you.

When will I receive the plugin?

A link to the code is automatically emailed to you within minutes. The link expires after 24 hours, so it’s a good idea to download the document immediately, even if you plan to install the plugin later.

Is my Squarespace template supported?

Yes. Every Squarespace template is supported.

Is my Squarespace Plan supported?

The plugin can be installed on sites that are on the Business, Commerce Basic and Commerce Advanced plans, as well as some legacy plans. The plugin is unsuitable for the Personal plan because this does not support JavaScript. If you are unsure which plan you are on, check the Billing section of your website. To do this, click Settings, click Billing & Account, and then click Billing.

How does it work?

When someone visits your website for the first time, they'll see a popup asking them to confirm they are of a suitable age to view the content. You decide the message!

Your website will be displayed 'underneath' the popup, but a semi-transparent overlay will prevent them accessing the site until they click one of the buttons in the popup. You choose how transparent the overlay should be.

If they tap the Yes button, the popup will disappear (in an animated way) and they'll be allowed to access your site. A cookie will be created on their computer so that the popup doesn't reappear for a set period of time. You define the period in minutes!

If they click the No button, they'll see a message explaining that they cannot visit the website. A button in the popup allows them to return to the website they were viewing previously.

Can I try the plugin?

Yes, please try our simple demonstration site using the password ‘demo’.

Can I choose a different language?

Yes. The text on the popup is fully customisable, including the buttons. You can change any text to any language.

Will the Popup affect my site's SEO?

The simple answer is no. You may have read that age verification tools can affect your site’s SEO (its ranking on search engines). This is true if they use a redirect or interstitial. However our plugin serves the age verification notice without blocking search engines from crawling your site. It uses a JavaScript/CSS overlay that allows the search engine to read your content, but effectively blocks human visitors from viewing it until they’ve confirmed they aren’t underage.

How can I customise the font family?

When supplied, the popup uses standard fonts that are available on the majority of devices. If you would like to style the popup by using a font already installed on your site you can change this in the CSS. Look for this line:

@va-font: Arial,Helvetica,sans-serif;

You can edit this to match your font name. For example, if Rubik is installed on your site, you could change it to:

@va-font: Rubik;

How can I customise the colours?

You can customise the colours used in the popup by replacing the default hexadecimal colour codes, with your own.

Default colours used on the popup

To keep things simple, we’ve used two colours: red (#B40035) and white (#FFF). You can replace these with anything you like, as long as you know the hexadecimal colour codes (or hex codes) of the colours you want to use. If you don’t know what the colour codes are, use this colour picker to select your colours, then paste the values into the CSS. Here’s an extract of the CSS:

/* Title Font Colour */
@va-title-font-color : #B40035;

/* Button Colour */
@va-button-background-color: #B40035;

/* Button Font Colour */
@va-button-font-color: #fff;

/* Popup Colour */
@va-background-color: #fff;

/* Popup Border Colour */
@va-border-color: #B40035;

As an example, if you wanted the title to be black, you’d replace #B40035 with #000 where it says @va-title-font-color.

How do I make the overlay darker (less transparent)?

You can make the overlay more opaque, to make the content harder to read. Look for the section below in the CSS. By default the overlay is 80% opaque (a value of 0.8). To make it more transparent, use a number of less than 0.8, for example 0.5. To make it more opaque, use a larger number between 0.8 and 1.0.

By default the overlay is black. If you prefer a different colour, change the first three digits to another RGB code. The code 0,0,0 means black. A code of 255,255,255 means white.

/* Overlay Opacity */
@va-opacity: rgba(0,0,0,0.8);

Why does a blue border appear around the buttons when I click them?

The outline around buttons is usually controlled by your browser. The outline is normally blue, but you may have customised it in yuor browser’s settings.

The border is provided for visitors who have accessibility issues that prevent them from using the mouse. As they tab through clickable elements on a web page, the browser adds the border so they know which button has focus. It’s not something you should normally remove.

If you want to customise the colour of the border on the popup buttons, you can do this by editing the CSS. Look for the section in the CSS that looks like this:

button:focus { 
  //outline-color: #000; /*Override accessibility border colour */
}

Remove the initial “//” characters, and then choose the colour you want to see. The code above will make it black (#000), but you can select any hex colour code.