How To Add Custom Newsletter Popup in Shopify – Without Any App

Adding a custom newsletter popup to your Shopify store can be a great way to increase your subscriber list. In this video, I’ll show you how to add a custom popup without any app using the built-in Shopify code editor.

Include jQuery Code in Theme.liquid

Add the following code to theme.liquid file below <head> tag

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

Add jQuery code in global.js

Add the following code in global.js file

// jQuery WebSensePro Subscribe Popup 
// Triggers =  atendpage | onload | onidle
// Animations= fade | flyInRight | flyInLeft | flyInUp | flyInDown

!function(o){var n={trigger:"onload",animation:"fade",delay:100,showOnce:!1,autoClose:!1,scrollableModal:!1};o.fn.websenseprosubscribe=function(s){var e=o.extend({},n,s),i=o(this),a=!1,l=!1;switch(i.addClass("sb"),o.fn.openWindow=function(){o(this).is(":hidden")&&!1==a&&!1==l&&(l=!0,setTimeout(function(){!0==e.scrollableModal?o(".sb-overlay").length<1&&(o("body").append("<div class='sb-overlay'><div class='sb-close-backdrop'></div><div class='sb sb-withoverlay'>"+o(".sb").html()+"</div></div>"),o(".sb-close-backdrop, .sb-close-btn").one("click",function(){return o(".sb.sb-withoverlay").closeWindow(),!1}),o(".sb.sb-withoverlay").removeClass("sb-animation-"+e.animation.replace("In","Out")).addClass("sb-animation-"+e.animation),setTimeout(function(){o(".sb.sb-withoverlay").show(),o("body").addClass("sb-open sb-open-with-overlay")},300)):o(".sb-overlay").length<1&&(o("body").append("<div class='sb-overlay'><div class='sb-close-backdrop'></div></div>"),o(".sb").removeClass("sb-animation-"+e.animation.replace("In","Out")).addClass("sb-animation-"+e.animation),o(".sb-close-backdrop, .sb-close-btn").one("click",function(){return o(".sb").closeWindow(),!1}),setTimeout(function(){o(".sb").show(),o("body").addClass("sb-open")},300)),!0==e.showOnce&&(a=!0),l=!1},e.delay))},o.fn.closeWindow=function(){o(this).is(":visible")&&!1==l&&(l=!0,!0==e.scrollableModal?(o(".sb.sb-withoverlay").removeClass("sb-animation-"+e.animation).addClass("sb-animation-"+e.animation.replace("In","Out")),setTimeout(function(){o(".sb.sb-withoverlay").hide(),o("body").removeClass("sb-open sb-open-with-overlay"),setTimeout(function(){o(".sb-overlay").remove()},300)},300)):(o(".sb").removeClass("sb-animation-"+e.animation).addClass("sb-animation-"+e.animation.replace("In","Out")),setTimeout(function(){o(".sb").hide(),o("body").removeClass("sb-open"),setTimeout(function(){o(".sb-overlay").remove()},300)},300)),l=!1)},o.fn.scrollDetection=function(n,s){var e,i=new Date().getTime();o(window).scroll(function(){var n=new Date().getTime();n-i>400&&(o(this).trigger("scrollStart"),i=n),clearTimeout(e),e=setTimeout(function(){o(window).trigger("scrollEnd")},300)}),"scrollStart"==n&&o(window).bind("scrollStart",function(){o(window).unbind("scrollEnd"),s()}),"scrollEnd"==n&&o(window).bind("scrollEnd",function(){o(window).unbind("scrollStart"),s()})},e.trigger){case"atendpage":o(window).scroll(function(){var n=o(window).scrollTop();n>=o(document).height()-o(window).height()?i.openWindow():n+300<o(document).height()-o(window).height()&&!0==e.autoClose&&i.closeWindow()});break;case"onload":o(window).on("load",function(){i.openWindow(),!0==e.autoClose&&i.scrollDetection("scrollStart",function(){i.closeWindow()})});break;case"onidle":o(window).on("load",function(){i.scrollDetection("scrollEnd",function(){i.openWindow()}),!0==e.autoClose&&i.scrollDetection("scrollStart",function(){i.closeWindow()})})}}}(window.jQuery);$(document).ready(function(){"true"!==localStorage.popupShown&&($(".subscribe-me").websenseprosubscribe(),localStorage.popupShown="true")});

