- Open index.liquid and at the bottom of the code add {% include
'popup.liquid' %}
- Create a new snippet named popup.liquid and add the following code:<style> #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; width: 440px; height: 200px; display: none; z-index: 9999; padding: 20px; text-align: center; } #boxes #dialog { width: initial; height: auto; padding: 10px; background-color: #ffffff; font-family: 'Segoe UI Light', sans-serif; font-size: 15pt; } #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; } .popup-main { padding-bottom: 20px; overflow: hidden; } img.popup-logo { width: 200px; margin: auto; } #boxes #dialog { padding: 30px; max-width: 700px; } .popup-main h3 { color: #000; margin-bottom: 4rem; font-size: 2rem; } .popup-main .input-group { width: 100%; position: relative; left: 5%; } .popup-main button.btn.btn-signup { width: 70%; float: left; } .popup-main input#mc-embedded-subscribe { pointer-events: none; background-color: #B5B5B5; border: none; } .popup-main label { font-size: 1.2rem; padding-left: 10px; margin-bottom: 15px; } 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.email { position: relative; right: 11px; } .mc-field-group.city { right: -20px; position: relative; } .mc-field-group.state { right: -17px; position: relative; } .mc-field-group.zip { position: relative; right: -6px; } .mc-field-group.email input { margin-right: 5px; position: relative; } /* =============================== MEDIA QUERIES =============================== */ @media (max-width:767px){ #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; width: 90% !important; margin-top: 5% !important; } #mc_embed_signup label { margin-bottom: 5px !important; } #mc_embed_signup input { width: 90%; } .mc-field-group.zip { margin-bottom: 15px; } input#mc-embedded-subscribe { margin-top: 10px !important; } .checkboxz { max-width: 15px; float: left; display: inline !important; } label.question-age { float: left; } } </style> <div id="boxes" style="display: none;"> <div id="dialog" class="window"> <img class="popup-logo" src="{{ 'logo-image-file.png' | asset_url }}"> <div class="popup-main"> <h3>Be the first to know about exclusive deals, new arrivals, and have access to special discounts!</h3> {% comment %} {% include 'newsletter-signup-form' %} <input id="checkbox" type="checkbox"> <label>Are you at least 13 years of age or older?</label> {% endcomment %} <!-- Begin MailChimp Signup Form --> <div id="mc_embed_signup"> <form action="//OneLiveMedia.us1.list-manage.com/subscribe/post?u=83280adac6bd89afc15222bc4&id=8f14aabedb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <div class="mc-field-group email"> <label for="mce-EMAIL">Email Address <span class="asterisk">*</span> </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> </div> <div class="mc-field-group fname"> <label for="mce-FNAME">First Name </label> <input type="text" value="" name="FNAME" class="" id="mce-FNAME"> </div> <div class="mc-field-group lname"> <label for="mce-LNAME">Last Name </label> <input type="text" value="" name="LNAME" class="" id="mce-LNAME"> </div> <div class="mc-field-group city"> <label for="mce-MMERGE3">City </label> <input type="text" value="" name="MMERGE3" class="" id="mce-MMERGE3"> </div> <div class="mc-field-group state"> <label for="mce-MMERGE4">State </label> <input type="text" value="" name="MMERGE4" class="" id="mce-MMERGE4"> </div> <div class="mc-field-group size1of2 zip"> <label for="mce-MMERGE5">Zip Code </label> <input type="number" name="MMERGE5" class="" value="" id="mce-MMERGE5"> </div> <div class="mc-field-group input-group"> <input type="checkbox" value="1" name="group[4053][1]" id="mce-group[4053]-4053-0" class="checkboxz"> <label class="question-age">* Are you at least 13 years of age or older?</label> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_83280adac6bd89afc15222bc4_8f14aabedb" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </div> </form> </div> <!--End mc_embed_signup--> </div> <a href="#" class="close">X</a> </div> <div id="mask"></div> </div> <script> $(document).ready(function() { if (sessionStorage.getItem('advertOnce') !== 'true') { $('#boxes').css('display', 'initial'); sessionStorage.setItem('advertOnce','true'); } var id = '#dialog'; //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({ 'width': maskWidth, 'height': maskHeight }); //transition effect $('#mask').fadeIn(500); $('#mask').fadeTo("slow", 0.9); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH / 2 - $(id).height() / 2); $(id).css('left', winW / 2 - $(id).width() / 2); //transition effect $(id).fadeIn(2000); //if close button is clicked $('.window .close').click(function(e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#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"}); } }); }); </script>
- Sign in to Mailchimp and find the appropriate artist list.
-
Click Signup form > Embeded Forms
-
- Find the embed code and copy the form action URL and replace in the popup.liquid file.
- <form action="//OneLiveMedia.us1.list-manage.com/subscribe/post?u=83280adac6bd89afc15222bc4&id=8416af525b" >
- Replace the button code with the following:
- <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_83280adac6bd89afc15222bc4_8416af525b" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
Use left/right arrows to navigate the slideshow or swipe left/right if using a mobile device
'popup.liquid' %}