How to add a Shopify popup to your store (3 easy methods)

Reading Time: 17 minutes

Shopify popups are essential for converting browsers into buyers. You can use either native tools or apps to create popups that capture emails, promote sales, and reduce cart abandonment — plus, you can add them to your store for free. 

Appropriate popup targeting turns these interruptions into helpful moments. Show welcome discounts to new visitors, shipping offers at checkout, or win-back deals to past customers to make them feel like natural extensions of your shopping experience.

Join us below to master popup creation, targeting, and optimization for your Shopify store.

3 methods to add Shopify popups

Want popups on your Shopify store? You’ve got three routes — apps that handle everything, Shopify’s built-in tool, or writing code yourself:

1. Third-party popup apps

To add a Shopify popup, head to the Shopify App Store and you’ll find Omnisend, Privy, OptiMonk, Justuno, Poptin, Wisepops, and about 50 other apps competing for your attention.

Most work the same way — install, pick a template, customize colors to match your brand, and publish. The fundamental differences show in triggers and targeting.

Exit-intent catches abandoning visitors, scroll percentage waits until they’re engaged, and time delays prevent annoying immediate popups. Better apps segment by location, device, or past purchases — showing different offers to first-time visitors versus returning customers.

Expect to pay $20–100 monthly for decent features. Free versions exist, but limit impressions or add watermarks.

Pros

• Professional designs and templates ready to use
• Advanced targeting and trigger options
• Built-in analytics and A/B testing
• No coding knowledge required

Cons

• Monthly subscription fees add up
• Another third-party service to manage
• Limited customization within app constraints

2. Shopify Forms app

Shopify quietly launched Forms as its answer to popup apps. You can find it in your admin under Marketing > Shopify Forms. No installation needed — it’s already there.

The templates cover basics — email signups, discount codes, and age verification. Pick one, adjust the text, and change button colors. That’s about it for customization. Your captured emails flow straight into Shopify’s customer list and are ready for email campaigns.

Missing features become obvious fast. No exit popups, no A/B tests, no “show after scrolling 50%” options. But zero cost and zero setup complexity make it perfect for testing whether popups work for your store.

Pros

• Completely free with Shopify
• Direct integration with Shopify
• Simple setup in minutes
• No external accounts needed

Cons

• Basic templates only
• No advanced triggers or targeting
• Limited design customization
• No performance analytics

3. Custom code implementation

Open your theme editor, create a new snippet called popup.liquid, and start coding. You control every pixel, every animation, every condition for display.

JavaScript handles the logic — localStorage tracks if someone already saw your Shopify email popup, setTimeout controls delays, and event listeners watch for exit intent.

CSS positions everything and adds transitions. Liquid pulls in dynamic content like product names or customer tags.

The learning curve is significant if you’re not already comfortable with code. One misplaced bracket breaks your entire store. Plus, you’re debugging across browsers, fixing mobile layouts, and updating everything when Shopify changes its architecture.

But you’ll never pay app fees or hit feature walls. Your popup does what you program it to do.

Pros

• Complete control over design and functionality
• No recurring fees
• Integrate with any system
• Build unique features that apps don’t offer

Cons

• Requires coding knowledge
• Time-intensive to build and maintain
• You handle all debugging
• Risk of breaking your store

Method 1: Adding popups with Omnisend

Omnisend’s form builder creates popups, embedded forms, flyouts, and landing pages from the same interface. You’ll find templates for email collection, SMS capture, cart abandonment prevention, and product recommendations.

Popular popup types include:

• Wheel of Fortune gamified popups — Visitors spin for discounts and are rewarded for participation, such as in this example:

• Multi-step forms — Ask “Save on your purchase” first, then collect emails after the micro-yes, like this:

Step 1

Step 2

• Teaser forms — Subtle tabs at screen edges that expand when clicked
• Birthday collectors — Gather dates for automated gift campaigns year-round
• Preference surveys — Quick questions like “Shop men’s or women’s?” for instant segmentation

Triggering options range from exit-intent (tracking mouse movements toward close buttons) to scroll percentage and time delays. You control when popups appear — after 30 seconds browsing, halfway down product pages, or when carts hit $50.

Omnisend’s Shopify certification brings one-click installation and automatic discount code generation — no duplicate codes on coupon sites, no manual imports.

Form submissions flow directly into email workflows, triggering a welcome series based on which popup visitors completed.

Here’s how to add popups on Shopify with Omnisend:

Note: If you’d rather watch a video than read our tutorial, here’s our walkthrough guide:

1. Access the form builder

Navigate to Forms > Create form > Style > Popup in your Omnisend dashboard. 

Pick a template from the Forms library — you’ll see options for Shopify newsletter popups for signups, promotional offers, gamification wheels, and seasonal designs:

Here’s a screenshot of Omnisend’s template library:

Clicking a template opens the Form Builder interface.

2. Customize the design layout

Click Theme settings to control your popup’s appearance. You can find Theme settings in the top right sidebar below the Enable form button:

Under Form layout, set the form width (300–1000px default range), choose image placement (left, right, top, or background), and adjust padding. 

The Fields section lets you customize input shapes, while Buttons controls global button styling — border styles, corner rounding, and colors.

3. Build your form content

Drag items from the left sidebar onto your form. Available blocks include:

• Email field — Add placeholder text, make required, customize error messages
• Phone field — Select default country, shows as flag + country code
• Legal block — Required for GDPR/TCPA compliance with privacy policy links
• Images — JPG, PNG, or GIF formats under 2000px dimensions
• Dropdown — Collect gender, country, or custom properties

Here’s an image showing all available Items:

Click any block to access its settings — adjust text, styling, and field requirements.

4. Configure display triggers

Open the Behavior tab, located next to Theme settings, to set display rules:

• Page visits — Set the number of pages viewed before the popup appears
• Time on page — Delay in seconds before showing
• Scroll depth — Percentage of page scrolled
• Exit intent — Triggers on rapid upward scrolling (works on all devices)

Multiple rules connect with OR logic — the popup shows when any single condition is met.

5. Target specific audiences

The Targeting section in the Behavior tab controls who sees your popup and where it appears:

Visitor targeting options:

• All visitors — Show to everyone
• Don’t show to existing contacts — Target new visitors only
• Show to existing contacts — Display exclusive offers to subscribers
• Target by specific segment — Include or exclude custom segments

Page targeting options:

• Appears on URL — Display on specific pages or UTM parameters
• Does not appear on URL — Exclude certain pages
• Appears on out-of-stock product pages — Special trigger for inventory

Note: Page targeting uses AND logic, meaning all URL conditions must match for the popup to display.

6. Set reappearance frequency

In Frequency settings, choose intervals:

• Seconds
• Minutes
• Hours
• Days

If disabled, the form always appears to visitors. Enable frequency limits to avoid overwhelming store visitors and reducing the quality of your user experience.

7. Create success messages

Click Success in the bottom menu. Edit the success message like the main form — add text, images, buttons, or promotional content. Here’s an example:

Use the Subscribed section to create a separate message for returning subscribers who are already on your list. For instance:

8. Enable A/B testing (optional)

Toggle A/B test in Behavior settings to experiment with different popup versions. Clicking A/B test will load this page:

It’s best practice to test variations of content, timing, or design to optimize performance.

9. Preview and activate

Use Undo/Redo buttons (unlimited steps until page reload) to refine your design. Click Enable to make the popup live immediately or Save & Close to save as a draft — access saved forms through the Forms dashboard to monitor performance metrics:

Method 2: Adding popups with Shopify’s native Forms app

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.

The benefit of using Shopify Forms is that it’s completely free, with no external accounts or APIs necessary. Additionally, you don’t need to leave your Shopify admin panel to create popups.

Follow these step-by-step instructions to use Shopify’s native popups:

1. Install the Forms app and enable popup display

First, let’s access Shopify Forms:

• From your Shopify admin, go to Settings > Apps
• Click Forms to open the Forms dashboard:

• Familiarize yourself with the Forms dashboard — it lists your forms, provides a status, and displays analytics, such as views and submissions

Next, enable popup display on your store:

• Navigate to Online Store > Themes:

• Find your active theme and click Customize
• Click the App embeds icon in the theme editor sidebar:

• Toggle Forms to activate it
• Click Save

Without activating the Forms theme app embed, your popups won’t display even after creation.

2. Create your popup form

From the Forms app:

• Click Create form
• Select Popup form (not Inline form):

• Enter a form name (e.g., “Newsletter Signup” or “10% Off Welcome”)
• Click Create

Note: Your form opens in the editor with Active status by default — it will display immediately based on your settings.

3. Configure form display mode

You will now see this dashboard:

Choose between two display options:

• Floating — Form appears as a corner popup with an optional teaser
• Overlay — Form displays centered with a darkened background

For floating forms, select the position (bottom-left, bottom-right, etc.). Overlay forms always appear centered.

4. Design your popup appearance

The Styling box provides multiple settings for form customization, as shown below:

Additionally, you can edit your popup image and teaser.

Styling settings:

• Colors — Set background, text, field, button, and error message colors
• Form fields — Choose white or transparent backgrounds
• Typography — Select fonts for title and body text from available options

Image settings (optional):

• Background image — Full popup background with opacity control
• Image left/right — Side placement beside form fields
• Scale options — Control how images fit within the popup

Teaser settings (floating forms only):

• Show options — Display before form, after close, or never
• Position — Corner placement with optional rotation
• Title — Short text to attract clicks

5. Set display triggers and targeting

Shopify Forms lets you choose on which devices and pages to show your popup, plus set triggers to display on different page views:

Trigger options:

• Page view count — Show on 1st, 2nd, or 3rd page view
• Time delay — Immediately or after specified seconds
• Exit intent — When the cursor moves toward the address bar (desktop only)

Visibility settings:

• Devices — All devices, desktop only, or mobile only
• Pages — All pages or specific types (product, collection, etc.)

Note: Shopify Forms cannot target specific URLs or exclude certain pages, like checkout.

6. Add form fields

Use the editor to customize fields:

• Email field (required by default)
• Additional fields like name, phone, or custom questions
• Privacy consent checkboxes for compliance
• Success message after submission

To create announcement popups without email collection, remove all form fields and add only text/images with a button.

7. Save and monitor

Click Save to activate your popup:

New forms are automatically set to Active status and begin displaying based on your configured rules. Monitor performance in the Forms app dashboard — you can view submission counts and manage multiple forms from one location.

Method 3: 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.

Use manual code when you need unique popup behaviors that apps can’t provide — custom animations, specific JavaScript triggers, integration with proprietary systems, or complete control over popup timing and styling.

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

Note: Adding a popup to your Shopify store with manual code works with any Shopify theme by editing the theme files. You should always test the code in a preview before publishing it live to ensure it functions as intended.

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:

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. 

The API tracks consent with browser cookies, stores preferences (analytics, marketing, preferences) using setTrackingConsent() methods, and automatically blocks or allows Shopify pixels, audiences, and third-party scripts based on visitor choices and regional privacy laws.

Popular types of Shopify popups

Popups can serve different goals in your customer journey, such as increasing signups, promoting new products, and testing different offers.

Here are the most effective popup types for your Shopify store:

• Welcome popups — The classic “Hey, new here?” greeting with a 10–15% discount dangled in exchange for an email address
• Exit-intent popups — Last-ditch rescue missions for when cursors drift toward the X button, throwing out free shipping or bonus discounts
• Newsletter signup popups — No bribes here — “Join our list for insider access” appeals to brand loyalists who want your emails
• Spin-to-win gamified popups — Digital slot machines where everyone wins something, tapping into the same psychology that keeps people at casino wheels
• Cart abandonment popups — “Leaving so soon?” interventions that catch shoppers with one foot out the door, usually sweetened with shipping deals
• Upsell/cross-sell popups — “People also bought” suggestions that pop when carts hit certain thresholds or specific products land in the basket
• Countdown timer popups — Ticking clocks that manufacture urgency for flash sales, product drops, or “ending tonight” promotions
• Back-in-stock popups — Waitlist builders for sold-out items, turning FOMO into future sales when inventory returns
• Survey popups — One-click preference collectors asking “Shop men’s or women’s?” to segment visitors
• Announcement popups — Banner-style notices for shipping delays, holiday hours, new collection launches, or anything else that’s new

How to create a discount code popup on Shopify