Add code in base.css file

Add the following code in base.css file

.sb,.sb.sb-withoverlay{left:50%;margin-left:-250px}.sb,.sb-overlay{opacity:0;position:fixed}.sb{display:none;top:50%;margin-top:-150px;width:500px;height:200px;background:#fff;padding:25px;box-shadow:0 2px 3px rgba(0,0,0,.5);-moz-box-shadow:0 2px 3px rgba(0,0,0,.5);-webkit-box-shadow:0 2px 3px rgba(0,0,0,.5);z-index:1999}.sb-close-backdrop,.sb-overlay{top:0;left:0;width:100%;height:100%}.sb h2{margin-top:0}.sb p{font-size:20px}.sb form input[type=email],.sb form input[type=password],.sb form input[type=text],.sb form textarea{margin:0;border:none;background:#f7f7f7;padding:18px 10px;font-size:16px;width:79%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.sb form input[type=submit]{padding:18px 10px;background:#000;font-size:16px;text-transform:uppercase;border:none;color:#fff;width:20%;margin:0}.sb .sb-close-btn{position:absolute;right:10px;top:10px;color:#ccc}.sb.sb-withoverlay{position:absolute;top:200px}.sb-open.sb-open-with-overlay{overflow:hidden}.sb-open .sb,.sb-open .sb-overlay{opacity:1}.sb-overlay{background:rgba(0,0,0,.58);right:0;z-index:100;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;overflow:auto}.sb-close-backdrop{position:absolute;cursor:pointer}[class*=" sb-animation-"],[class^=sb-animation-]{-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s}.sb-animation-flyInRight{-webkit-animation-name:flyInRight;-moz-animation-name:flyInRight;-o-animation-name:flyInRight;animation-name:flyInRight}.sb-animation-flyOutRight{-webkit-animation-name:flyOutRight;-moz-animation-name:flyOutRight;-o-animation-name:flyOutRight;animation-name:flyOutRight}.sb-animation-flyInLeft{-webkit-animation-name:flyInLeft;-moz-animation-name:flyInLeft;-o-animation-name:flyInLeft;animation-name:flyInLeft}.sb-animation-flyOutLeft{-webkit-animation-name:flyOutLeft;-moz-animation-name:flyOutLeft;-o-animation-name:flyOutLeft;animation-name:flyOutLeft}.sb-animation-flyInUp{-webkit-animation-name:flyInUp;-moz-animation-name:flyInUp;-o-animation-name:flyInUp;animation-name:flyInUp}.sb-animation-flyOutUp{-webkit-animation-name:flyOutUp;-moz-animation-name:flyOutUp;-o-animation-name:flyOutUp;animation-name:flyOutUp}.sb-animation-flyInDown{-webkit-animation-name:flyInDown;-moz-animation-name:flyInDown;-o-animation-name:flyInDown;animation-name:flyInDown}.sb-animation-flyOutDown{-webkit-animation-name:flyOutDown;-moz-animation-name:flyOutDown;-o-animation-name:flyOutDown;animation-name:flyOutDown}@-webkit-keyframes flyInRight{0%{opacity:0;-webkit-transform:translateX(3000px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes flyInRight{0%{opacity:0;-moz-transform:translateX(3000px)}100%{-moz-transform:translateX(0)}}@-o-keyframes flyInRight{0%{opacity:0;-o-transform:translateX(3000px)}100%{-o-transform:translateX(0)}}@keyframes flyInRight{0%{opacity:0;transform:translateX(3000px)}100%{transform:translateX(0)}}@-webkit-keyframes flyOutRight{0%{-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(3000px)}}@-moz-keyframes flyOutRight{0%{-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(3000px)}}@-o-keyframes flyOutRight{0%{-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(3000px)}}@keyframes flyOutRight{0%{transform:translateX(0)}100%{opacity:0;transform:translateX(3000px)}}@-webkit-keyframes flyInLeft{0%{opacity:0;-webkit-transform:translateX(-3000px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes flyInLeft{0%{opacity:0;-moz-transform:translateX(-3000px)}100%{-moz-transform:translateX(0)}}@-o-keyframes flyInLeft{0%{opacity:0;-o-transform:translateX(-3000px)}100%{-o-transform:translateX(0)}}@keyframes flyInLeft{0%{opacity:0;transform:translateX(-3000px)}100%{transform:translateX(0)}}@-webkit-keyframes flyOutLeft{0%{-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-3000px)}}@-moz-keyframes flyOutLeft{0%{-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(-3000px)}}@-o-keyframes flyOutLeft{0%{-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(-3000px)}}@keyframes flyOutLeft{0%{transform:translateX(0)}100%{opacity:0;transform:translateX(-3000px)}}@-webkit-keyframes flyInUp{0%{opacity:0;-webkit-transform:translateY(-2000px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes flyInUp{0%{opacity:0;-moz-transform:translateY(-2000px)}100%{-moz-transform:translateY(0)}}@-o-keyframes flyInUp{0%{opacity:0;-o-transform:translateY(-2000px)}100%{-o-transform:translateY(0)}}@keyframes flyInUp{0%{opacity:0;transform:translateY(-2000px)}100%{transform:translateY(0)}}@-webkit-keyframes flyOutUp{0%{-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px)}}@-moz-keyframes flyOutUp{0%{-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(-2000px)}}@-o-keyframes flyOutUp{0%{-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(-2000px)}}@keyframes flyOutUp{0%{transform:translateY(0)}100%{opacity:0;transform:translateY(-2000px)}}@-webkit-keyframes flyInDown{0%{opacity:0;-webkit-transform:translateY(2000px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes flyInDown{0%{opacity:0;-moz-transform:translateY(2000px)}100%{-moz-transform:translateY(0)}}@-o-keyframes flyInDown{0%{opacity:0;-o-transform:translateY(2000px)}100%{-o-transform:translateY(0)}}@keyframes flyInDown{0%{opacity:0;transform:translateY(2000px)}100%{transform:translateY(0)}}@-webkit-keyframes flyOutDown{0%{-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px)}}@-moz-keyframes flyOutDown{0%{-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(2000px)}}@-o-keyframes flyOutDown{0%{-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(2000px)}}@keyframes flyOutDown{0%{transform:translateY(0)}100%{opacity:0;transform:translateY(2000px)}}

Add code in theme.liquid file

Add the following to the theme.liquid file below <head> tag

<div class="subscribe-me" style="display:none;">
  <h2>Subscribe our Newsletter</h2>
  <a href="#close" class="sb-close-btn">x</a>
  <p>Subscribe to our mailing list</p>
   {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
              <input type="hidden" name="contact[tags]" value="newsletter">
              <div class="newsletter-form__field-wrapper">
                <div class="field">
                  <input
                    id="NewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="ContactFooter-error"
                    {% elsif form.posted_successfully? %}
                      aria-describedby="ContactFooter-success"
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="NewsletterForm--{{ section.id }}">
                    {{ 'newsletter.label' | t }}
                  </label>
                  <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
                    {% render 'icon-arrow' %}
                  </button>
                </div>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              </div>
              {%- if form.posted_successfully? -%}
                <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {%- endform -%}
</div>
4.9/5 - (14 votes)
Tags
business custom website design desiger elementor elementor fix elementor tutorial google google adwords grow sales hire a designer hire designer importance of alt tag Listify login marketing plugins podcast product design product page customization responsive websites Search engine optimization search engine optimizaton SEO seo affects and risks seo benefits shape divider shopify shopify shopify customization shopify taste theme shopify theme customization small business social login taste theme customization tech theme sections tutorial web design agency web designing web development website-redesign website design why build a website why business need a website why hire a designer wordpress

About

admin

admin

2 thoughts on “How To Add Custom Newsletter Popup in Shopify – Without Any App”

Leave a Comment

Your email address will not be published. Required fields are marked *