Popup Design (and Targeting) Ideas to Try in Your Store

5 Trending popup design ideas to try

1. Sidebars

In the world of popups, sidebars are the new black. They slide in from the side of the screen without interrupting the user experience as modal popups or fullscreens do. Another huge advantage of sidebars is that they provide plenty of real estate for your message and CTA. They are a great way to welcome visitors to the website, feature a signup form, and promote a sale or a product.

Here is how Maya Tea uses a sidebar to greet first-time visitors and invite them to join the email list in exchange for a coupon:

According to our recent A/B test, sidebars are also remarkably efficient. For example, if you’re trying to build an email list on your website, a sidebar is likely to bring you as many signups as a good old modal popup.

Want to add a sidebar to your website?

Here is a template you can try on your website for free with Getsitecontrol. Simply click on the template and follow the prompts on the screen to start editing it:

Before publishing the sidebar, you’ll be able to adjust the copy, image, font, color theme, and targeting. At the end of the article, we’ll walk you through the setup process, step by step.

2. GIFs on popups

Another noteworthy trend is using GIFs instead of still images on a popup.

Animation can be the ultimate thumb-stopper, and it might help you boost your click-through rate, too. Here is an excellent example from Scarpetta Pasta, an artisan Italian restaurant in London:

Showing a product or experience, as Scarpetta Pasta does, is the best GIF idea to attract your customers’ attention. Keep that in mind if you choose to go this route!

If you’re looking for more subtle examples, take CAP POINT and their promo slide-in:

This promo lets customers copy the coupon code to the clipboard and has an impressive 6,88% click-through rate (CTR).

More so, during the first week of the campaign, over 21% of buyers started their shopping journey on the website by grabbing this coupon, according to the data provided by the CAP POINT team. Although it’s difficult to be certain about the reasons why a customer ends up making a purchase, we can hypothesize that the coupon might have encouraged some of the customers to follow through.

3. Coupon boxes

Coupons have made their way from paper retail catalogs to ecommerce, and they are here to stay. In online stores, a coupon box is a stylized popup that lets you either copy the code to the clipboard or apply it directly to the cart.

Here is an example of how Shrubbery Crafts & Models greets their website visitors with a coupon box:

Just like the Shrubbery Crafts store, you can use coupon boxes to promote a welcome offer for first-time buyers and encourage them to make a purchase. You can also use coupons to drive attention to the new collection, create some traction for your slow-moving stock, and even prevent shopping cart abandonment.

Want to add a coupon box to your website?

Check these pre-designed popups and select the one you think you could make use of:

Both popups bring the copy-to-clipboard feature, which means you’ll be able to add a discount code to the button-click settings so that your customers can copy it to the clipboard with a click. To learn more about setting things up, check this step-by-step tutorial.

4. Dark theme popups

Browsers, social media apps, and SaaS platforms have adopted the dark theme, and popups are catching up with the trend. The dark theme popup design looks stylish and sleek, especially if it’s coherent with your overall brand aesthetics.

Aplos, a non-alcoholic spirit production company, uses a dark theme popup to promote their complimentary shipping offer to first-time visitors. Notice how they adjusted the button color and the font to match the design of the website:

According to Aplos, this welcome popup gets the job done. Its signup conversion rate is a whopping 11,3%, but more importantly, about 24% of customers who make a purchase, start their shopping journey by filling out this form and taking advantage of the offer.

💡 You can apply the dark theme to any popup once you enter the editing mode and open the Theme menu in Getsitecontrol.

5. Middle of the screen slide-ins

Popups that slide in the middle of the screen – whether at the top or bottom – are another emerging trend we’re seeing in online stores.

A House of Books uses this approach to build their email list:

Although slide-ins have been around for a while, most websites display them at the bottom corners of the screen – the places already crowded with chatboxes, cookie banners, and contact buttons. Displaying a call to action in the middle is a less obvious choice which means it’s more likely to become an attention magnet for your visitors.

Want to add a slide-in to your website?

Consider grabbing one of these templates. One of them is designed to pop up at the top of the screen; another one – at the bottom:

Once you’re done customizing the look of the popup, you’ll be able to use audience targeting settings to create conditions for when and where it should appear on the website.

5 Ideas for popup targeting settings

