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?

copy adidas popup 01 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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: 

copy adidas popup 02 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

Now let’s adjust the popup’s style.

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

copy adidas popup 03 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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

copy adidas popup 04 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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

copy adidas popup 05 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

And we made the left column bigger:

copy adidas popup 06 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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: 

copy adidas popup 07 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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!

copy fashion nova popup 01 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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:

copy fashion nova popup 02 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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

copy fashion nova popup 03 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

Then, we changed the copy: 

copy fashion nova popup 04 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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:

copy fashion nova popup 05 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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:

copy fashion nova popup 06 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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

copy fashion nova popup 07 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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

copy fashion nova popup 08 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

And the buttons:

copy fashion nova popup 09 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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.

copy american eagle popup 01 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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:

copy american eagle popup 02 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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

copy american eagle popup 03 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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):

copy american eagle popup 04 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

And that was that!

4. Crocs

copy crocs popup 01 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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

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

copy crocs popup 02 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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

copy crocs popup 03 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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

copy crocs popup 04 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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

copy crocs popup 05 - How to Copy the Popups of Top Ecommerce Brands Using OptiMonk

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

Share on facebook
Share on twitter
Share on linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *