Ecommerce Design

6 Best Pop-up Design Practices to Get More Customers

Ugi Djuric / 11 min read

If you’re one of those ‘I-will-never-use-popups’ guys, then stop! Wait for a second — because this article tells you exactly what to do in order to make the most out of your popups and your pop-up design. Besides live chats, chatbots, and other CRO strategies, popups are one of the best tools for improving your conversion rate.


If you’re still not convinced, what do you say about the recent statistics that 10% highest-performing pop-ups have a conversion rate of 9.28% on average?

That’s almost a 10% increase in conversion rates!

So if you have 1,000 visitors, you can get over 100 subscribers (or users). If one user pays you $49/mo, that could be an additional $4,900 each month in revenue.

Pretty good, right?

If you want to attract and maintain the attention of your followers, create pop-up windows to make a truly effective impression on your leads.

In order to take full advantage of their impact, it is important to follow best practices; in this article, we present those best practices from our own experience.

What is a Pop-up?

Pop-ups are “windows” that are triggered by a website visitor’s intent, context, or behavior.

In other words, when your website visitor clicks on a certain button or visits some particular page, for example, it can trigger your pop-ups.

The entire purpose of pop-ups is to take the opportunity (based on the user’s context), and provide some added value.

If someone reads your entire blog post, you can use the power of pop-ups to convert them into a newsletter subscriber.

If someone added items in the checkout but tried to leave your website before purchasing, you can trigger a pop-up offering a 15% discount code. This can certainly prompt them to continue their purchase.

Define Your Pop-up Goals

Using pop-up windows can bring numerous benefits to your business. But, before you start creating pop-ups, you need to know what goal you want to fulfill. These goals can be numerous, and we will mention some of the main ones below.

1. Drive more sales.

Whether you are solely in sales, or you offer certain services and sell digital products, with pop-ups you can more effectively increase your sales .

On your website, write about what you are selling and present it in the best way possible. Use pop-ups to give your visitors the final push that will drive them to action.

Pop-ups should highlight the discount, special offer, major benefits of a product or service, and a clear CTA button that will convert leads into real buyers!

2. Grow your email list.

Email marketing is extremely popular today.

Statistics say that in 2019, global email users amounted to 3.9 billion users, and in 2023 this figure is set to grow to 4.3 billion users.

For example, if your goal is to grow your email list, set up a pop-up window inviting visitors to subscribe to your newsletter.

Provide them with relevant and valuable content that they will not be able to refuse.

3. Generate leads.

One of the main goals of using pop-ups is lead generation.

Most tools for creating pop-ups have analytics that can show you how visitors are behaving on your website.

Determine the best moment to include a pop-up window in the user journey. Set triggers after a certain click that a visitor makes after spending some time on your page or similar, and then generate the most qualified leads that you can convert into buyers.

4. Improve the customer experience.

Another goal that is important to achieve is to create a great customer experience. Having a good relationship with your customers is important for your business for many reasons, and it can also boost your revenue.

Pop-ups will directly catch your visitors’ attention and engage them, which is essential.

Choose the Right Pop-ups for Your Audience 

Pop-up windows play a vital role when it comes to capturing your visitors’ attention. Still, you need to be focused on the best examples in order to meet all the needs of your potential buyers.

There is a large number of different pop-ups, but the ones we have singled out for you are

1. Entry pop-ups.

An entry pop-up is a pop-up window that appears as soon as a visitor arrives at your website. This window is what they will see first. Entry pop-ups literally get your visitors to act before they even get the opportunity to see your offer as these windows prevent them from seeing the page.

Entry pop-ups can be very effective and helpful, but you need to be careful when implementing them and pay attention to certain things like bounce rate and functionality on mobile devices.

For example, let’s take a look at the pop-up window that appears as soon as we enter the Revolve website. Its goal is to grab the visitors’ attention with a special offer that will provide future customers with a 10% discount if they subscribe to the newsletter.

bigcommerce entry popup

2. Scroll-based pop-ups.

