Age Verifier Pop-up

Age Verifier Pop-up

Compatibility: Compatible on most Shopify themes, from Debut to Shopify 2.0 Themes.

Add an age verifier pop up in your website to comply with the website policies. This age verifier has multiple options that lessen the need to hire a developer. 

You can check the demo store here. Password: made4uo

What is an Age Verification Pop-Up?

An age verification pop-up is a window that appears on a website upon loading, prompting users to confirm they are above a certain age before they can access the full website content. This is typically used for websites selling age-restricted products like alcohol, tobacco, or mature content.

Why Use an Age Verification Pop-Up?

There are several reasons why you might want to use an age verification pop-up on your Shopify store:

  • Legal Compliance: In some regions, there are laws requiring websites selling age-restricted products to verify the user's age before allowing them to browse or purchase these items. An age verification pop-up helps ensure compliance with such regulations.
  • Brand Protection: Using an age verification pop-up demonstrates your commitment to responsible sales practices and protects your brand image from potential association with underage users.
  • Content Control: For websites offering mature content, an age verification pop-up allows you to restrict access to users who are not yet of legal age.

Additional Considerations:

While an age verification pop-up offers some benefits, here are some additional considerations to ensure it doesn't negatively impact your user experience:

  • User Experience:

    • Minimize Intrusiveness: Make the pop-up clear and concise, avoiding unnecessary elements or lengthy text.
    • Easy Navigation: Ensure the verification process is simple and straightforward. Users should be able to confirm their age or exit the pop-up quickly without frustration.
    • Mobile-Friendly Design: The pop-up should display and function properly on all devices, especially mobile phones where a significant portion of your traffic might come from.

  • Alternatives:

    • Consider alternative verification methods: Explore options like age verification during checkout or integrating with third-party age verification services. These might offer a smoother user experience compared to a pop-up.

  • Accessibility:

    • Keyboard Accessibility: Ensure users can navigate the pop-up using keyboard controls, especially important for users with disabilities.
    • Screen Reader Compatibility: Verify that screen readers can properly announce the pop-up content and instructions for users who rely on them.

What you are buying:

  • Age verifier will ask for full birthdate or yes-no or just the year
  • Remember users who are verified until they close the browser
  • Add image in pop up, image in section, heading, content, and extra information
  • Assign the pop up to appear in certain page, such as product, collection, home page, pages, blogs, and even an specific URL in your website
  • Age limit setting provided
  • Redirect to any website address if user is underage
  • Control the colors in the section

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

 []

Steps on how to add Age Verification Pop-Up:

Step #1. Open your code editor

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code.

Step #2. Create a new section file

In Section folder, create a new section, name it "age-verifier",then paste the code below and SAVE.

