(2022) Shopify Popup Examples, Apps & Tips to Grow Your Business

Pop-ups are one of the most popular ways Shopify stores are delivering their call-to-actions. For the uninitiated, a Shopify popup is a frame or window that appears when users are browsing your website. It can display information or even include forms to collect details. 

Pop-ups have become the standard for: 

• Informing users of exciting new promotions and sales
• Collecting emails and other contact information for mailing lists
• Offering users with customer support
• And Reminding shoppers that they’ve got items in their shopping cart

Pop-ups aim to increase the likelihood for your customers to join a mailing list, but can also be used to increase conversion rates and reduce cart abandonment. 

However, according to research by the Nielsen Norman Group, modal ads (which is any ad that appears on top of a site’s content – i.e. a popup) are the most disliked form of an advertisement on the web. 

Therefore, for popups to be successful and to reduce annoyance and potential store abandonment, they need to be well-designed, non-obtrusive and provide value to your visitor. 

In this article, we’ll explore some tips for creating the perfect popup on Shopify. We’ll also explore some of the best examples of popups and introduce you to the best app to make this all happen: ChipBot. 

As we touched on earlier, popups are almost universally hated as a form of advertising and should be used sparingly. Here are some tips for creating popups that don’t annoy your visitors.

To read more about what not to do, check out our blog on dreadful interactions that are sabotaging your business.

If your customers are bombarded by many popups in a row, they’ll rush to clear them to continue with their browsing. If there are too many popups, your visitors may get irritated and leave your site.

Ultimately, we’d like your visitors to be able to clear the popup and continue with their browsing. Too often do we see sites making the ‘X’ button too small or in an unconventional place.

The convention on the web is that popup close buttons should be on the top-right of the window. This could be in the form of an ‘X’ button or text reading ‘Close’. Either is fine. 

Make sure the color of this button doesn’t blend in with the background of the popup window too much, or your visitors may struggle to find it. 

Using responsive design principles is crucial for your popups to be viewable and closable on any device, including smartphones with smaller screens. 

If your popups aren’t optimized, you risk having some users being unable to read the content or even dismiss it. Being stuck on a popup with no way to remove it is a guaranteed way to ensure that you lose a potential customer. 

A key factor in a popup campaign’s effectiveness is when they appear.

There are two ways we measure a pop-up’s timing – absolute and relative. 

• Absolute timings in the real-time seconds elapsed before the pop-up appears. This could be after a page load. 
• Relative time is the time after a specific action has been performed by your visitor.

You could use page depth as an action to base your pop-up timing. Research has shown that you should implement a pop-up when the user has read around 50-60% of the page. The longer it takes for the pop-up to appear (for example, if you set the conditions at 80-90% page depth), the smaller the number of people who see the popup becomes.

On this topic, Google has – since January 2017 – enforced penalties to sites that don’t follow their strict rules regarding popups. These penalties come in the form of lower search rankings.

Google’s guidelines recommend that popups don’t appear when on the homepage when users load or exit your store. They should instead be placed between pages – for example when browsing your products. 

Popups shouldn’t be repeated or recurring – i.e. they shouldn’t be after repeated actions like each click or pressing the back button). Keep your popups to single events.

What do you want to achieve from the popup? Do you want people to sign-up for a mailing list or subscribe to a monthly newsletter? Are you upselling a product with high margins or excess inventory? 

The purpose of the popup should be obvious to your visitor – and should include a clear call-to-action. A CTA is self-explanatory, it’s an element that compels your visitor to complete the intended action. This could be in the form of an email form for a mailing list or a discount code for a promotion. 

This CTA should provide value to your visitor. The answer to what this includes is unique for every store. It’s useful to do some research and speak to your customers about what they find is important to your store. A great idea could be a customer support pop-up. If your visitor seems stuck on a product page, you a popup could compel them to get in contact or even speak to a customer support bot.

Now that we’ve touched on the basics of a good Shopify popup, here are some examples to inspire your next perfect popup.

Our first example is a brilliant example of a newsletter sign-up form. Firstly, the design of the pop-up matches that of the rest of the site, with the same background color as the main homepage.

The call-to-action is clear, with a well-designed and simple email contact form. If you’re asking visitors to sign up to a mailing list, don’t ask for too many details. No one likes filling out long forms and asking too many details will decrease customers’ willingness to sign up. You can implement a smart newsletter pop-up and A/B test your messaging using ChipBot: