• Blog
  • How to Create a Custom Popup: A Step-by-Step Guide

How to Create a Custom Popup: A Step-by-Step Guide

  • Conversion
  • 6 min read

Table of Contents

Have you ever wished to effortlessly design eye-catching popups that not only grab attention but also drive meaningful engagement? Good news! With OptiMonk, you can take your popup game to the next level without being a design virtuoso.

Our template library is decked out with 300+ ready-to-use popup templates. You can use these templates to grow your email list, beat cart abandonment, promote special offers, collect customer feedback, and so much more.

But what if you’re eager to go beyond the templates and create personalized, custom popups that align perfectly with your brand?

Fear not! Our drag-and-drop editor ensures that you can craft sleek custom popups seamlessly, even if you don’t consider yourself a design expert.

In this article, we’ll show you how you can make your own popups for both desktop and mobile in minutes.

Ready? Let’s do this! 

What is a custom popup?

But first, let’s define what a custom popup is!

A custom popup is a highly personalized, interactive overlay that appears on your website with the goal of capturing visitor attention, driving engagement, or encouraging a specific action.

Unlike standard popups that may follow a generic template, custom popups are tailored to fit your website’s design, audience preferences, and business objectives.

This customization can involve unique messaging, branding elements, and specific triggers based on user behavior.

How to create a custom popup with OptiMonk?

Now that you understand what a custom popup is, let’s dive into the practical steps for creating one with OptiMonk.

Step 1: Create your custom popup with just a few clicks

First, log in to your OptiMonk dashboard. Click on the ‘New Campaign’ button. Then click on the ‘Start from Scratch’ button.

OptiMonk custom popup creation process

Choose your domain and hit ‘next’ in this window: 

Popup with option to choose domain

Step 2: Edit your custom popup campaign

You’ll see an empty popup once you’re redirected to the editor. Here’s a preview: 

How to create a popup in HTML without CSS

Let’s create a popup for summer sales.

To do that, click on the layout tab:

Layout options for custom popup

Next, choose ‘frame’ to edit it—like so: 

OptiMonk popup editor

You can then edit the popup size under the same tab:

Edit popup position and size

Next, head to the style tab and choose the background color you’d like to use: 

Popup background image edit

Want to change the background of the ‘X’ button that closes the popup? Go back to layout and choose the ‘close button’ tab.

Options for custom popup close button color

Here, you can change the style of the ‘X’ button.

Edit close button

Now you can start adding structural elements, your options include: a block, spacer, or divider. 

Below, we add a block—listed under ‘Structural Elements’: 

Adding a block to popup content

Choose a column layout for the block. Here, we’ve gone for one with two columns: 

Adding a column to popup

To the left side, we’ve also added an image. You can do this by heading to ‘Add Element’ and clicking ‘Image’, found under ‘Basic Elements’. 

Add images to popup

We can always change the position or the size of the photo in the future. 

You can drag-and-drop a text element in the right-hand column: 

Adding text to popup

You can add the text you want and edit the font, size, color, weight, and line height to suit your needs:

To add text, follow these 3 simple steps:

  1. Go to ‘Add Element’ 
  2. Click ‘Text’ under ‘Basic Elements’ 
  3. Drag and drop the text icon into your popup 
how to make a pop up message in HTML

Click on the advanced tab and edit the margin to place the text where you want it to be on your popup:

Placing text on popup

Now, let’s add another block under this one. Let’s change the column count to 1 in this case:

Adding column to custom popup

You can also add a countdown element to this block to increase urgency and boost conversions. The countdown timer can be found under the ‘Add Element’ tab, under ‘Product Offers’.

Adding countdown element to custom popup

First, set the timer.

You can do this by clicking on the ‘General’ tab, here you’ll find options to: 

  1. Opt for a fixed time or fixed date (select your option from the dropdown list).
  2. Edit the days, hours, and minutes, and seconds by typing in your desired duration in the assigned boxes or experimenting with the toggle feature listed below them.
countdown timer HTML popup example

Then edit the style.

Click on the Style tab, use the toggles to experiment with font size, height, and width. You can also choose your font by selecting your font of choice from the drop-down menu. 

Below this section, you also have the option of selecting a different color for your text, and the background. You can also add a border and shadow by selecting these options from the drop-down menu – also found under the style tab. 

Editing the countdown timer

How about adding an email signup form? Add an input element below the timer. You can find it under ‘Form Elements’. To place it, drag and drop it into your popup. 

Adding an email signup form for the popup

Unhappy with how it looks? You can edit it to your taste. To do that, just click on the Style tab and change the width to manual. We also edit the margin on the advanced tab to move it lower. Take a look:

