Marketing | Creative | Strategy

Your faithful partner in the discovery of endless digital opportunity.

Take the First Step

Show Newsletter Popup After 3 Days

 

Think about the last time you went to pretty much any eCommerce website. Was there a little pop-up that came up to offer you either some sort of sale or, more importantly, to sign up for a mailing list? I’m sure you know exactly what I’m talking about. Here’s the thing, those things are highly effective, but also can be highly annoying. As a business, while you want your marketing to be straightforward and accessible, you don’t want to overdo it by popping up every single time someone visits your site, especially if it’s the same user. They get it! You’ve got a newsletter… maybe they’ll sign up… but they certainly won’t if they are confronted with it every time they visit.

 

Some Shopify themes offer the option of showing a newsletter signup popup on the homepage. If the themes don’t include this option, there are specialised apps for this that can add this popup for you. The newsletter signup popups are useful to get better communication with your clients but how do you avoid the annoying part of having it show up every time someone comes to your site? Some apps offer the option to show the newsletter popup only after some days after it has been closed.

 

Using apps to achieve this can be useful, but the most important rule for web development is, the simpler the website the better. It would be good to achieve this without adding an app for this, and the good news is that this is possible with a simple trick, using a cookie. 

 

When closing the popup or when the email is submitted, you can create a cookie that expires after a fixed period of time, in this case whatever number of days you choose. To do this, you need to call in Javascript the function specifying the number of days that this popup shouldn’t appear:

 

function createCookie(name,value,days) {

if (days) {

var date = new Date();

date.setTime(date.getTime()+(days*24*60*60*1000));

var expires = "; expires="+date.toGMTString();

}

else var expires = "";

document.cookie = name+"="+value+expires+"; path=/";

}

 

This function should be called like this if we want to hide the popup for 3 days: 

 

function createCookie(“hide-newsletter-popup”, “true”, 3);

 

After this, we have to treat how to avoid displaying the popup before the number of days passed. For this, on page load, we have to read the cookie. We could do this using the function:

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;

}

If calling this function

 readCookie(“hide-newsletter-popup”) 
 doesn’t return the value “true”, the popup should be displayed, otherwise we don’t because the days haven’t passed.

 

These functions for creating and reading the cookies and more information on using cookies, can be found on this website:

 

https://www.quirksmode.org/js/cookies.html

 

Even if you have an app that does your newsletter pop-up, see if you can convert the waiting period to this method. It’s always better to have less things running all at once, and the simpler the back end, the easier it is to make changes if big ones come around. With this method, not only are you eliminating a potentially annoying use case for customers, but you are also streamlining and unburdening your website from extra processes that you don’t entirely control.

 

Now, would you like to sign up for our newsletter? I promise it’s good! Just come back in 3 days!

Ionut Radu Pastiu
Web Developer
Shopify is not just an online store, it is the future of commerce, and I have a doctorate in this field of study. I can slice and dice, mix and match, or come up with a completely new way to make your Shopify page exactly what you want it to be. I’m fluent in Javascript, jQuery, and Liquid when building the foundation, which I decorate with a combination of CSS and SCSS. You can dream it, I can build, they will shop... trust me.
close[x]

Get A Quote

Ready to take the next step? Please fill out the form below. We can't wait to hear from you!

Once submitted, a Slicedbread representative will be back in touch with you as soon as possible.

* Required Fields