How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

How to Copy The Popups of Top Ecommerce Brands Using OptiMonk

If you work in the ecommerce industry, you’re always wearing two hats while you’re shopping online.

Sure, you’re looking for items you really love and searching for great deals just like everyone else. But you’re also keeping an eye out for what works and what doesn’t on other ecommerce sites. You’re collecting inspiration. Many great ideas get their start like this.

What happens if you see a stunning popup on a top brand’s website?

Well, if you’re an OptiMonk user, you can easily adjust our popup templates to make your onsite messaging look just like the most amazing popups from stores like Adidas, American Eagle, and Crocs!

In this article, we’ll go over exactly how to create popups that look like those amazing examples that inspire you.

1. Adidas

Adidas is one of the largest lifestyle brands in the world, and it’s an aspirational brand for many. 

The company leverages this image in the popup below, offering their website visitors the chance to “Join AdiClub.” Who wouldn’t want to be in that club?

A loyalty club popup from Adidas

If your store also has a loyalty club, you can use a similar design to promote it.

Let’s see how that would work by trying to copy the popup. (Remember to use your own images and copy when you’re actually doing this!)

We’d start by choosing a template, like the one below, that has similar features to the one we’re copying.

First, we added the copy from the Adidas popup: 

Customizing a popup template in OptiMonk’s drag and drop editor

Now let’s adjust the popup’s style.

We changed the popup’s corner radius to 0, making it a perfect rectangle:

Customizing a popup template in OptiMonk’s drag and drop editor

Then, we move the close button to the edge of the popup by changing the element’s alignment:

Customizing a popup template in OptiMonk’s drag and drop editor

Next, we changed and re-sized the image, and added a white border:

Customizing a popup template in OptiMonk’s drag and drop editor

And we made the left column bigger:

Customizing a popup template in OptiMonk’s drag and drop editor

Finally, we made some small changes like adding a new checkbox field (“Yes, I am over 13 years old”) and changing the button’s appearance. After changing the fonts to a similar one that Adidas used, here’s what our popup looked like: 

Customizing a popup template in OptiMonk’s drag and drop editor

It’s almost indistinguishable! With just a few small changes, we were able to turn this template into a completely different popup. 

2. Fashion Nova

Unlike the popup from Adidas we just saw, Fashion Nova used a beautifully minimalist popup to promote a 10% discount. There’s no image and there are no colors, just black and white text. Even the font is a simple sans-serif. 

What this design approach does is force visitors to pay attention to the offer—since that’s all there is on the screen!

Fashion Nova’s discount popup

Additionally, Fashion Nova asks you to choose from a list of “preferences” regarding what types of products you’re interested in. Gathering this information helps them segment their customers, ensuring that their marketing messages are relevant (you can read more about this approach here). 

If you’d like to give it a try, here’s how you could go about it. 

Once again, it’s best to select a template that has similar elements to the one we’re copying. We chose to base ours on this quiz-style template:

We can use OptiMonk’s Theme Kit feature to change all the corners, colors, and fonts at once:

Customizing quiz popup in OptiMonk’s drag and drop editor

Much closer already! Especially after we added the Fashion Nova logo to the top:

Customizing quiz popup in OptiMonk’s drag and drop editor

Then, we changed the copy: 

Customizing quiz popup in OptiMonk’s drag and drop editor

Next, we added a few elements at the bottom that the original Fashion Nova popup had,  namely an email field, a checkbox field, and two buttons:

Customizing quiz popup in OptiMonk’s drag and drop editor

At this point, we had all the elements we needed on the popup. The next step was to customize them to look like the Fashion Nova popup we started with.

We started with the text elements at the top, changing the font size and weight:

Customizing quiz popup in OptiMonk’s drag and drop editor

We made the survey elements smaller by changing their width and height and slightly adjusting their borders:

Customizing quiz popup in OptiMonk’s drag and drop editor

The last step was to customize the email field and checkbox:

Customizing quiz popup in OptiMonk’s drag and drop editor

And the buttons:

Customizing quiz popup in OptiMonk’s drag and drop editor

All done! How amazing does that look?

3. American Eagle

Rather than using a lightbox popup to request that website visitors subscribe to their email list, American Eagle took a different approach by creating a sticky bar that appeared at the bottom of their webpage.

American Eagle’s list building sticky bar

Sticky bars aren’t as attention grabbing as popups, but that means that they don’t interrupt the user’s browsing experience to the same extent as popups. 

For some stores that aren’t actively trying to grow their list as quickly as possible, a sticky bar is a good solution to gather some emails while providing the most interruption-free experience possible. 

If that sounds like you, you can create a sticky bar just like American Eagle’s by starting with this template:

The first step we took was removing the image on the left:

Customizing a sticky bar in OptiMonk’s drag and drop editor

Then, we changed the copy and changed the formatting to match the fonts and sizing that American Eagle used: 

Customizing a sticky bar in OptiMonk’s drag and drop editor

After customizing the email field and button, we added checkboxes for “All Emails” and “Airee Emails” (since we don’t have access to toggle bars):

Customizing a sticky bar in OptiMonk’s drag and drop editor

And that was that!

4. Crocs

An email signup popup from Crocs

Let’s start with this template, which already looks pretty similar:

We removed the unnecessary elements from the popup and updated the image:

Customizing an email popup template in OptiMonk’s drag and drop editor

Next, we changed the colors of the background and the text:

Customizing an email popup template in OptiMonk’s drag and drop editor

Then, we updated the copy and added a white border around the whole popup: 

Customizing an email popup template in OptiMonk’s drag and drop editor

And after moving the close button to the edge of the popup, we were done:

Customizing an email popup template in OptiMonk’s drag and drop editor

Identical, right? 

Recap

As you can see, the combination of OptiMonk’s wide range of templates and its powerful drag-and-drop editor means that you can copy any popup you see online. It’s just a matter of adding the right elements and changing the right settings. 

With this article, we certainly weren’t trying to tell you to simply copy other brands’ popups. Your popups should match your store’s personality, look, and feel. And hopefully, you’ve learned how easily you can make a template look completely different to match your style!

And of course, getting inspired by successful brands won’t hurt! 😉

Are there any popups you’ve seen around the web that you loved? Let us know in the comments!

Share this

Written by

YOU MAY ALSO LIKE