Age Verification

Age Verification

HarringtonGifts
Visitor
1 0 0

Im in the process of setting up a store, some products will be 18+ others will not.

 

Is it possible to only have a verification on certain collections only on the site rather than the whole page when you enter, as if you are under 18 but wanting to buy one of our normal products you would not be able to get past the 18+ Prompt. 

Reply 1 (1)

Alex-A13
Excursionist
12 1 1

Hi @HarringtonGifts 

1- Note the handles (URLs) of the collections that contain 18+ products. For example, if a collection URL is yourstore.com/collections/adult-products, then the handle is adult-products.
2- Keep a list of these handles for the code customization.
3- Go to Online Store > Themes > Actions > Edit Code.
4- In the Snippets folder, click Add a new snippet and name it age-verification.
5-  Paste this code into the snippet:
<div id="age-verification-popup" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 9999; color: white; text-align: center; padding-top: 10%;">
<h2>Are you 18 or older?</h2>
<button onclick="document.getElementById('age-verification-popup').style.display='none'; localStorage.setItem('ageVerified', 'true');">Yes, I am 18 or older</button>
<button onclick="window.location.href = '/collections/all';">No, take me back</button>
</div>
<script>
function showAgeVerificationPopup() {
if (!localStorage.getItem('ageVerified')) {
document.getElementById('age-verification-popup').style.display = 'block';
}
}
</script>
then save

6- In Edit Code, navigate to the collection.liquid file under Templates.
7- Add this on the top of the file:
{% assign age_restricted_collections = "adult-products, another-18-collection-handle" %}
{% if age_restricted_collections contains collection.handle %}
{% render 'age-verification' %}
<script> showAgeVerificationPopup(); </script>
{% endif %}

Replace "adult-products, another-18-collection-handle" with the actual handles of your age-restricted collections, separated by commas.
Then save it.

You can now go into a collection and try it out!
If you find this useful, please don't forget to put a thumbs up or mark it as solved!
Thank you!