HomeSeguno Blog

A beginner’s guide to website popups

A beginner’s guide to website popups

So you’ve decided it’s time to add a popup to your Shopify store. 

I know the deal. Your site has a healthy flow of visitors, judging by the analytics dashboard. Yet your email marketing list growth is lethargic. Or, you want to capture visitors’ attention and send them down a certain path. 

Either way, let a website popup do the heavy lifting. 

Follow along as we go over the basics and show some ways to transform visitors into subscribers and drive greater engagement with your brand. 


What’s your goal?

First, let’s start by defining website popups. They’re messages that appear — or literally pop up, as their name implies — on your website after a certain amount of time, prompting visitors to take an action or simply take notice of something you want them to know. 

At their core, popups are an on-site conversion tool.  

A majority of brands use email popups to grow their subscriber lists. I honestly don’t have any official stats to support that. But if you visit 10 ecommerce shops, at least 70% have an email popup asking for your address and/or cell phone number. 

Gaining new subscribers to feed into your email marketing strategy is one reason to use a website popup. But they can be used for other things, such as:  

  • Guiding visitors to a specific page
  • Making an announcement, such as a sale
  • Communicating shipping delays
  • Adding up-sell or cross-sell options
Photo of shaving razors with text on the right that says: Not sure which is the right razor for you? Take our 30 second quiz to find out
Supply’s popup directs visitors to its four-question quiz

With all of these options, your first job when creating a popup is to determine your goal. Do you need to grow your email list, or is there a different game plan in mind?

Have multiple goals? Don’t be afraid to use multiple popups.

How to design a popup

Now comes the fun part. I’m going to cover four aspects at the heart of the creation process: popup anatomy, placement, the journey (or number of steps), and content strategies.  

1. Anatomy of a popup

How creative you get with popups is totally up to your whims. But before we wade into the design territory, the successful ones all have a similar structure you’d do well to follow. 

Note that this anatomy is for email popups focused on growing your list. The format for other popups would be simpler. 

Here are the bones, from top to bottom. 

Box with following words, top to bottom: short-term win, long-term win, email address, submit, and no thanks, maybe later

A: Easy exit 

You know where that X should go — the upper right-hand corner. Any other place would be bizarre, plus frustrating for anyone whose instinct is to close out anything disruptive. You don’t want to aggravate guests. 

B. Short- and long-term wins 

Any message aimed at attracting, converting or reaching an audience needs some good reasoning as to why a visitor should take pause. Popups are no different. 

Incorporating both a short- and long-term win is the way to go. What will attract prospective subscribers? A Shopify discount offer? Guarantees that they’ll be kept in the loop for major announcements? 

Carefully thought messages have the power to not only stop visitors from closing out an email popup, but handing over their contact info. Spend time sharpening them. 

Much more on messaging in a little bit.

C. Contact form 

Keep this area of the email popup short. Actually, lengthy text doesn’t belong anywhere. We like brief and to the point. 

Ask for an email address and, if you use SMS marketing, their cell phone number. 

D. Call to action (CTA)

A clear, action-oriented word is the aim. Common CTAs are as simple as “submit” or “sign up now.” Or, a “get my 10% off” could be used to reinforce the short-term win. 

E. Secondary exit

Yes, you’ve already got the easy exit. So why an alternate way to make the email popup disappear? It’s being considerate to those who might overlook the X. Ultimately, it should be super easy to get back to your Shopify site. 

For the ambitious: Elevate your email popup by including one more element: a form field. Asking for additional information about the subscribers' preferences enables greater email personalization.  

2. Popup journey

Many popups consist of one step — enter your data, click submit, and done. 

However, some brands have found that a multi-step process is more successful in growing their email list. A HubSpot study cites that 40% of marketers use multi-step forms and experience an 86% higher conversion rate.  

Let’s take a look at this extended journey through Summersalt's email popup. The first step asks whether you’re interested in free shipping. A “yes” response takes you to the signup form. And after hitting “continue” upon entering an email address, you get a discount code. Summersalt also steers you to one of two areas — a collection of swimwear you otherwise can’t find through the navigational menu, or general browsing.     

Women in bathing suits, with the following messages: 1. Would you like free shipping? 2. Enjoy free shipping 3. Shop with free shipping