This type of pop-up appears only after a visitor has scrolled down a certain percentage of the page. They usually have higher conversion rates because they do not annoy your visitors.

That way, there is a greater possibility of them becoming your future customers. Such pop-ups can contain a contact form, survey, an email opt-in form, or similar. 

3. Delayed pop-ups.

A pop-up that appears after a time delay. In other words, it appears after a visitor has spent a certain amount of time on the page.

When it comes to this type of a pop-up, it is important that you realize how long this time delay should be. It shouldn’t appear either too soon nor too late as it could repel your visitors. 

In other words, if you set a pop-up to appear as soon as a visitor enters the website, it may create a negative and annoying impression, and if you wait too long, the visitor may not even get the opportunity to see your offer.

Therefore, it is best to check the average time that visitors spend on your website.

For example, 10-30 seconds after a visitor has entered your website is an optimal time for your delayed pop-up to appear. At that point, while watching what is happening on the website, he is already interested, and after that, you get a chance to draw his extra attention with some great offers.

You can use delayed pop-ups to increase conversion rates effectively.

4. Interaction-based pop-ups.

Interaction-based pop-ups are all about personalized experiences. They pop up when a visitor has the mouse over the link or when he clicks on a certain item on the page.

The advantage of using interaction-based pop-ups is that you can create personalized experiences.

Since they appear when a visitor takes a specific action, you can now, with the help of a pop-up, reach that specific group of visitors while approaching them with a particular message or offer.

5. Exit-intent pop-ups.

The exit-intent popups are primarily focused on the lead generation. An exit intent pop-up is created to stop visitors from leaving your website.

They are especially effective when it comes to persuading visitors that your offer is the right one for them.

Exit pop-ups appear at the same moment when a visitor is ready to leave your website and click on x.

This is also your last chance to keep him and actually show him the most compelling offer you can.

Exit pop-ups are also a great option if you want to prevent shopping cart abandonment.

One of the best practices is to offer a discount that will encourage customers to complete their purchase after all.

6. Email pop-ups.

Email pop-ups are definitely among the most used pop-ups. If you want to make your email campaign as successful as possible, they will help you grow your email list.

If you choose to use this pop-up window, make sure it includes a clear CTA that encourages visitors to a website to become your subscribers.

There are several important reasons why email pop-ups should be an indispensable part of your website.

First, pop-ups have the ability to make your sign up forms much more noticeable and encourage visitors to take action by leaving their email addresses.

On most websites, you may notice that sign up forms are almost always at the end of the page, which is actually a big mistake. Heatmap analysis has shown that people very rarely scroll all the way through the page, and thus do not even reach the contact form.

Thanks to email pop-ups, you can now avoid this and display the contact form without risking that visitors do not even notice it.

Second, pop-ups have numerous advanced targeting and triggering options so you can show the right message to the right people at the right time! You can track their behavior and test different email pop-ups until you find one that converts visitors into subscribers successfully.

Lastly, since pop-ups are not embedded in your website, you can play with their design, text, fonts, colors, effects, and let creativity take over visitors’ attention.

Effective design and a copy will make it easier for your target group to fulfil the goal, that is, to leave contact and become part of your email campaign.

9 Ways to Have the Best Pop-up Designs 

There are numerous pop-up design examples, and you should certainly make an effort and choose some of the most creative and interesting ones for your website.

With the help of the following tips, you can easily create effective pop-up windows that will make an impression and maintain your visitors’ attention.

1. Match the rest of your website.

Your pop-ups should match the rest of your website in style, colors, and fonts. Pop-ups should be viewed as an addition to, for example, your brand representation. Be sure to fit everything in perfectly. Add your logo, and if you have a specific way of addressing the website, make sure that the same style of expression is on the copy of your pop-up window.

Another thing you need to pay attention to is that the page the visitor is on is linked to the offer that appears in the pop-up window. The landing page is there to warm up your audience’s attention, and a pop-up to encourage them to take some action right away.

2. Have a clear CTA.

Clear and effective CTA is a must when it comes to pop-up designs. This has the biggest potential to convince people to take action on the offer.