Now that we’ve looked at the trending popup designs, let’s move on to audience targeting and messaging ideas.

The purpose here is to help you create more personalized campaigns for different audience segments.

Popup targeting settings are so versatile, that using them for one single purpose would be an oversight.

For example, you may have a limited-time welcome offer for first-time website visitors – and a different one for those who return to your store. You may also have a special promo for your mobile audience or those abandoning their shopping carts.

Here are a few ideas to help you get started.

1. Create welcome (and welcome back) popups

The first few moments on your website often define whether a visitor will become a customer or not. To incline first-time visitors to make a purchase, ecommerce brands use welcome offers. They are designed to greet new visitors and offer a limited-time discount on the first order – often in exchange for email signup.

Do welcome offers work well? This will depend on the audience and the incentive you’re using in the offer.

The higher the purchase intent of a customer, the more likely they are to take advantage of the offer.

For instance, Fort skincare from the example above reports that on mobile, their welcome offer converts as many as 5,9% of visitors into subscribers. Given that the average email signup rate ranges between 1% and 3%, this can be considered a success.

Another great practice that tends to be overlooked, is to show appreciation to your returning visitors. For example, you can simply acknowledge them by saying “Welcome back!” and mentioning an ongoing deal or a new collection. Or you can create a dedicated discount code to encourage those who didn’t convert during their first visit like SunshadesBox does:

In either scenario, all you need to do is tweak the targeting settings in Getsitecontrol and select whether you want to display the popup to returning visitors or first-timers only. We’ll talk more about targeting settings at the end of the article.

2. Use popups for cross-selling

Here’s another popup idea that has proven to be effective for ecommerce brands. It might not be obvious, but with Getsitecontrol, you can use popups to recommend related products to your customers – or, as marketers would put it – to cross-sell.

Here is an excellent example from the Crockpot Creations website. They use a slide-in to cross-sell homemade brownies to their customers during checkout:

Notice how this slide-in allows for adding brownies to the cart with a button click. That’s what a perfect cross-sell looks like: it brings a clear call to action, features the suggested product, and allows for adding it to the cart without interrupting a customer’s journey.

Using targeting settings in Getsitecontrol, you can display recommendations on the product page, when a customer adds an item to the cart, or right in the shopping cart, during checkout. To let customers add the cross-sell to the cart with a button click, you might need some knowledge of Javascript or the help of a developer. However, if you’re on Shopify, you can use this zero-coding guide.

3. Use exit-intent popups to prevent abandonment

Moving on to the biggest splinter in every ecommerce brand owner’s foot – shopping cart abandonment. There’s no single reason why people abandon products in the shopping cart, but according to Baymard’s research, one of the most common reasons is the final order price. And if that’s the case for your store, you can try to prevent abandonment by offering a discount code to those who are leaving.

The most efficient way to do that is by using exit-intent popups in the shopping cart.

Our data shows that exit-intent popups featuring a coupon can save up to 8% of abandoned carts.

Here is an example of an exit-intent popup from Lucky Dog, an online pet boutique:

The Lucky Dog team did a great job because everything about this offer is very well thought-through: the image choice, the call to action, and the sense of urgency.

💡 If you’d like to try exit-intent popups in your store, read our step-by-step guide to setting things up (here is a special version for Shopify merchants).

4. Pay special attention to mobile popups

Mobile popups can be up to 4 times more effective than their desktop counterparts, according to our research on website popup performance. That’s why it’s a good practice to optimize your CTA – or even create a separate one to optimize mobile conversions.

Here are the best practices to stick to:

• Choose slide-ins and bars over fullscreens and lightboxes
• Display the popup for at least 3-5 seconds or upon button click
• Stick to a minimalistic design, consider removing images
• Adapt the copy to smaller screens: make sure it’s readable
• When designing forms, avoid using more than 1-2 fields per page

There is no golden rule for creating an efficient mobile popup campaign: you’ll need to make this decision based on the mobile version of your store. Does your website interface look clean or saturated on mobile? How many widgets, buttons, and popups are there already, and where are they on the screen? Based on the answers to these questions, you can choose the best CTA format that will maintain a great user experience.

For example, here is how Pilgrim, a European jewelry brand, promotes their email signup form. Instead of using a popup, they use a sticky button offering a 10% discount. Once a visitor clicks it, up pops the signup form.