So, you need to decide on the type of journey you want to take your potential subscribers on. With an email popup tool like Seguno’s, you can include up to three steps.

3. Popup placement

We see placement falling into one of two categories: central popups and secondary placements.

Popup placement graphics showing central (middle of the screen) and secondary/off the wall

Central popups appear in the middle of the screen. I recommend this if you’re just getting started. They can be small. I say go large, just not full screen. 

A popup more vertical in nature is preferable, as it looks good on both desktop and mobile.  

Secondary placements aka off the wall — slide in from either side, or the top or bottom. We recommend this option if you’re concerned about bounce rates on your Shopify site, as they aren’t as conspicuous as the central placement. 

You'll most likely experience a lower conversion rate than you would with a more prominent email popup placement. However, subscriptions that stem from this type of email popup may represent a more engaged audience. 

Why? Because the placement is typically more subdued, versus a look-at-me-now email popup that demands an immediate “I comply” or “leave me alone.” Therefore, secondary email popups often cater to visitors who are a touch more proactive than the regular scroller.   

4. Popup strategies

Recall the importance of incorporating short- and long-term wins. They can be the motivating factor that prompts someone to sign up for your emails. Let’s dive into a few email popup examples for each. 

The short-term win

The email popup below doesn’t adhere to all best practices we've outlined. But we presume that Partake does a good job of growing its email list with a 15% off code. The bright colors, clear images, and large font are tough to ignore.  

Left side showing boxes of cookies; right side of image showing Partake unlock 15% off with spaces to fill i email address

The long-term win

Sometimes you lack the bandwidth to give away a discount or free shipping in exchange for every new email address. That’s where the long-term win comes into play. 

Several brands take this approach. Instead, they emphasize the value that a subscriber receives or explains the community they’re joining.

Like the secondary placement, you might see a lower conversion rate, yet higher-quality audience. In fact, Besame Cosmetics doesn’t feature a central website popup, only this off-the-wall email popup.   

Website with makeup images and a box on the side that says be a #besamebeauty!

If you don't want to rely on a discount to lure would-be subscribers, we've got 5 alternative incentives to consider.

Combining short- and long-term wins

You can have your cake and eat it, too. There's space for both a discount and providing a glimpse of what a subscriber will get in the future. Artisaire does it succinctly and without any fancy graphics. 

Box overlaid on website that states get 10% off your next order and sign up and get launches, tips and sales
Flex your creative muscles! We like email popups that show some brand personality.

Popup timing 

When is the right time for your email popup or notification to appear?

Unfortunately, we can’t prescribe a specific technique — we don’t have a “do this” and you’ll grow your email list exponentially. But we can offer guidelines.  

First, popup apps include different trigger options. You should be able to manipulate timing based on how many pages have been visited, or the percentage of a page that’s been viewed.  

Many brands trigger their popup after a certain time spent on the site. For the purposes of keeping things basic, we’re taking that route with our example. 

I suggest you fire off that popup anywhere between five and 60 seconds. Here are the potential effects of each end of the spectrum: 

  • Start closer to 5 seconds and you’ll likely get more people, but a lot more bounces (which could cost you sales)
  • Start around 1 minute in, and you’ll probably capture fewer yet more highly engaged people  

Let your Google Analytics dictate the timing of your popup. Your average time on site is a good starting point. Trigger the popup within it. 

Continue to monitor your analytics once you implement a popup. A rising average bounce rate may indicate some adjustments are in order — perhaps relaxing the timing or shifting to a pages-viewed tactic. You don’t want a popup that hurts your overall site performance.  

Popup page placement

Where do you want your popup to appear? This is the last major question to answer. 

If you're striving to grow your email list, then any page might do. And in that case, timing is the driving factor. 

Then there are instances for putting greater thought into where a popup is and isn’t displayed. This is especially true for popups not aimed at capturing emails. 

For example, you might trigger a special sales announcement or other pricing promotion for a certain collection only when relevant pages are viewed. Similarly, you could display a cross-sell recommendation popup on pertinent product pages.   

Overall, it’s important to be mindful of the user experience. You don’t want to distract your shoppers too much, and you definitely want to protect your checkout flow by restricting  popups from pages that don’t relate. 

