Drive sales on autopilot with ecommerce-focused features
See FeaturesA 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.
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:
- 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.
- 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.
- 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.

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.

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.

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

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.

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.

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

- 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

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.

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

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

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

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:

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()”>×</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:
- From your Shopify admin, navigate to Online Store
- Click on Themes
- Click Customize
- Click the three dots at the top of the editor and select Edit code
- Under the Sections directory, click Add a new section
- Name it custom-HTML
- Click Done
After adding this code:
- Go to your theme.liquid file
- Add this line where you want the popup to appear (typically just before the closing </body> tag): {% section ‘custom-HTML’ %}
- Click Save
You can then preview your store. Here’s how our form looks:

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.

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

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
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.
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.
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.”
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.
TABLE OF CONTENTS
No fluff, no spam, no corporate filler. Just a friendly letter, twice a month.