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.
Shortcuts ✂️
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?
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:
Now let’s adjust the popup’s style.
We changed the popup’s corner radius to 0, making it a perfect rectangle:
Then, we move the close button to the edge of the popup by changing the element’s alignment:
Next, we changed and re-sized the image, and added a white border:
And we made the left column bigger:
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:
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!
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:
Much closer already! Especially after we added the Fashion Nova logo to the top:
Then, we changed the copy:
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:
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:
We made the survey elements smaller by changing their width and height and slightly adjusting their borders:
The last step was to customize the email field and checkbox:
And the buttons:
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.
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:
Then, we changed the copy and changed the formatting to match the fonts and sizing that American Eagle used:
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):
And that was that!
4. Crocs
The last popup we’ll copy is a classic 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:
Next, we changed the colors of the background and the text:
Then, we updated the copy and added a white border around the whole popup:
And after moving the close button to the edge of the popup, we were done:
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