Also, keep in mind that there should be only one call to action per pop-up. Don’t confuse your visitors by giving them multiple choices, as this could reduce your conversion rates.

3. Use contrasting colors for your CTA.

In order to highlight the CTA button, it should be in the opposite color of the rest of the window. It is important that the color of the button is striking and vibrant, to draw attention.

Overall aesthetics is important. Your pop-up has to make an impression, and the only way to achieve that is to make it as effective and memorable as possible. Use contrasting colors for your CTA to make your pop-up engaging and pleasing to the eye. 

4. Experiment with different formats.

Pop-up tools offer many formats of different pop-up windows. For example, Poptin — one of the Sumo alternatives for creating different popups — offers:

  • Lightbox,
  • Countdown pop-ups,
  • Full-screen overlays, and
  • Slide-in pop-ups.

You can use A/B testing to see which pop-up window performs the best.

Change the color of your text to find the most engaging one for your target audience.

There are many different types of CTAs, also. From “click here” to “read more”, each of them has its purpose and conveys a certain message.

5. Use microcopy to eliminate fears.

CTA microcopy should be consistent. It is a short message which tells your visitors exactly what will happen if they click the button.

These few words are really important and can help you increase conversion rates. 

The perfect place for microcopy is below your main CTA button.

6. Don’t forget a mobile pop-up (and treat it differently).

Hosting Tribunal mentions that 52.2% of all website traffic worldwide was generated through mobile phones in 2018.

So, mobile pop-ups should be treated as a huge opportunity. When creating pop-ups, you need to make sure that they are mobile optimized.

Pop-ups that appear when accessing the internet using your mobile phones need to contain less text and be extremely effective.

Also, as mobile visitors are harder to convert, you get another chance to do so by collecting their email addresses.

7. Aim for personalization when possible.

Personalizing your pop-ups is a small gesture, but it means a lot to your visitors and makes them feel welcomed and special.

Of course, it is impossible to make a special pop-up for each and every visitor. When it comes to personalized pop-ups, they are all about addressing your visitors in the second person so that they can be identified in your offer.

You can also customize the text on pop-ups depending on whether your leads are coming from desktop, tablet, or mobile devices.

8. Play around with the pop-up timing.

Experiment, try different strategies, but always keep in mind that timing is an important factor when it comes to pop-up management.

Follow your visitors’ behaviour, and find the perfect solution when your pop-ups should appear. Using analytics, you will be able to see what the perfect time is to showcase your special offer and encourage people to take action.

9. Make an irresistible offer.

Your pop-up window has to catch your visitors’ attention. The best way to do that is to make your offer convincing and strong enough that they have to click on it, read it, and finally check it out.

For example, you could add some interesting facts about why this offer is perfect for them, or what they will lose if they don’t accept what you have to offer them immediately.

6 Best Pop-up Designs for 2020

Today, as more and more people engage in online businesses and customize their websites accordingly, attracting the attention of your potential customers plays a crucial role. In that regard, designing your pop-up windows is of the utmost importance.

In this section, we will present six pop-up designs that can serve as a great inspiration for creating perfect pop-ups in 2020.

1. Dainty Jewells.  Dainty Jewells popup

The Dainty Jewells online ecommerce store for women’s apparel does a pretty great job when it comes to pop-ups.

The pop-up above doesn’t have a goal to improve conversions, but rather to guide their website visitors through the user journey and highlight the new collection.

This pop-up is triggered when you visit skirts. Pretty great context if you want to showcase your new collection!

Copy: Short, catchy and straight to the point.

Design: Design isn’t bad — it’s cool and definitely eye-catchy. You can’t miss this. I would only suggest making the CTA button a little bit different. The CTA background color is pretty similar to the color on the rest of the popup.

2. Heist. Heist Popup

When it comes to Heist, their pop-ups’ context and goal are a little bit different than in the previous example.

When you visit Heist’s website, and scroll around 80% of their home page, you will see this popup.

Since you already scrolled around 80% of their home page, it means that you’re already interested in what they have to offer.