4 steps to creating your popup

Making and launching a popup takes some planning, but doesn't need to be overwhelming.  

For the best popup that will convert, follow these basic steps: 

  1. Determine what action you want a visitor to take
  2. Design it, based on your goal
  3. Choose a popup timing strategy that fits
  4. Select appropriate pages for display

These four high-level steps are all you need to get rolling with a popup bound to snag some new fans. The best part is that you can get up and running today — without ever leaving Shopify — with Seguno’s popup app.

For my best insights on growing your email list, head over to our full course on developing a list growth engine.  
Create, manage, and track your email marketing—without leaving Shopify.

Seguno is the top-rated email solution built exclusively for Shopify. Grow your sales with high-performing newsletters, email automation campaigns, and integrations with Facebook, Instagram, banners, pop-ups and more. Build and send engaging emails in our easy-to-use editor and take email creation to the next level with our Canva integration. Automate your email marketing and drive more revenue with welcome campaigns, checkout abandonment, post-purchase automations, tag triggers and more.

Find Seguno on the Shopify App Store
Get email marketing tips, resources, and industry insights to help your Shopify store grow.

Continue reading

<a href="/bfcm" target="_blank" class="holiday-hub-injection bfcm-injection w-inline-block"><div class="bfcm-injection-bfcm">Best. BFCM. Ever.</div><h5 class="hh-injection-text bfcm">get the Black Friday email marketing resources, tips, and tools you need to help your Shopify store succeed</h5><div class="hh23-injection-faux-button bfcm">visit the BFCM resource center</div></a>
<a href="/holiday-hub" target="_blank" class="holiday-hub-injection w-inline-block"><img src="" loading="lazy" width="854" alt="Seguno Holiday Hub - email marketing resources, tips, and tools you need to help your Shopify store succeed" class="hh23-holiday-hub"><h3 class="hh-injection-text">email marketing resources, tips, and tools you need to help your Shopify store succeed</h3><div class="hh23-injection-faux-button">visit the holiday hub</div></a>
<div class="app-download-injection popup-app-injection"><img src="" loading="lazy" alt="Seguno + Shopify 4EVER" class="app-download-injection-shopify-logo"><div class="app-injection-text-div"><div class="app-download-injection-inner-div popup-app-injection"><div class="_4-9 popup-app-injection">5.0</div><img src="" loading="lazy" alt="" class="download-app-injection-star"><div>Seguno Popups &amp; Exit Intent</div></div><div class="app-download-injection-subhead">Create, trigger, and track popups from your shop's Admin</div></div><a href="" class="app-download-injection-button w-button" target="_blank">Get details &amp; install</a></div>
<div class="app-download-injection"><img src="" loading="lazy" alt="Bulk Discount Code Bot App for Shopify" class="app-download-injection-bulk-discount-icon"><div class="app-injection-text-div"><div class="app-download-injection-inner-div"><div class="_4-9">4.9</div><img src="" loading="lazy" alt="Shopify Review Star" class="download-app-injection-star"><div>Bulk Discount Code Bot</div></div><div class="app-download-injection-subhead">Stop coupon abuse with unique discount code sets</div></div><a href=";channel=com&amp;utm_source=blog&amp;utm_medium=website&amp;utm_campaign=blog+call+out" target="_blank" class="app-download-injection-button w-button">Get details &amp; install</a></div>
<div class="app-download-injection popup-app-injection"><img src="" loading="lazy" alt="Seguno + Shopify 4EVER" class="app-download-injection-shopify-logo"><div class="app-injection-text-div"><div class="app-download-injection-inner-div popup-app-injection"><div class="_4-9 popup-app-injection">5.0</div><img src="" loading="lazy" alt="" class="download-app-injection-star"><div>Seguno Popups &amp; Exit Intent</div></div><div class="app-download-injection-subhead">Create, trigger, and track popups from your shop's Admin</div></div><a href="" class="app-download-injection-button w-button" target="_blank">Get details &amp; install</a></div>
<div class="schedule-a-demo-injection"><div class="demo-injection-heading">Book a 1:1 demo</div><p class="demo-injection-p">Give us 30 minutes and we'll give you a peek at how Seguno's email marketing and popups can elevate your marketing.</p><a href="/schedule-a-demo" class="demo-injection-button w-button">Schedule a Demo</a></div>
<div class="getting-started-injection"><div class="getting-started-subhead">Blog Series</div><h3 class="getting-started-heading">6 steps to start email marketing for your Shopify store</h3><div class="getting-started-collection w-dyn-list"><div role="list" class="getting-started-list w-dyn-items"><div role="listitem" class="getting-started-item w-dyn-item"><a href="/blog/how-to-define-your-unique-selling-proposition" class="getting-started-link w-inline-block"><img src="" loading="lazy" alt="How to define your unique selling proposition" class="getting-started-image"></a></div><div role="listitem" class="getting-started-item w-dyn-item"><a href="/blog/how-to-grow-your-audience" class="getting-started-link w-inline-block"><img src="" loading="lazy" alt="How to grow your audience " class="getting-started-image"></a></div><div role="listitem" class="getting-started-item w-dyn-item"><a href="/blog/your-first-email-automation-start-with-hello" class="getting-started-link w-inline-block"><img src="" loading="lazy" alt="Say hello with your first email automation " class="getting-started-image"></a></div><div role="listitem" class="getting-started-item w-dyn-item"><a href="/blog/tips-for-building-your-first-newsletter" class="getting-started-link w-inline-block"><img src="" loading="lazy" alt="Tips for building your first newsletter " class="getting-started-image"></a></div><div role="listitem" class="getting-started-item w-dyn-item"><a href="/blog/make-email-marketing-efficient-with-templates" class="getting-started-link w-inline-block"><img src="" loading="lazy" alt="Make email marketing efficient with templates" class="getting-started-image"></a></div><div role="listitem" class="getting-started-item w-dyn-item"><a href="/blog/convert-interest-to-sales-with-email-automations" class="getting-started-link w-inline-block"><img src="" loading="lazy" alt="Convert interest to sales with email automations" class="getting-started-image"></a></div></div></div> <script> window.addEventListener("load",(t=>{var r=$(location).attr("href").split("/").reverse()[0];$(".getting-started-item").each((function(t){var e=$(this).find("a"),s=e.attr("href");r==s.substring(6,s.length)&&(e.attr("href","#"),e.css("opacity","0.3"),e.css("cursor","default"),e.css("transform","none"))}))})); </script>
<div class="app-download-injection"><img src="" loading="lazy" alt="Seguno + Shopify 4EVER" class="app-download-injection-shopify-logo"><div class="app-injection-text-div"><div class="app-download-injection-inner-div"><div class="_4-9">4.9</div><img src="" loading="lazy" alt="Shopify Review Star" class="download-app-injection-star"><div>Seguno Email&nbsp;Marketing</div></div><div class="app-download-injection-subhead">The top-rated email marketing app built exclusively for Shopify</div></div><a href="" class="app-download-injection-button w-button" target="_blank">Get details &amp; install</a></div>
<div class="v3-email-signup-section blog-email-signup-insert"><p class="v3-lp-h1 text-white blog-signup-insert">Subscribe to get email marketing tips, resources, and industry insights to help your Shopify store grow.</p><div class="v3-form email-only-form form-centered w-form"><form id="wf-form-Email-Subscription" name="wf-form-Email-Subscription" data-name="Email Subscription" method="get" class="email-only-form" data-wf-page-id="617bf866dd7a76703506c655" data-wf-element-id="e33b17bb-76b8-992b-7b38-764576544155" aria-label="Email Subscription"><input type="email" class="email-only w-input" maxlength="256" name="Email" data-name="Email" placeholder="Please enter your email address" id="Email" required=""><input type="submit" value="Subscribe →" data-wait="Please wait..." class="v3-base-button brown-button email-only-form-button button-rollover w-button"></form><div class="email-only-success-message w-form-done" tabindex="-1" role="region" aria-label="Email Subscription success"><div class="events-text-block text-white center-text"><strong>Awesome, thanks for subscribing!</strong></div></div><div class="w-form-fail" tabindex="-1" role="region" aria-label="Email Subscription failure"><div>Oops! Something went wrong while submitting the form.</div></div></div><div class="email-disclaimer">By submitting this form you agree to receive email marketing messages from Seguno.</div></div>