Email & SMS marketing so good, it’s boring

You’ve got enough exciting stuff to worry about. Let us be the reliable platform you can depend on. Make an average $68* for every $1 you spend. So boring.

Start free Cancel any time | No credit card required

Drive sales on autopilot with ecommerce-focused features

See Features

How to add a popup to Shopify in 2025 [3 methods]

Reading Time: 9 minutes

A Shopify popup packs a serious punch for boosting your business. Dangle an irresistible discount in front of shoppers and watch your email list grow while sales start flowing. It’s that simple — and it works.

The easiest way to add a popup to your Shopify store is with the Omnisend or Shopify Forms app. Shopify Forms is native, so you manage it within Shopify, while Omnisend provides a more advanced third-party dashboard. 

Once your Shopify popup is live, you can monitor conversion rates and optimize its design and display conditions to increase submissions. 

Join us below to learn how to add a popup on Shopify. 

Create Shopify popups that convert with Omnisend

Three methods to add Shopify popups 

There are several ways to add a Shopify email popup to your store, each with its own advantages. Three of the popular options include: 

  1. Third-party popup apps: This is the most user-friendly option. The Shopify App Store offers various popup apps, such as Omnisend. These apps provide a drag-and-drop interface for easy popup creation and offer numerous features like exit-intent popups, countdown timers, and advanced targeting options.
  2. Built-in Shopify features: Shopify offers basic built-in features for adding popups to your store. You can create announcement bars to display simple messages across your store. While it’s not as feature-rich as third-party apps, built-in Shopify popups are suitable for basic lead generation and promotion needs.
  3. Adding manual code: For advanced customization, you can add a Shopify popup email signup form using manual code editing. This approach requires some coding knowledge but allows you to tailor the popup experience exactly to your preference.

Adding popups with Omnisend

Omnisend is a Shopify-certified app with a full suite of popup tools for brands of any size. Our platform is specifically designed to support ecommerce brands as they branch into omnichannel marketing.

Whether you’re using a basic Shopify account or Shopify Plus, our workflow to add popups to Shopify pages is exactly the same.

In this popup signup form video, you’ll see exactly how Omnisend’s intuitive form builder allows you to create high-converting popups for your Shopify store:

1. Accessing the form builder

Navigate to Forms > Create form > Style > Popup in your Omnisend dashboard. Click or tap Create form to be taken to the editor. 

form builder
Image via Omnisend

Choose a popup template from the Forms library. Each serves a different marketing purpose, such as newsletter signups or promotional offers.

The template selection opens the Form Builder interface, which has main sections for editing items (Blocks), layouts, behavior, and theme settings.

2. Setting up the basic layout

Use Theme Settings to define your popup’s structure and basic settings, such as width, background image placement, and fields.

basic settings
Image via Omnisend

Selecting Form Layout settings lets you:

  • Switch display formats between popup, landing page, embedded, or flyout
  • Set width between 300-1000px for any screen size
  • Place images left, right, top, or as background

Other selections let you customize button styles and input field appearances, including border style, font settings, and color schemes.

3. Configuring display rules

Under Behavior Settings, set when and where your popup appears.

display rules
Image via Omnisend

Choose Display conditions based on page visits, time on page, scroll depth, or exit intent. Define Visibility (mobile, desktop, or both), Targeting options for specific URLs or customer segments, and Frequency (e.g., show after one day). 

4. Adding new form items 

You add new form items with the drag-and-drop Form Builder

For instance, you can add email fields, phone number fields, buttons, checkboxes, images, and legal text blocks (required for GDPR/TCPA compliance).

popup setup
GIF via Omnisend

The form fields are completely customizable with labels, placeholder text, and required field messages. You can add supplementary elements like images, text blocks, dates, or dropdown menus to collect additional information. 

5. Adding success messages 

Switch to Success in the bottom menu, where you can fully customize what visitors see after submitting the form — including buttons, layouts, and design elements.

adding success message
GIF via Omnisend

Consider creating a separate message for returning subscribers, with the option to add promotional offers for their loyalty.

6. Testing and enabling

Once you’re happy with your Shopify popup design in Omnisend, click Enable to make your popup live or Save & Close to keep it as a draft.

enabling popup
Image via Omnisend

Once enabled, your Shopify popup will appear on your site with your configuration.

Using Shopify’s themes

Shopify offers built-in popup features via the Forms app and the Forms theme app embed. After adding these to your theme, you can create and enable popups.

Enabling popups

Install the Shopify Forms app on your store. The app gives you complete access to the popup form builder. However, it does not enable the display of popups. To do so, you need to install the Forms theme app embed. 

To activate an app embed in Shopify:

  • Go to Online Store > Themes in your admin panel
  • Find your theme and click Customize
customizing theme settings
Image via Shopify
  • Click the App embeds icon in the sidebar
  • Select the Forms embed or use the Search bar to find it
  • Click the toggle button next to your chosen embed to activate it
  • Adjust any settings using the expand icon ▸
  • Click Save

Creating your form

Navigate to Apps > Forms in your Shopify admin. Click Create form and choose between:

  • Popup forms that float above store content
  • Inline forms that are embedded within page sections
popup form selection
Image via Shopify

Customizing appearance

The design panel allows you to customize the appearance of your form. You can select brand colors for backgrounds, buttons, fields, and text.

popup settings
Image via Shopify

Choose from available fonts for titles and body text. Add optional images with left, right, or background positioning to match your store’s layout. 

You can add a teaser to enhance popup visibility around your page’s edge. You can control its position and preview it before saving. 

Setting form display and behavior

Set how your form appears using Floating or Overlay display modes. Configure when it shows through triggers like:

  • Page view count
  • Time delay
  • Exit intent (desktop only)
  • Device type (mobile/desktop)
  • Specific page types
form behavior
Image via Shopify

Saving your popup

Once you’ve configured your Shopify form, click Save at the top of the page. 

saving changes
Image via Shopify

Note that if you downloaded the Shopify Forms app before the Forms theme app embed, you will see this message after saving:

turning on forms theme app embed
Image via Shopify

Just follow the steps to complete the setup. 

Manual code addition

While Omnisend and Shopify Forms are the best ways to easily add popups to your store, you can do it manually with code. 

This option is more advanced and requires coding knowledge. You should back up your theme files before making any edits or changes. 

Creating a popup form in HTML

HTML is the simplest way to add a custom popup to your Shopify store. The form below was created by us and tested with the W3Schools HTML tool:

creating HTML form
Image via W3Schools

There’s a lot going on with this form to make it look the way it does. Here’s the code (feel free to grab it and reuse it):

{% schema %}
{
  “name”: “Custom Popup”,
  “settings”: []
}
{% endschema %}
<style>
.popup-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: lightblue;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
}
.popup h2 {
    text-align: center;
    margin-bottom: 20px;
}
.popup-form {
    background-color: white;
    padding: 20px;
    border-radius: 4px;
}
.close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 20px;
}
.form-group {
    margin-bottom: 15px;
    position: relative;
}
.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}
.form-control::placeholder {
    color: #666;
}
.checkbox-group {
    margin: 15px 0;
}
.submit-btn {
    background-color: black;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}
</style>
<div class=”popup-container” id=”popupForm”>
    <div class=”popup”>
        <span class=”close-btn” onclick=”closePopup()”>&times;</span>
        <h2>Sign up for 20% off your first order</h2>
        <div class=”popup-form”>
            <form id=”discountForm”>
                <div class=”form-group”>
                    <input type=”text” class=”form-control” id=”name” name=”name” placeholder=”Name” required>
                </div>
                <div class=”form-group”>
                    <input type=”email” class=”form-control” id=”email” name=”email” placeholder=”Email” required>
                </div>
                <div class=”checkbox-group”>
                    <label>
                        <input type=”checkbox” name=”marketing” checked>
                        I agree to receive marketing messages
                    </label>
                </div>
                <button type=”submit” class=”submit-btn”>Submit</button>
            </form>
        </div>
    </div>
</div>
<script>

Adding the HTML popup to Shopify

Once you have your form, you can add it to Shopify with these steps:

  1. From your Shopify admin, navigate to Online Store
  2. Click on Themes
  3. Click Customize
  4. Click the three dots at the top of the editor and select Edit code
  5. Under the Sections directory, click Add a new section
  6. Name it custom-HTML
  7. Click Done

After adding this code:

  1. Go to your theme.liquid file
  2. Add this line where you want the popup to appear (typically just before the closing </body> tag): {% section ‘custom-HTML’ %}
  3. Click Save

You can then preview your store. Here’s how our form looks:

manually coded HTML popup
Image via Shopify

Customizing colors, form fields, buttons, content, opt-in boxes, and other elements requires tweaks to the code above. 

For a functioning opt-in box in Shopify, you’ll need to connect it to the Shopify Customer Privacy API and potentially to your email marketing platform. 

How to target popups for Shopify with Omnisend

In Omnisend, building a Shopify popup is just the first step of the engagement process. To delight your customers and construct that flywheel of value, you need to focus on specific visitors, web pages, and products.

This is the power of targeting.

Omnisend popups
Image via Omnisend

Targeting refers to limitations that define how and where your popups are displayed. Here are three ways to direct popups for Shopify with Omnisend:

Target specific visitors

You can target specific visitors or sets of visitors with Omnisend’s popup targeting options. For example, you can choose to show the popup only to:

  • Existing contacts
  • New visitors and potential leads from specific sources

This allows you to provide exclusive offers and updates to loyal subscribers or target new visitors to grow your email list.

Target specific URLs

Omnisend lets you target popups to appear on certain URLs on your Shopify domain or similar URLs like Shopify collection pages. To do this, you must:

  • Open your saved popup draft
  • On the right side, you’ll find Targeting options under Behavior
  • Define your targets under the Appears on URL or Does not appear on URL settings
targeting specific urls
Image via Omnisend

This ensures your popup content is relevant to the page visitors are on, thereby increasing engagement.

Target visitor behavior

You can also direct popups based on visitor behavior, such as:

  • Time on page: Show the popup after a certain time delay or when the visitor is about to leave the page
  • Scroll depth: Display the popup after the visitor has scrolled a certain percentage of the page
  • UTM parameters: Target visitors from specific marketing campaigns

Remember you can come back to your targeting settings at any time. And if you still don’t feel confident about doing this on your own, you’re welcome to browse Omnisend’s Knowledge Base whenever you need.

Best tips for Shopify popups 

Follow these tips to create Shopify email popups that convert:

  • Structure your layout: Place your main offer in the form heading, align design elements consistently, and place trust signals near your CTA — such as a privacy policy link — to encourage action.
  • Optimize for mobile: Design for mobile first. Keep the popup condensed, ensure buttons are thumb-friendly, and maintain clear readability across all screen sizes.
  • Craft concise copy: Your message needs to hit hard and fast. Lead with a benefit-focused headline, follow with one line of supporting text, and finish with a clear call to action.
  • Create compelling calls to action: Your CTA button should instantly grab attention with bold colors and action-driven text. Replace “Submit” with powerful words like “Get My Discount” or “Unlock 20% Off.”
  • Test display triggers: Test different display triggers to find what works for your store. Try combinations of time-based delays, page scroll depth, and number of page views.
  • Target the right moments: Find the best timing for your popup discounts. Show them before cart abandonment, on high-value product pages, and when visitors view multiple collections.
  • Segment your audience: Target different offers for first-time visitors and existing customers. Customize discounts based on shopping history, cart value, and traffic source.
  • Pick the perfect position: Test between corner flyouts and centered overlays. Corner popups feel less intrusive, while centered versions can drive more urgent action.
  • Deliver on your promises: Send confirmation emails immediately after signup. Include the promised discount, showcase your best products, and start building that crucial customer relationship.

FAQs

Can you do a popup on Shopify?

Absolutely! Whether you want to collect emails, show promotions, or welcome visitors, Shopify stores can display popups through apps, the native Forms feature, or custom code implementation.

Which is the best popup app for Shopify?

Omnisend and Shopify Forms both offer powerful popup solutions. Omnisend provides more advanced features, such as targeting options and a richer drag-and-drop template editor, while Shopify Forms is great for basic popup needs.

How do I stop Shopify from popping up?

For popups built with Shopify Forms, go to Online Store > Forms, select your form, and toggle the Turn form off button. You will then get a notification that says “form deactivated.”

Where are the popup settings in Shopify?

Popup controls are inside your Shopify admin under Apps > Forms. To customize them, go to Online Store > Themes > Customize. If you’re using Omnisend, you can access settings through the Forms dashboard.

Bernard Meyer
Article by

Bernard is the Sr. Director of Communications & Creative at Omnisend, with a passion for good research, helping ecommerce businesses with their marketing automation needs, and beating absolutely everyone in Mario Kart 64.