{% assign ageToVerify = section.settings.age_to_verify %}
{% assign ageVerified = "false" %}
{% if section.settings.specific_url != blank %}
{% if section.settings.specific_url == request.path %}
{% assign ageVerified = "true" %}
{% endif %}
{% else %}
{% if section.settings.show_on_pages contains template.name or section.settings.show_on_pages == "all" %}
{% assign ageVerified = "true" %}
{% endif %}
{% endif %}
{{ ageVerified }}
{% if ageVerified == "true" %}
{% if section.settings.section_image != blank %}
{{
section.settings.section_image
| image_url: width: 1500
| image_tag:
width: section.settings.section_image.width,
class: section__image,
sizes: '(min-width: 750px) 50vw, 100vw',
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.section_image.alt
| escape
}}
{% endif %}
<div
class="age-verification__pop-up"
style="--select-box-background: {{ section.settings.section_bg }}; border-radius: {{ section.settings.border_radius | append: 'px' }}"
>
<svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 10 6" style="display: none">
<symbol id="icon-dropdown" viewbox="0 0 18 19" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</symbol>
</svg>
{% assign currentYear = 'now' | date: '%Y' | times: 1 %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'image' %}
{% if block.settings.image != blank %}
{{
block.settings.image
| image_url: width: 1500
| image_tag:
width: block.settings.image.width,
sizes: '(min-width: 750px) 50vw, 100vw',
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: block.settings.image.alt
| escape
}}
{% else %}
No image provided <br>
{% endif %}
{% when 'heading' %}
<{{ block.settings.heading_size }} style="color: {{ block.settings.heading_color }}">{{ block.settings.heading }}</{{ block.settings.heading_size }}>
{% when 'content' %}
<div style="color: {{ block.settings.content_color }}">
{{ block.settings.content }}
</div>
{% when "full_date" %}
<age-verifier data-redirect-link="{{ block.settings.redirect_link }}" data-verifier="full-date" data-age-to-verify="{{ ageToVerify }}">
<div
class="age-verification__input--container"
style="--select-background: {{ block.settings.input_bg }}; --select-color: {{ block.settings.input_color }}; --select-button: {{ block.settings.dropdown_bg }}"
>
<div class="age-verification__select">
{% assign month = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec' | split: ',' %}
<select>
{% for i in month %}
<option
value="{{ i }}"
{% if forloop.first %}
selected
{% endif %}
>
{{ i }}
</option>
{% endfor %}
</select>
</div>
<div class="age-verification__select">
<select>
{% for i in (1..31) %}
<option
value="{{ i }}"
{% if forloop.first %}
selected
{% endif %}
>
{{ i }}
</option>
{% endfor %}
</select>
</div>
<div class="age-verification__select">
<select>
{% for i in (1900..currentYear) %}
<option
value="{{ i }}"
{% if forloop.last %}
selected
{% endif %}
>
{{ i }}
</option>
{% endfor %}
</select>
</div>
</div>
<span class="popup--error-message popup-hide">{{ block.settings.error_msg }}</span>
<button class="age-verification__button" style="--popup-btn-background: {{ block.settings.button_bg_color }}; --popup-btn-color: {{ block.settings.button_text_color }}">
{{ block.settings.button_label }}
</button>
</age-verifier>
{% when "year_only" %}
<age-verifier data-redirect-link="{{ block.settings.redirect_link_year_only }}" data-verifier="year-only" data-current-year="{{ currentYear }}" data-age-to-verify="{{ ageToVerify }}">
<input type="number" style="background: {{ block.settings.input_bg }};" min="1900" max="{{ currentYear }}" value="2023" placeholder="YYYY">
<span class="popup--error-message popup-hide">{{ block.settings.error_msg_year_only }}</span>
<button class="age-verification__button" style="--popup-btn-background: {{ block.settings.button_bg_color_year_only }}; --popup-btn-color: {{ block.settings.button_text_color_year_only }}">
{{ block.settings.button_label_year_only }}
</button>
</age-verifier>
{% when "yes_no" %}
<age-verifier data-redirect-link="{{ block.settings.redirect_link_yes_no }}" data-verifier="yes-no" data-age-to-verify="{{ ageToVerify }}">
<span class="popup--error-message popup-hide">{{ block.settings.error_msg_yes_no }}</span>
<div class="yes-no--container">
<input value="{{ ageToVerify }}" type="hidden">
<button class="age-verification__button" style="--popup-btn-background: {{ block.settings.button_bg_color_yes_no }}; --popup-btn-color: {{ block.settings.button_text_color_yes_no }}">
{{ block.settings.button_label_yes }}
</button>
<a href="{{ block.settings.redirect_link_yes_no }}" class="age-verification__button"
style="--popup-btn-background: {{ block.settings.button_bg_color_yes_no }}; --popup-btn-color: {{ block.settings.button_text_color_yes_no }}">
{{ block.settings.button_label_no}}
</a>
</div>
</age-verifier> 
{% when 'terms' %}
<small class="popup--terms" style="--terms-color: {{ block.settings.terms_color }}; --terms-link-color: {{ block.settings.terms_link_color }}">{{ block.settings.terms}}</small>
{% endcase %}
{% endfor %}
</div>
<script>
class AgeVerifier extends HTMLElement {
constructor() {
super();
this.button = this.querySelector('button');
if(this.button) {
this.button.addEventListener('click', this.verifyAge.bind(this))
}
if(sessionStorage.getItem('age_verified')){
this.closePopup();
} else {
this.init();
}
}
init() {
document.body.classList.add('popup-open');
}
closePopup() {
document.body.classList.remove('popup-open');
document.querySelector('.age-verification__section').classList.add('popup-hide')
}
verifyAge() {
const ageToVerify = this.dataset.ageToVerify;
let calcAge;
switch(this.dataset.verifier){
case "full-date":
calcAge = this.ageCalculator();
break;
 
case "year-only":
const userinput = this.querySelector('input').value;
const currentYear = this.dataset.currentYear;
calcAge = currentYear - userinput;
break;
 
case "yes-no":
calcAge = this.querySelector('input').value;
break;
}
 
if(calcAge >= ageToVerify ) {
this.querySelector('.popup--error-message').classList.toggle('popup-hide');
this.closePopup();
sessionStorage.setItem('age_verified', 'true');
} else {
this.querySelector('.popup--error-message').classList.toggle('popup-hide');
const redirectLink = (function () {
window.location.href = this.dataset.redirectLink
}).bind(this);
 
setTimeout(redirectLink, 500)
}
}
 
ageCalculator() {
const userinput = Array.from(this.querySelectorAll('select'), (select) => select.value);
const dob = new Date(userinput);
const month_diff = Date.now() - dob.getTime();
const age_dt = new Date(month_diff);
const year = age_dt.getUTCFullYear();
const age = Math.abs(year - 1970);
 
return age
}
}
customElements.define('age-verifier', AgeVerifier);
</script>
<style>
.age-verification__section {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  overflow: hidden;
  background: #000000c9;
}
.age-verification__section > img {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.age-verification__pop-up {
  width: 40rem;
  background: var(--select-box-background);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  gap: 2rem;
}
.age-verification__pop-up > * {
  margin: 0;
  line-height: 1;
}
.age-verification__pop-up img {
  width: 100%;
  height: auto;
}
.age-verification__input--container {
  font-size: 1.4em;
  width: 100%;
  border-radius: 0px;
  border: 2px solid transparent;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.age-verification__select {
  position: relative;
  display: flex;
  width: 100%;
  height: 4rem;
  line-height: 2;
  overflow: hidden;
  border-radius: 0.25em;
  color: var(--select-background);
}
.age-verification__select::after {
  content: "\25BC";
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 0.5rem;
  background: var(--select-button);
  cursor: pointer;
  pointer-events: none;
  transition: 0.25s all ease;
  width: auto;
  height: 100%;
  aspect-ratio: 1;
}
.age-verification__select:hover:after {
  filter: brightness(0.5);
}
.age-verification__select:hover::after {
  color: var(--select-color);
}
.age-verification__input--container select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  border: 0 !important;
  flex: 1;
  padding: 0 0.5em;
  cursor: pointer;
  font-size: 1em;
  background: var(--select-background);
  color: var(--select-color);
}
.age-verification__input--container select::-ms-expand {
  display: none;
}
.age-verification__pop-up .age-verification__button {
  padding: 1rem 2rem;
  letter-spacing: 1.5px;
  border: none;
  appearance: none;
  background-color: transparent;
  border: 2px solid var(--popup-btn-color);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--popup-btn-color);
  cursor: pointer;
  display: flex;
  margin: auto;
  outline: none;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  will-change: transform;
  width: max-content;
}
.age-verification__pop-up .age-verification__button:disabled {
  pointer-events: none;
}
.age-verification__pop-up .age-verification__button:hover {
  color: var(--popup-btn-background);
  background-color: var(--popup-btn-color);
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}
.age-verification__pop-up .age-verification__button:active {
  box-shadow: none;
  transform: translateY(0);
}
.popup--error-message {
  position: relative;
  display: block;
  padding: 0.5rem 0;
}
.popup--terms {
  text-align: center;
  color: var(--terms-color);
}
.popup--terms a {
  color: var(--terms-link-color);
}
.age-verification__section input[type="number"] {
  height: 4rem;
  width: 20rem;
  display: flex;
  margin: auto;
  font-size: 2.5rem;
  text-align: center;
}
.yes-no--container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 1rem;
}
.yes-no--container > * {
  max-width: 18rem;
  font-size: 1.5rem;
}
body.popup-open {
  overflow: hidden;
}
.popup-hide {
  visibility: hidden;
}
</style>
{% endif %}
{% schema %}
{
  "name": "Age verification pop-up",
  "class": "age-verification__section",
  "settings": [
    {
      "type": "range",
      "id": "age_to_verify",
      "min": 10,
      "max": 100,
      "step": 1,
      "unit": "y/o",
      "label": "Age to verify",
      "info": "Please do not leave blank",
      "default": 18
    },
    {
      "type": "image_picker",
      "id": "section_image",
      "label": "Section image"
    },
    {
      "type": "color",
      "label": "Pop up background color",
      "id": "section_bg",
      "default": "#ececec"
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Pop-up border radius",
      "default": 0
    },
    {
      "type": "select",
      "id": "show_on_pages",
      "options": [
        {
          "value": "product",
          "label": "Product pages"
        },
        {
          "value": "page",
          "label": "Pages"
        },
        {
          "value": "blog",
          "label": "Blogs"
        },
        {
          "value": "index",
          "label": "Home page"
        },
        {
          "value": "product_collection",
          "label": "Collection and product pages"
        },
        {
          "value": "all",
          "label": "All pages"
        }
      ],
      "default": "all",
      "label": "Show on pages"
    },
    {
      "type": "url",
      "id": "specific_url",
      "label": "Specify URL for pop up to appear",
      "info": "Leave blank if you do not want to appear on specific URL"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    },
    {
      "type": "heading",
      "name": "Heading",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Welcome"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h3",
              "label": "small"
            },
            {
              "value": "h2",
              "label": "medium"
            },
            {
              "value": "h1",
              "label": "large"
            }
          ],
          "default": "h1",
          "label": "Heading size"
        },
        {
          "type": "color",
          "label": "Heading text color",
          "id": "heading_color",
          "default": "#000"
        }
      ]
    },
    {
      "type": "content",
      "name": "Content",
      "settings": [
        {
          "type": "richtext",
          "id": "content",
          "label": "Content text",
          "default": "<p>Please verify your age to continue</p>"
        },
        {
          "type": "color",
          "label": "Content text color",
          "id": "content_color",
          "default": "#000"
        }
      ]
    },
    {
      "type": "full_date",
      "name": "Full date style",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Make sure to use ONE style"
        },
        {
          "type": "color",
          "label": "Select background color",
          "id": "input_bg",
          "default": "#000"
        },
        {
          "type": "color",
          "label": "Select text color",
          "id": "input_color",
          "default": "#fff"
        },
        {
          "type": "color",
          "label": "Dropdown background",
          "id": "dropdown_bg",
          "default": "#000"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label",
          "default": "Continue"
        },
        {
          "type": "text",
          "id": "error_msg",
          "label": "Error message when below age",
          "default": "Sorry, you cannot enter. You will be redirected"
        },
        {
          "type": "text",
          "id": "redirect_link",
          "label": "Redirect link",
          "info": "Link to where will be redirected when below age",
          "default": "https://www.google.com"
        },
        {
          "type": "color",
          "label": "Button background color",
          "id": "button_bg_color",
          "default": "#fff"
        },
        {
          "type": "color",
          "label": "Button text color",
          "id": "button_text_color",
          "default": "#000"
        }
      ]
    },
    {
      "type": "year_only",
      "name": "Year only style",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Make sure to use ONE style"
        },
        {
          "type": "text",
          "id": "button_label_year_only",
          "label": "Button label",
          "default": "Continue"
        },
        {
          "type": "text",
          "id": "error_msg_year_only",
          "label": "Error message when below age",
          "default": "Sorry, you cannot enter. You will be redirected"
        },
        {
          "type": "text",
          "id": "redirect_link_year_only",
          "label": "Redirect link",
          "info": "Link to where will be redirected when below age",
          "default": "https://www.google.com"
        },
        {
          "type": "color",
          "label": "Input background",
          "id": "input_bg",
          "default": "#fff"
        },
        {
          "type": "color",
          "label": "Button background color",
          "id": "button_bg_color_year_only",
          "default": "#fff"
        },
        {
          "type": "color",
          "label": "Button text color",
          "id": "button_text_color_year_only",
          "default": "#000"
        }
      ]
    },
    {
      "type": "yes_no",
      "name": "Yes/No style",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Make sure to use ONE style"
        },
        {
          "type": "text",
          "id": "button_label_yes",
          "label": "Button YES label",
          "default": "Yes, I am over 21"
        },
        {
          "type": "text",
          "id": "button_label_no",
          "label": "Button NO label",
          "default": "No, I am under 21"
        },
        {
          "type": "text",
          "id": "error_msg_yes_no",
          "label": "Error message when below age",
          "default": "Sorry, you cannot enter. You will be redirected"
        },
        {
          "type": "text",
          "id": "redirect_link_yes_no",
          "label": "Redirect link",
          "info": "Link to where will be redirected when below age",
          "default": "https://www.google.com"
        },
        {
          "type": "color",
          "label": "Button background color",
          "id": "button_bg_color_yes_no",
          "default": "#fff"
        },
        {
          "type": "color",
          "label": "Button text color",
          "id": "button_text_color_yes_no",
          "default": "#000"
        }
      ]
    },
    {
      "type": "terms",
      "name": "Terms",
      "settings": [
        {
          "type": "richtext",
          "id": "terms",
          "label": "Terms text",
          "info": "Please provide the link of your the pages",
          "default": "<p>By entering this site you are agreeing to the Terms of use and Privacy policy</p>"
        },
        {
          "type": "color",
          "label": "Terms text color",
          "id": "terms_color",
          "default": "#000"
        },
        {
          "type": "color",
          "label": "Terms link color",
          "id": "terms_link_color",
          "default": "#000"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Age verification pop-up",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "content"
        },
        {
          "type": "full_date"
        }
      ]
    }
  ]
}
{% endschema %}

 

Step #3. Open theme.liquid file

Go to the layout folder, and open the theme.liquid file. Find the <main>, then paste the code above it. Make sure to click SAVE

 {% section "age-verifier" %}

 

Step #4. Customize theme

Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Make sure to SAVE once you are done customizing.

Conclusion

Adding an age verification pop-up to your Shopify store can be a valuable tool for legal compliance, brand protection, and content control, particularly if you sell age-restricted products. However, ensure you follow the proper steps and consider consulting a developer if needed to avoid any issues with your store's functionality.

0 comments

Leave a comment