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:
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.
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:
Another great idea is an exit intent pop-up. Using exit-intent popups reading: “Leaving so soon?” or “You still have items in your cart” can help reduce bounce and cart abandonment rates.
Globe-In has paired their exit-intent pop-up with a promotion for free shipping to help convert a leaving visitor into a paying customer. The call to action is clear – although it may have been worth adding a button to automatically add the promotion code to checkout.
Our next example is a store that has perfected the mobile-first approach. The above screenshot shows the same pop-up, but how the design differs for mobile and desktop.
There is a clear ‘No Thanks’ button on both designs, making it easy for visitors to dismiss the pop-up. The mobile pop-up forgoes the image to make it only take up half of the screen.
Heading back to the principle of providing value to your visitor, this popup by Two Tags makes it clear what a customer gains from signing up to an email list.
It may be worth being a bit more explicit about what you’ll be using their email for as transparency is an important aspect of your brand image.
Also, by asking for the visitor’s gender, it’s much easier to perform audience segmentation and send personalized offers tailored to specific customers.
Local Keeps’ pop-up is a great example of a non-obtrusive popup. If the visitor wanted to, they could continue their entire session on your store without needing to dismiss the pop-up.
Non-obtrusive popups are much less likely to annoy visitors. They also reduce the likelihood of your site getting penalized by Google for utilizing pop-ups.
To create the perfect Shopify popup, you’ll need a great app to make this happen. Luckily, ChipBot is perfectly kitted out to help you create beautiful and functional popups for your Shopify store. ChipBot is a helpful plugin that helps you boost sales with interactive video popups, live chat, and easy self-service support! ChipBot’s video popup creator is known as Pylons.
Pylons can be activated based on the customer’s behavior and how they entered the website. They’re perfect for reducing bounce rates and increasing conversion rates. These personalized popups are unobtrusive and won’t hurt your store’s search ranking.
It’s super simple to configure your Pylons to appear on activation events. Simply upload your video and configure when it should appear. You can automate these popups based on time and date – great for a Black Friday or Holiday sale!
Finally, you can also use ChipBot to create personalized chatbots for customer support or to handle email referrals.
To get started designing your perfect popup for your Shopify store, head over to getchipbot.com and try it out for free. If you like what you see, you can remove the ChipBot Branding and unlock Shopify integration for as little as $10 a month.
Matt is a Houston-based entrepreneur with over a decade of experience building highly scalable web-based technology solutions. Knowledgeable in 12 different programming languages and experienced startup veteran; having worked on 6 others. He's currently the founder and CEO of ChipBot. You can reach Matt on Twitter, LinkedIn, or StackOverflow.