For mobile screens, sticky buttons are the least intrusive tactic out there. Although the click-through rate of the button is 1,26%, the conversion rate of the form is 97,68%. Why? Because customers who click the button are likely to have high purchase intention, and they are ready to follow through.

💡 To create a dedicated popup for mobile in Getsitecontrol, just specify the device when setting up audience targeting, and use the mobile preview mode when crafting the copy.

5. Personalize your message using dynamic text replacement

If you’re in ecommerce, you know that personalized emails, ads, and landing pages convert times better than generic ones. Popups can play a part in this, too. For example, if you’re promoting a free shipping offer, you can add {city} to the copy on your popup and instead of “Free shipping on orders above $50”, it will look like “Free shipping to Brooklyn on orders above $50.”

Apart from the location, you can use variables like current date, iOS, UTM tag, and other variables. And if you’re selling on Shopify, you can even display a minimum order countdown or the name of a logged-in customer.

Watch this video to get a better idea of how dynamic text replacement works:

How to create your own popup with Getsitecontrol

Now that you’ve studied plenty of examples, let’s see how you can add a popup to your online store within 15 minutes using Getsitecontrol.

Getsitecontrol is a popup builder that helps you increase website conversions, be it email signups, sales, page visits, or form submission.

You can use Getsitecontrol on any platform without having to deal with the website’s code. Dedicated apps are available for Shopify and Wix, plus, there’s a plugin for WordPress users. Getsitecontrol comes with a free plan, so you can add popups to your website at no cost!

Step 1. Select a template

Log into your Getsitecontrol dashboard and hit Create widget; then proceed to Template gallery (you can visit the gallery and view templates even without logging in). Use the left-side menu to look through categories and use cases:

Feel free to click templates to see them in action. Notice that you can switch to the mobile preview mode to see how the popup will look on a smartphone, and preview the same popup in the dark theme.

When you find the popup design that’s close to what you have in mind, follow the prompts on the right side. The selected popup will be automatically added to your dashboard in editing mode.

Step 2. Edit the copy

The app brings an intuitive WYSIWYG editor – so all you need is to click on the part of the text you want to change, and start typing your copy. You can also edit or add new fields and buttons using the menu controls.

Notice that this popup contains a second page where you can thank new subscribers and provide the promised discount code. Remember to check it out and adjust messaging if needed.

Step 3. Adjust the design

To customize the look of your popup, open the Theme menu. From there, you can select the color theme, style, and font. You’ll also be able to change the color of individual elements, such as the button, background, or text.

Keep in mind that by default, your popup will be displayed on desktop and mobile devices, so it’s a good idea to check the mobile preview before moving forward. Use the corresponding button at the bottom of the screen and select the device you’d like to check:

Step 4. Set up targeting

Finally, you can create targeting conditions for where and when the popup should be displayed. For example, you can select website pages where it should or shouldn’t appear; you can also define the audience your message should be displayed to, and select the displaying triggers.

The controls you need are located under the Targeting tab, and even though most settings are self-explanatory, you can rely on the helping prompts displayed when you hover over menu options:

💡If you stumble at any point, read our detailed guide to using targeting settings.

Once you’re finished, the popup is ready to go live. If you’re happy with the way it looks, go ahead and hit Save & close in the top right corner. If you want to go the extra mile, feel free to explore the Notifications and Integrations tabs. The former helps you create an automated email for new subscribers and the latter helps you connect the form to other apps, such as email marketing software, Google Sheets, and Hubspot.

Step 5. Publish the popup on your website

When you activate the popup, it will go live on your website under the conditions you’ve selected in the Targeting tab:

It’s always a good idea to test it and make sure everything works properly. Once the popup starts getting views and hits, you’ll be able to see its performance in real-life and access detailed statistics.

If you’re trying a new popup design and feeling hesitant about it, you can always A/B test your popups to find out if one version converts better than the other.

Make your call to action pop

At Getsitecontrol, we see dozens of inspiring popup examples every day. However, design is just one component of an efficient popup. Your call to action and your audience targeting approach are just as important as the look!

With Getsitecontrol, you have everything you need to create good-looking popups for your online store and display them to the right audience at the right moment – all without coding or design knowledge.