Editing an email signup form for the popup

Looks better already—right?

Now, we can change the placeholder of the field and align it center.

Edited signup form for the popup

Now, we need a button.

Go to ‘Add Element’, ‘Basic Elements’, and then select ‘Button’.

Popup button

You can edit multiple elements like the width, the background color, the margin, and the text font to craft a high-converting button.

The edit button option will automatically open once you drag and drop your button into your popup. To edit your button’s style, navigate to ‘Style’ under the ‘Edit Button’ tab. Like so: 

Edit popup button

To perfect your popup, you’ll also need a call-to-action, which you can include by adding another text element. To do so: 

  1. Click the ‘Add Element’ tab
  2. Drag and drop the text element into your popup 

Here’s how we styled ours:

Add text for call to action to popup

Ta-dah! That’s how you can create a custom popup in minutes.

You can do some final changes in the design if you’d like to, e.g. change the font type.

how to create a popup

Now all you have to do is save it and edit the settings just like any ready-to-use template.

In a few steps, you learned how to customize a popup. Next, we’re diving into successful popup examples that you can easily personalize for your customers. Ready? 

4 real-life custom popup examples

Looking for inspiration on how to customize your popup displays? Check out these striking designs below to style your own custom popup.

Example of list-building popup

Popups can help build your email list and boost your reach. Fitness company Crossrope.com grew their list by a massive 900% with a simple popup. 

Here’s how to replicate what’s awesome about this list-building popup: 

  1. Go for bold hues and draw the eye. 
  2. Always use one call-to-action to boost your conversion rates. 
  3. The ask from visitors is a minimal one: drop in your email address. Never overload your customers with too many asks. 
  4. A clear ‘X’ button in a contrasting color to the background makes it easy for visitors to exit the popup. This helps you avoid irritating visitors if they don’t want to share their email addresses. 
Example of special-offer popup

Drive sales by using popups to promote special offers. The best popups have more than a 50% conversion rate, here’s why this popup is likely to be a success and what you can do to replicate it: 

  1. Go for a bright color palette to attract attention. 
  2. Minimal text pushes the visitor towards clicking the button to get their 63% off. If you want your visitors to convert, then focus their attention with minimal text. 
  3. You can drive conversions by using contrasting shades for the button and the popup’s background.
Example of list-building popup

To build your list by trading inside info on sales and sales promotions for your visitors’ email addresses, follow these steps:

  1. Increase urgency by focusing on a seasonal, time-sensitive sale.
  2. Highlight the benefit of sharing an email address in an eye-catching shade (“74%”).
  3. Promotes a desirable item that visitors would like to get a deal on to increase your click-through rates.
Example of exit-intent popup

How do you beat abandoned carts and reduce bounce rates? With an exit-intent popup. 

This popup accomplishes this in style. Here’s what you can take away from it:

  1. Evocative copy: “Hello to Summer” inspires images of BBQs with friends and lazy beach days. Use language tied to positive events and emotions to help draw in your visitors. 
  2. Promotes a strategic offer that boosts your average order value (e.g. spend $500 to get $100).
  3. Ensure your visitor has to copy and paste their discount code. This encourages them to use it as soon as possible. 

Wrapping up

With the right inspiration, it can be easy to know how to plan your own custom popup. Don’t have a clue about how to create a CSS or HTML popup? No sweat. 

You don’t need design skills to create a beautiful, custom popup. Create awesome custom popups with our drag-and-drop editor and watch crazy growth roll in for your ecommerce store. 

Ready to create? Make your free OptiMonk account today—or visit our template library and pick out one of our ready-to-use templates.

Migration has never been easier

We made switching a no-brainer with our free, white-glove onboarding service so you can get started in the blink of an eye.

Create a free account
Learn more

What should you do next?

Thanks for reading till the end. Here are 4 ways we can help you grow your business:

Boost conversions with proven use cases

Explore our Use Case Library, filled with actionable personalization examples and step-by-step guides to unlock your website's full potential. Check out Use Case Library

Create a free OptiMonk account

Create a free OptiMonk account and easily get started with popups and conversion rate optimization. Get OptiMonk free

Get advice from a CRO expert

Schedule a personalized discovery call with one of our experts to explore how OptiMonk can help you grow your business. Book a demo

Join our weekly newsletter

Real CRO insights & marketing tips. No fluff. Straight to your inbox. Subscribe now

Share this article
Written by
Picture of Nikolett Lorincz

Nikolett Lorincz

Nikolett is the Head of Content at OptiMonk. She is obsessed with content marketing and loves creating educational content for ecommerce store owners. She truly believes in the importance of quality over quantity.
You may also like