Discount popups remain the most popular way for top Shopify stores to grow email lists — visitors trade their email for immediate savings. Here’s how to set up yours:

1. Generate your discount code in Shopify

Before building any popup, create the actual discount:

• Navigate to Discounts in your Shopify admin
• Click Create discount > Select discount type
• Enter a unique code, such as “FIRSTORDER” or “20OFF”:

• Set the discount type (percentage or fixed amount)
• Choose Specific customers and select Customer gets discount for signing up
• Save the discount code

Keep this code handy — you’ll add it to your popup’s success message.

2. Build your discount popup

It’s best practice to create a discount popup that requests an email address, so that you can target customers with additional messages. However, you could also make a popup without any data capture fields if sales are your only goal.

The steps are similar:

Using Omnisend:

• Select a multi-step popup template from the popup library
• Edit the headline to specify the offer (“Get 10% off your first order”)
• Keep the form simple — just an email field and a subscribe button for the first step, and the discount code for the second step, or make the first step a yes or no, like this:

Using Shopify Forms:

• Create a new popup form
• Add headline text promising the discount
• Include only the email field to minimize friction
• Note: You’ll use one static code for all subscribers

3. Configure the success experience

Two ways to deliver the discount code:

Immediate display (recommended):

• Edit the success message to show: “Thanks! Use code WELCOME10 for 10% off”
• Add a “Shop Now” button linking to your collections
• Include copy-to-clipboard functionality if your app supports it

Email delivery:

• Set up an automated welcome email containing the code
• Adds an extra step but ensures subscribers check their inbox
• Better for building long-term engagement

4. Set display rules

Optimize when your discount popup appears:

• New visitors only — Exclude existing customers who already received discounts
• Time delay — Wait five to 10 seconds so visitors see your products first
• Exit intent — Catch abandoning visitors with the discount as a last resort
• Frequency cap — Show once per week to avoid annoying return visitors

5. Test before going live

Run through the whole experience:

1. Visit your store in incognito mode
2. Wait for the popup trigger
3. Submit a test email address
4. Verify the code displays correctly
5. Test the discount at checkout

Targeting Shopify popups

Without targeting, you’ll show the same generic popup to everyone — returning customers see “new visitor” discounts, browsers get bombarded immediately, and conversion rates struggle to tick over a few percent.

Proper targeting creates relevant experiences that feel natural and pleasant for your customers. Additionally, you can test different segments (new vs. returning), timing (immediate vs. delayed), and contexts (homepage vs. product pages) to find what converts best.

In Omnisend, building a Shopify popup is just the first step. Your highest conversion rates will happen when you match popup content to visitor intent.

Here’s how to target your popups via 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

Here’s an image showing all visitor targeting options:

These allow 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 by navigating to Behavior > Display. Here are some of the options available to you:

• 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
• Exit intent: Your popup will display when visitors are about to leave

Geo-targeting Shopify popups

Omnisend lets you target popups by segment, so if you have segments that group customers by their location, your popups can show only for these customers. Here’s how:

• Navigate to Behavior > Targeting in your form builder
• Under Visitor targeting options, select Target by specific segment
• Use the checkboxes to select Include or Exclude Segments
• Search for segments and add them to your popup’s targeting conditions

Combining targeting for precision

Layer these targeting methods for surgical precision. Real examples:

• Show a 15% welcome discount to new visitors on their second page view, but only on product pages
• Display a free shipping reminder to existing customers when their cart exceeds $50
• Trigger win-back popups for past purchasers who haven’t bought in 60 days, exclusively via email campaign UTM parameters
• Present product recommendation quizzes to visitors who’ve browsed more than five items without adding to cart

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. Then, 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.
• Pick eye-catching images: Use product lifestyle shots over bland stock photos. Compress images under 200KB for fast loading, but maintain sharpness on retina displays.
• 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.
• Run A/B tests constantly: Split test everything — headlines (“15% off” vs. “Free shipping”), button colors, form fields, and images. Let data guide decisions, not assumptions about what converts.
• 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.
• Try multiple popup apps: Test two to three different apps before committing. Each has unique features — some are fantastic at targeting, others at design. Find what fits your needs and budget.

FAQs