So, in that case, Heist offers you a deal — Subscribe to their newsletter, and get $10 off.

Pretty great, right?

Copy: I really like the copy of Heist’s popup. The first thing you see is Welcome to Heist — like they’re welcoming you to one big family. When it comes to offering, it’s pretty great. Just subscribe to their newsletter, and you’ll get $10 off your first order of $50 or more. That’s around a 20% discount.

Design: The popup is definitely eye-catchy. Although it looks “simple,” you definitely can’t miss it.

3. Bliss. Bliss World

When it comes to its website, Bliss has been nurturing that kind of visual look that is made up of pastel colors which are very cleverly transmitted to the pop-up window itself.

The aim of this pop-up window is to collect email addresses, but also to develop an incentive for making a purchase since leaving a contact gives visitors a 15% discount.

Copy: Copy is simple, but again related to the visual appearance of the website. The mixture of these colors seems fun, which is a feature associated with their newsletter (they’re super fun, promise). This connection will, in the subconscious of the visitor, create trust towards the website that they will indeed find in the newsletter exactly what is promised.

Design: Pop-up is simple, but what makes it different is the combination of colors that are sure to attract visitors’ attention, as well as the Submit button in contrasting color.

4. Woolrich. Woolrich

Woolrich has a simple, “cool vibe,” so the pop-up itself is presented accordingly. It is totally unobtrusive, yet effective.

Copy: Copy shows how much the team behind this brand actually knows their target group, thus separating them from the crowd. This sentence has a good marketing effect because it creates a certain privilege.

Design: It is a very simple design with a clear message that really fits into the overall look of the website itself.

5. Hush Puppies. Hush Puppies

Hush Puppies is a website with retro pieces that are simple but effective, so the pop-up window itself is a lot like the one from the previous example.

Copy: Let’s be friends is a cute message that fits in with the photos on the website as well as with a picture of a dog that is almost a symbol of a true friend. Copy that carries a certain emotion such as this one may be widely acclaimed by the target group. In addition, they offer a discount (which is bolded), as well as all the latest information that will arrive directly in subscribers’ inboxes “in return” for contact.

Design: This is where almost all the effect is switched to a friendly copy since the design is extremely simple. Given that the website has photos in vibrant colors, it would also be a great additional effect to have some parts of the pop-up text colored differently.

6. Cutter & Buck.

Cutter and Buck

When it comes to the Cutter & Buck website, it’s about clothes, and this time of elegant and simple shapes and colours, so the pop-up window itself is utterly reduced.

Copy: Copy literally conveys what will happen if a visitor takes action, that is, Sign up for emails and save $15, which is fully in accordance with the target audience.

Design: As far as design is concerned, the only thing that stands out is the brand logo and Sign up button which is in black to draw attention in contrast to the white background.

Executive Summary

When it comes to website pop-up windows, we can conclude that they really play a key role in representing business and what that business brings to the table. They are also very important as they attract so many potential buyers. They offer you the ability to display new products and to promote your email newsletter effectively, which will also bring you new customers.In addition to being indispensable in today’s digital marketing world, creating eye-catching pop-ups is fun and it brings numerous benefits. Of course, they should be consistent with your homepage, as well as your overall web design.

Thanks to pop-ups, your website visitors will spend more time on your website, which will also have a positive effect on your Google rankings!

Pay attention to our tips, define your pop-up goals, and watch your conversion rates increase!

Want more insights like this?

We’re on a mission to provide businesses like yours marketing and sales tips, tricks and industry leading knowledge to build the next house-hold name brand. Don’t miss a post. Sign up for our weekly newsletter.

Table of Contents

    SHARE

    Ugi Djuric

    Ugi Djuric

    Ugi is the founder and CEO of Contenthorse content marketing agency that's specialized in helping B2B SaaS businesses grow their organic traffic with high-quality content and backlink building. He loves writing about SaaS and organic user acquisition, drinking good wines and riding horses.

    View all posts by Ugi Djuric

    Less Development. More Marketing.

    Let us future-proof your backend. You focus on building your brand.