Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I've added a age check to our store, and its working great. But unfortunately we are unable customize our theme anymore as the pop up message still showing even if we pressed ENTER. Seeking to your solution and support.
Could I get a little more info on this issue?
-Possibly your store URL to see this issue.
-Which age checker are you using?
-Which theme are you using?
Hello
we are using the below age check, after implementing its working fine. The issue is when are trying to edit or Theme Dawn
We are not able to access and the pop up message keep displaying on the screen. Check the below screenshot
{% assign enter_date_of_birth = false %}
{% assign age = 18 %}
{% capture adult_header %}
Adults only (18+)
{% endcapture %}
{% capture adult_text %}
This website contains adult material and is only suitable for those 18 years or older. Click Enter only if you are at least 18 years of age.
{% endcapture %}
<div id="prompt-background">
<div id="age-check-prompt" class="modal-prompt">
<h1>
{{ adult_header }}
</h1>
<p>
{{ adult_text }}
</p>
<div{% unless enter_date_of_birth %} style="display:none;"{% endunless %}>
<select name="bmonth" id="bmonth"{% unless enter_date_of_birth %} value="1"{% endunless %}>
{% if enter_date_of_birth %}
<option value="1">- Month -</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
{% endif %}
</select>
<select name="bday" id="bday"{% unless enter_date_of_birth %} value="1"{% endunless %}>
{% if enter_date_of_birth %}
<option value="1">- Day -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
{% endif %}
</select>
<select name="byear" id="byear"{% unless enter_date_of_birth %} value="1950"{% endunless %}>
{% if enter_date_of_birth %}
<option value="2015">- Year -</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
{% endif %}
</select>
<div style="clear:both; margin-bottom:15px"></div>
</div>
<button id="submit_birthdate" class="button-enter btn styled-submit" onclick="ageCheck()" style="display:inline-block">Enter</button>
<span style="padding: 0 4px">or</span>
<a href="http://google.com/" id="button-exit" name="button-exit">Exit</a>
</div>
</div>
<script>
function ageCheck() {
var min_age = {{ age }}; // Set the minimum age.
var year = parseInt(document.getElementById('byear').value);
var month = parseInt(document.getElementById('bmonth').value);
var day = parseInt(document.getElementById('bday').value);
var theirDate = new Date((year + min_age), month, day);
var today = new Date;
if ((today.getTime() - theirDate.getTime()) < 0) {
window.location = 'http://google.com'; //enter domain url where you would like the underaged visitor to be sent to.
} else {
var days = 14; //number of days until they must go through the age checker again.
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = 'isAnAdult=true;'+expires+"; path=/";
location.reload();
};
};
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
};
var isAnAdult = readCookie('isAnAdult');
if (isAnAdult) {
document.write("<style> #prompt-background { display: none; }</style>");
};
</script>
<style>
.modal-prompt {
background: #fff;
border-radius: 2px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
width: 330px;
height: auto;
margin: 0 auto;
padding: 20px 35px 30px 35px;
position: relative;
top: 25%;
z-index: 1000000;
}
.modal-prompt p, .modal-prompt h1 {
color: #555555;
}
#prompt-background {
background: url("{{ 'age-check-background.jpg' | asset_url }}") no-repeat center center fixed #555;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9999999;
}
.modal-prompt select { float: left; margin-right: 10px; }
</style>
You should still be able to click the Enter button correct? With the theme editor, you have to click inside the window then the button you want to click. If that doesn't work, you can try something like this:
<script>
document.addEventListener('DOMContentLoaded', function() {
var isShopifyAdmin = window.location.href.includes("https://admin.shopify.com/");
var isAnAdult = readCookie('isAnAdult');
if (!isShopifyAdmin && !isAnAdult) {
document.getElementById('prompt-background').style.display = 'block';
} else {
document.getElementById('prompt-background').style.display = 'none';
}
// Your existing ageCheck function
function ageCheck() {
// ... existing code for ageCheck ...
}
// Your existing readCookie function
function readCookie(name) {
// ... existing code for readCookie ...
}
// Any other code/functions related to your age verification feature
});
</script>
With this, you might be able to hide the popup when in the admin area.
Yes I can still press the Enter bottom but I will stay the same.
the script you sent where exactly we shuould paste it
Thank you
You can try adding the following code right before the closing</body> tag on your theme.liquid file:
<script>
document.addEventListener('DOMContentLoaded', function() {
var isShopifyAdmin = window.location.href.includes("https://admin.shopify.com/");
if (!isShopifyAdmin) {
document.getElementById('prompt-background').style.display = 'block';
} else {
document.getElementById('prompt-background').style.display = 'none';
}</script>
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025