custom.scss
Copy CSS content into custom.scss.liquid
/***********************************
************************************
POPUP
************************************
***********************************/
#dialog {
h1, h2, h3, h4{
color: black !important;
}
color: black;
}
#mask {
position: absolute;
left: 0;
top: 0;
z-index: 9000;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
#boxes .window {
position: absolute;
left: 0;
top: 0;
height: 200px;
display: none;
z-index: 9999;
padding: 20px;
text-align: center;
}
#boxes #dialog {
height: auto;
padding: 10px;
background-color: #ffffff;
font-family: 'Segoe UI Light', sans-serif;
font-size: 15pt;
padding: 30px
}
#boxes .close {
font-size: 21px;
font-weight: bold;
color: #FFF;
background-color: #C52A2A;
padding: 1rem 1.5rem;
border-radius: 100%;
opacity: 1;
position: absolute;
top: -17px;
right: -22px;
}
#boxes.hide-account-holder{
display: none!important
}
.popup-main {
float: right;
padding: 20px;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
background: #dbdbdb;
h3 {
color: #000;
margin-bottom: 4rem;
font-size: 2rem;
}
.input-group {
position: relative;
left: 5%;
}
button.btn.btn-signup {
float: left;
}
input#mc-embedded-subscribe {
pointer-events: none;
background-color: #B5B5B5;
border: none;
}
label {
font-size: 1.2rem;
padding-left: 10px;
margin-bottom: 15px;
}
}
.popup-image-wrapper{
float: left;
}
img.popup-image {
margin: auto;
}
input#mce-EMAIL, input#mce-FNAME, input#mce-LNAME, .indicates-required, .popup-main .input-group,
.popup-main label, #mc_embed_signup .mc-field-group input {
color: #000;
}
.mc-field-group{
padding-top: 10px;
input{
border: 1px solid black;
max-width: 100%;
min-width: 100%;
}
label{
width: 100%;
}
}
#dialog{
left: 20%;
margin-top: 80px;
}
.promo-discount-wrapper{
background: #777;
}
.promo-discount-wrapper h2{
margin-top: 5px;
color: white !important;
font-size: 30px;
}
.promo-newsletter-message{
margin-bottom: 20px;
}
#mc-embedded-subscribe{
background: black !important;
color: white !important;
text-transform: uppercase;
font-weight: 600;
border: 1px solid black;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}
.subscribe-button-wrapper{
padding-top: 10px;
}
.size1of2{
float: left !important;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.age-checkbox{
margin-top: 0px !important;
display: inline-block;
min-width:0 !important;
width: 5% !important;
}
.question-age{
min-width: 0 !important;
width: initial !important;
display: inline-block;
width: 75% !important;
}
.promo-message-wrapper{
margin-top: 10px;
}
h1#promo-message {
margin-top: 0;
}
h1#promo-message small {
color: #000 !important;
}
.promo-discount-wrapper {
margin-top: 20px;
}
.promo-newsletter-message h2 {
margin-top: 0;
}
.promo-newsletter-wrapper {
padding-bottom: 10px;
background: #fafafa;
padding-top: 10px;
}
button.btn.btn-signup {
background: black;
color: white;
text-transform: uppercase;
font-weight: 600;
border-radius: 0;
}
input#fieldEmail {
border: 1px solid black;
border-radius: 0px;
color: black;
}
@media (min-width:768px){
#dialog{
margin-left: 15%;
}
}
@media (min-width: 1200px ){
.popup-main{
min-height: 600px;
}
#dialog{
margin-left: 25%;
}
}
@media (max-width:767px){
#dialog{
margin-left: 0%;
}
#boxes .close {
top: 15px;
right: 15px;
}
.popup-main h3 {
margin-top: 0;
margin-bottom: 2rem;
}
#mc_embed_signup input {
border: 1px solid black;
}
.mc-field-group.email, .mc-field-group.city, .mc-field-group.state, .mc-field-group.zip {
right: 0;
position: relative;
}
#mc_embed_signup input {
display: block;
margin: 0 auto;
margin-bottom: 4px;
}
#boxes #dialog {
padding: 20px;
}
div#dialog {
left: 0 !important;
top: 0 !important;
left: 5% !important;
margin-top: 5% !important;
}
#mc_embed_signup label {
margin-bottom: 5px !important;
}
.mc-field-group.zip {
}
input#mc-embedded-subscribe {
}
.checkboxz {
max-width: 15px;
float: left;
display: inline !important;
}
label.question-age {
float: left;
}
}
popup-start-date.liquid
Create snippet called popup-start-date.liquid and add the following code:
<div id="promo-start-date" >
<div id="promo-start-year"> {{ settings.popup-start-year }} </div>
<div id="promo-start-month"> {{ settings.popup-start-month }} </div>
<div id="promo-start-day"> {{ settings.popup-start-day }} </div>
</div>
<style>
#promo-start-date{
display: none !important;
opacity: 0;
visibility: hidden;
}
</style>
<script>
//Shows Popup If After Start Date
window.onload = function(event) {
/***********************
START DATE
************************/
{% if settings.popup-enable-start-date %}
console.log('evaulating date');
currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var startYear = document.getElementById("promo-start-year").innerHTML;
var startMonth = document.getElementById("promo-start-month").innerHTML - 1;
var startDay = document.getElementById("promo-start-day").innerHTML;
startDate = new Date( startYear, startMonth, startDay);
console.log("the current date is " + currentTime);
console.log("the promo starts " + startDate);
//the plus implies milliseconds
if(+startDate < +currentTime){
console.log('showing promo');
document.getElementById("boxes").style.display = "initial";
document.getElementById("dialog").style.display = "initial";
}
{% endif %}
/***********************
COOKIES
************************/
{% if settings.popup-enable-cookies %}//if displaying popup is based off most-recent visit
console.log('cookie debug for popup');
{% if settings.popup-cookie-duration%}
cookie_days = {{ settings.popup-cookie-duration }};
{%else%}
cookie_days = 30;
{% endif %}
cookie_name = 'popup-last-shown';
cookie_end = cookie_days*24*60*60; //X days * 24 hours/day * 60 minutes/hour * 60 seconds/minute
if( !docCookies.hasItem(cookie_name) ){ //if cookie does not exist
console.log('customer hasnt seen popup, writing new cookie');
docCookies.setItem( cookie_name, new Date(), cookie_end ); //show popup, make cookie with life of cookie_end
}
else{ //if it does exist, it hasn't expired, so hide popup
console.log('customer has seen popup, last at:'+docCookies.getItem(cookie_name));
$( "#boxes" ).hide();
}
{% endif %}
};
</script>
<script>
/*\
|*|
|*| :: cookies.js ::
|*|
|*| A complete cookies reader/writer framework with full unicode support.
|*|
|*| Revision #1 - September 4, 2014
|*|
|*| https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
|*| https://developer.mozilla.org/User:fusionchess
|*| https://github.com/madmurphy/cookies.js
|*|
|*| This framework is released under the GNU Public License, version 3 or later.
|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
|*| Syntaxes:
|*|
|*| * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
|*| * docCookies.getItem(name)
|*| * docCookies.removeItem(name[, path[, domain]])
|*| * docCookies.hasItem(name)
|*| * docCookies.keys()
|*|
\*/
var docCookies = {
getItem: function (sKey) {
if (!sKey) { return null; }
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
removeItem: function (sKey, sPath, sDomain) {
if (!this.hasItem(sKey)) { return false; }
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
return true;
},
hasItem: function (sKey) {
if (!sKey) { return false; }
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: function () {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
return aKeys;
}
};
</script>
popup.js
Create a file, add to
assets folder and paste the following code:
// popup.js to be used with popup.liquid
//
// IMPORTANT! READ!
// certain global variables like popupStartDateEnabled
// are set within popup.liquid, as shopify can't evaluate liquid in .js files
// if errors are thrown during evaluation, this may be due to errors in popup.liquid
/************************
*************************
Cookie Functions
*************************
*************************/
var docCookies = {
getItem: function (sKey) {
if (!sKey) { return null; }
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
removeItem: function (sKey, sPath, sDomain) {
if (!this.hasItem(sKey)) { return false; }
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
return true;
},
hasItem: function (sKey) {
if (!sKey) { return false; }
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: function () {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
return aKeys;
}
};
/*************************************************
**************************************************
Evaluate Start Date
returns true if Current Time is past start date
returns false if Current Date is before startDate
**************************************************
**************************************************/
evaluateStartDate = function(){
console.log('evaulating date');
currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var startYear = document.getElementById("promo-start-year").innerHTML;
var startMonth = document.getElementById("promo-start-month").innerHTML - 1;
var startDay = document.getElementById("promo-start-day").innerHTML;
startDate = new Date( startYear, startMonth, startDay);
console.log("the current date is " + currentTime);
console.log("the promo starts " + startDate);
//the plus implies milliseconds
if(+startDate < +currentTime){
console.log('past start date');
return true;
}else{
console.log('not past start date');
return false;
}
}
/*************************************************
**************************************************
Evaluate Cookies
returns true if cookie was set
returns false if cookie already exists and hasn't expired
**************************************************
**************************************************/
evaluateCookies = function(){
cookie_name = 'popup-last-shown';
cookie_end = cookie_days*24*60*60; //X days * 24 hours/day * 60 minutes/hour * 60 seconds/minute
if( !docCookies.hasItem(cookie_name) ){ //if cookie does not exist
console.log('customer hasnt seen popup, writing new cookie');
docCookies.setItem( cookie_name, new Date(), cookie_end ); //show popup, make cookie with life of cookie_end
return true;
}
else{ //if it does exist, it hasn't expired, so hide popup
console.log('customer has seen popup, last at:'+docCookies.getItem(cookie_name));
return false;
}
}
/************************
*************************
Document Ready
*************************
*************************/
console.log('popup-js');
$(document).ready(function() {
var id = '#dialog';
if (sessionStorage.getItem('advertOnce') == 'true') {
$('#boxes').css('display', 'initial');
sessionStorage.setItem('advertOnce','true');
}
//Window Resize
resize = function(){
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({
'width': maskWidth,
'height': maskHeight
});
}
resize();
window.onresize = resize;
// Show or Hide Logic
pastStartDate = true;
cookieSet = true;
if( popupStartDateEnabled ){
pastStartDate = evaluateStartDate();
}
if( popupCookiesEnabled ){
cookieSet = evaluateCookies();
}
if( !pastStartDate || !cookieSet ){
$( "#boxes" ).hide();
}else{
document.getElementById("boxes").style.display = "initial";
document.getElementById("dialog").style.display = "initial";
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow", 0.9);
$(id).fadeIn(2000);
}
//Callbacks
$('.window .close').click(function(e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
$('#mask').click(function() {
$(this).hide();
$('.window').hide();
});
$('input.checkboxz').change(function() {
if ($(this).is(':checked')) {
console.log('hello im on the console');
$('input#mc-embedded-subscribe').css({"pointer-events": "initial", "background-color": "#932239"});
} else {
console.log('Unchecked');
$('input#mc-embedded-subscribe').css({"pointer-events": "none", "background-color": "#B5B5B5"});
}
});
var winH = $(window).height();
var winW = $(window).width();
});
Popup.liquid
Create a snippet named
popup.liquid and paste the following code:
{% if settings.popup-enable %}
{% unless customer and settings.popup-hide-account-holders %}
<div id="boxes">
<div id="dialog" class="window col-xs-11 col-sm-8 col-md-8 col-lg-6">
<!-- PROMO IMAGE -->
{% if settings.popup-enable-image %}
<div class="popup-image-wrapper col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img class="popup-image" src="{{ 'popup-image-file.png' | asset_url }}">
</div>
{% endif %}
<!-- PROMOTIONAL MESSAGE -->
{% if settings.popup-message %}
<div class="promo-message-wrapper col-xs-12 col-sm-12 col-md-6 col-lg-6">
<h1 id="promo-message"> {{ settings.popup-message }}</h1>
</div>
{% endif %}
<!-- PROMOTIONAL MESSAGE -->
{% if settings.popup-message %}
<div class="promo-message-secondary-wrapper col-xs-12 col-sm-12 col-md-6 col-lg-6">
<p id="promo-message-secondary"> {{ settings.popup-message-secondary }}</p>
</div>
{% endif %}
<!-- DISCOUNT CODE -->
{% if settings.popup-enable-discount %}
<div class="promo-discount-wrapper col-xs-12 col-sm-12 col-md-6 col-lg-6">
<h2>
Your Code: {{ settings.popup-discount-code }}
</h2>
</div>
{% endif %}
<!-- NEWSLETTER -->
{%if settings.popup-enable-newsletter %}
<!-- CUSTOM -->
{%if settings.popup-enable-custom-newsletter %}
{{ settings.popup-custom-newsletter }}
<!-- DEFAULT -->
{% else %}
<div class="promo-newsletter-wrapper col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="promo-newsletter-message">
<h2> {{ settings.popup-newsletter-message }} </h2>
</div>
{% include 'newsletter-signup-form' %}
</div>
{% endif %}
{% endif %}
<!-- PROMOTIONAL MESSAGE -->
{% if settings.popup-disclaimer %}
<div class="promo-disclaimer-wrapper col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p id="promo-disclaimer"> <small>{{ settings.popup-disclaimer }}</small></p>
</div>
{% endif %}
<a href="#" class="close">X</a>
</div>
<div id="mask"></div>
</div>
<!-- Dates For Popup Debut -->
<div id="promo-start-date" style="display: none !important; opacity: 0; visibility: hidden;">
<div id="promo-start-year"> {{ settings.popup-start-year }} </div>
<div id="promo-start-month"> {{ settings.popup-start-month }} </div>
<div id="promo-start-day"> {{ settings.popup-start-day }} </div>
</div>
<!-- DO NOT REMOVE THIS SCRIPT TAG -->
<script>
// This sets global variables which are used by popup.js
// functionality will break if these are removed
{% if settings.popup-enable-start-date %}
popupStartDateEnabled = true;
{%else%}
popupStartDateEnabled = false;
{% endif %}
{% if settings.popup-enable-cookies %}
popupCookiesEnabled = true;
{% else %}
popupCookiesEnabled = false;
{% endif %}
{% if settings.popup-cookie-duration%}
cookie_days = {{ settings.popup-cookie-duration }};
{%else%}
cookie_days = 30;
{% endif %}
</script>
{{ 'popup.js' | asset_url | script_tag }}
<style>
{{ settings.additional-css }}
</style>
{% endunless %}
{% endif %}
settings_schema.json
Open settings_schema.json and add the following code
{
"name": "Popup",
"icon": "promotions",
"settings": [
{
"type": "checkbox",
"id": "popup-enable",
"label": "Enable Popup"
},
{
"type": "checkbox",
"id": "popup-enable-cookies",
"label": "Enable Cookies",
"default": false
},
{
"type": "text",
"id": "popup-cookie-duration",
"label": "Days Until Reshow Popup",
"default": "30"
},
{
"type": "checkbox",
"id": "popup-hide-account-holders",
"label": "Hide Popup to Account Holders",
"default": true
},
{
"type": "checkbox",
"id": "popup-enable-start-date",
"label": "Enable Popup Start Date",
"default": false
},
{
"type": "text",
"id": "popup-start-year",
"label": "Popup Start Year, e.g. (2016)"
},
{
"type": "text",
"id": "popup-start-month",
"label": "Popup Start Month, e.g. (12)"
},
{
"type": "text",
"id": "popup-start-day",
"label": "Popup Start Day, e.g. (12)"
},
{
"type": "textarea",
"id": "popup-message",
"label": "Popup Message"
},
{
"type": "textarea",
"id": "popup-message-secondary",
"label": "Secondary Popup Message"
},
{
"type": "checkbox",
"id": "popup-enable-discount",
"label": "Enable Popup Discount Code",
"default": true
},
{
"type": "textarea",
"id": "popup-discount-code",
"label": "Popup Discount Code"
},
{
"id": "popup-enable-image",
"type": "checkbox",
"label": "Enable Popup Image",
"default": false
},
{
"type": "image",
"id": "popup-image-file.png",
"label": "Popup Image File"
},
{
"type": "checkbox",
"id": "popup-enable-newsletter",
"label": "Enable Newsletter",
"default": false
},
{
"type": "textarea",
"id": "popup-newsletter-message",
"label": "Newsletter Message"
},
{
"type": "checkbox",
"id": "popup-enable-custom-newsletter",
"label": "Enable Custom Newsletter",
"default": false
},
{
"type": "textarea",
"id": "popup-custom-newsletter",
"label": "Custom Newsletter"
},
{
"type": "textarea",
"id": "popup-disclaimer",
"label": "Add Disclaimer"
},
{
"type": "textarea",
"id": "additional-css",
"label": "Additional CSS Styling"
}
]
},
theme.liquid
Open theme.liquid and add the following code above the wrap div.
<!-- Add this above the wrap on theme.liquid -->
{% if template == 'index' or template == 'cart' %}
{% include 'popup' %}
{% endif %}