How to create pop-ups on Shopify?

Sourabh Upreti
Sourabh Upreti
February 28, 2023

Are you tired of feeling like a wallflower at a digital party? Well, it's time to let your website shine with the magic of pop-ups!

Now, you might be thinking - "But aren't pop-ups annoying?"

Sure, if they're done poorly, but when used correctly, pop-ups can be a powerful tool for engaging your customers and boosting your sales.

Add pop-ups to Shopify stores to cut to the chase and eliminate distractions that could sway your customer's attention. By being direct with your ads and leading customers generously, Shopify pop-ups can trigger an instant decision and simplify the road to conversion.

Now, you might be yearning to hear more about Shopify pop-ups, their benefits, and ways to create a pop-up in Shopify stores.

Welcome to our blog on how to create pop-ups on Shopify!

What is a Pop-up?

A pop-up is an online advertisement used in digital marketing that appears suddenly as a small window in front of the visual interface. Pop-ups can appear automatically or be triggered by user actions such as clicking a button or hovering over an element.

Pop-up ads were first seen on the Tripod.com webpage hosting site in the late 1990s. Today, they are a primary tool for businesses to display promotional content and engage with users. 

Pop-up ads also enable users to participate in surveys and polls or access special discounts and promotions.

If a pop-up seems pointless, a consumer is going to hate it. But if it has some value, chances are they won't hate it at all.

Popups can contain:

  • Clickable buttons
  • Forms
  • Text
  • Images
  • Maps
  • Videos
  • Embedded content
  • Links

Create a pop-up in Shopify-

Shopify Pop-up is a feature that allows online store owners to create customizable pop-up windows on their websites to promote products, capture email subscribers, and offer special discounts to customers.

With Shopify Pop-up, merchants can easily design, target, and schedule pop-ups to appear on their online store and engage with customers in a more personalized way, boosting sales and customer retention.

Benefits of using Pop-ups on your Shopify Store

If you want to ensure your pop-ups offer the best user experience, there are a few things to remember. First, make sure when you create a pop-up in Shopify,  the pop-up must be relevant to what the user is doing on the website - it should add value to their experience, not interrupt it. 

Timing is also crucial - wait for the user to engage with the site before showing the pop-up, do not show them instantly as soon as the viewer comes to your site instead, wait for them to be on the site for 20-30 seconds before having your pop-up appear.

When it comes to the message, keep it clear and concise, with a strong call-to-action that explains what the user will get by clicking. It's also important to match the design and branding of the pop-up to the website so users understand.

And finally, always make it easy for users to dismiss the pop-up if they're not interested. Following these tips can create pop-ups that users are more likely to appreciate and engage with.

Interested in knowing the results of such efforts!

Get ready to supercharge your business with these amazing benefits of optimizing your Shopify pop-ups!

Before we do, a word on accessibility:You should be aware that a huge number of potential customers have some form of disability. To ensure you offer them a seamless (and equal) shopping experience, you need to maks sure the pop ups don’t feature ovelry-flashy imagery. You might also want to explore using a Shopify accessibility app to cover all corners here.

Pop-ups effortlessly Gather Customer Information

Pop-ups prompt customers to fill out a form - an email signup, survey, or registration form - to collect their information, including contact details, preferences, and other relevant data points. 

Pop-ups can also use cookies or tracking mechanisms to gather customer browsing and purchase history across multiple websites, but caution must be taken to comply with data privacy regulations.

Shopify store owners can create a pop-up in Shopify and use information collected via pop-ups for lead generation and personalized targeting.

Add pop-ups to the Shopify store to collect customer email addresses, run surveys, introduce new product lines, ask for feedback, and offer exclusive discounts and promotions.

Pop-up adds extra traffic

Pop-ups are a great way to boost website traffic as they allow you to capture new leads, engage existing customers, and drive sales.

Pop-ups gain extra attention when placed strategically on pages as they cater to the visitor’s psychology by featuring a unique offer or promotion or by creating an eye-catching visual design.

Create a pop-up in Shopify using personalized deals to help businesses leverage incoming traffic and encourage potential customers to purchase. Pop-ups can create a sense of urgency and give visitors a compelling reason to take action and buy something immediately.

Add pop-ups to the Shopify store to resell products and remind customers to return to a website or sign up for a newsletter.

Pop-ups boost your newsletter subscriptions list-

Growing an email list is like growing your online brand as you build an audience of potential consumers that now trust you and are more likely to purchase from you.

Adding pop-ups to the Shopify store as a pop-up form is one of the most effective techniques for encouraging people to sign up for newsletters.

By popping up at the right moment when visitors reach the website or are about to click away without signing up, the form can grab their attention and remind them to sign up for the newsletter.

These forms are fully customizable so that you can entice users with incentives like discounts and exclusive offers. And, to make it even more appealing, you can use interactive elements like polls, surveys, and quizzes to grab the user.’

Pop-ups increase brand awareness

Pop-ups can be surprisingly engaging and a great way to increase brand awareness! 

That's because pop-ups often show up in unexpected places, like full browser windows, and offer information and content in a way that grabs users' attention. These ads are great for delivering your message and building brand recognition in a memorable and impactful way.

Keep these tips in mind to create a pop-up in Shopify that boosts brand awareness. Use behavioral targeting for personalized messages, keep your pop-ups engaging and short, and maintain a consistent timing and frequency for your campaigns.

To take your brand awareness to new heights, further add pop-ups to the Shopify store to display marketing and product messages to users, as well as highlight other important information such as product launches, upcoming events, and special offers.

Increase sales using pop-ups

Well, all you know right now is that pop-ups catch attention, spark curiosity, increase brand awareness, and build email lists - you can build a sturdy base for your business's sales to soar.

The right pop-up can incentivize potential customers who are on the fence purchase by offering extras like coupons or limited-time offers.

Exit-intent pop-ups are a great way to give customers that extra nudge to make a purchase. If a customer is about to leave your site, you can display a pop-up that offers a discount code or encourages them to consider a promotional offer.

Shopify Pop-ups upsell and cross-sell products by suggesting related items to customers based on browsing behavior. When a customer checks out an item, a pop-up can appear promoting related products, encouraging them to purchase more. 

Shopify Pop-ups are also useful for re-selling campaigns. They serve as reminders to encourage repeat visits or prompt customers to take further action based on their interest in a particular product.

How to add Shopify pop-up using an app- 

Using an app is the best way to create a popup in Shopify because it provides ease of use and is the safest option. Such apps are created specifically for Shopify pop-ups and have been tested to ensure compatibility and security. Many apps can be quickly and easily installed, customized, and managed, providing a reliable and efficient method to add pop-ups to Shopify stores. 

Best pop-up app for Shopify-

                                                                 

Source

BiteSpeed enables Shopify Owners to gain 20% revenue with WhatsApp Marketing, Chatbots & Omnichannel Support. 

                                                                   

Source

Bitspeed optimizes your Shopify store by bringing in multiple agents, routing queries to available people for faster responses, and labeling crucial chats for priority support. Automate customer support queries with chatbots and track agent performance across channels with analytics and reports.

This is how to add pop-ups to the Shopify store using BiteSpeed- 

How to set up a Visuals Pop-Up?  

To start setting it up, just go to WhatsApp->opt-in tools in the left sidebar.

                                   

To start setting it up, just go to WhatsApp->opt-in tools in the left sidebar. 

Select Visual Popup from the list of opt-in tools you see to open the editor.

Select Visual Popup from the list of opt-in tools you see to open the editor.

Customizing The Design

The first part is, setting up the design. You will be able to see the preview of the Visual Popup. Here you can customize the different states of the Visual popup - opened and completed for both mobile and web.
 Source

The first part is, setting up the design. You will be able to see the preview of the Visual Popup. Here you can customize the different states of the Visual popup - opened and completed for both mobile and web.

  • Button (shaped like a pencil) in the preview on each text portion you want to edit, and then in the editor on the left of the preview, just type in your desired text in the text boxes. The changes will reflect in the preview. You can also customize the font color and font type.
  • Choosing Layout - For the visual popup, we offer 3 different layouts, which you can select from options given in the editor.
  • Adding A Discount Code - You can add a discount code to the popup in the editor by selecting the associated discount code (created in Shopify) from the dropdown.
  • Adding An Image - To add an image, click on the edit button on the image in the preview and then in the editor on the left, select if you want to upload an image directly or using a URL.

And at last hit the “SAVE” button. 

How to set up Spin-the-Wheel Pop-Ups?

What is the spin-the-wheel popup?

Our built-in spin-the-wheel popup is the highest converting opt-in tool because it is highly engaging for a user to spin a wheel and get an incentive. It is highly recommended by our team as an exit-intent popup/welcome popup.

To start setting it up, just go to WhatsApp -> opt-in tools in the left sidebar and select Spin The Wheel from the list of opt-in tools you see to open the editor

How to set it up?

To start setting it up, just go to WhatsApp -> opt-in tools in the left sidebar.

To start setting it up, just go to WhatsApp -> opt-in tools in the left sidebar. 

Select Spin The Wheel from the list of opt-in tools you see to open the editor

Select Spin The Wheel from the list of opt-in tools you see to open the editor.

Customizing The Design-

The first part is, setting up the design. You will be able to see the preview of the Spin The Wheel popup. Here you can customize the different states of the spin the wheel popup - opened and completed for both mobile and desktop.

The first part is, setting up the design. You will be able to see the preview of the Spin The Wheel popup. Here you can customize the different states of the spin the wheel popup - opened and completed for both mobile and desktop.

  • Editing The Text - To edit the text in the popup, you just need to click on the edit button (shaped like a pencil) in the preview on each text portion you want to edit and then in the editor on the left of the preview, just type in your desired text in the text boxes. The changes will reflect in the preview. You can also customize the font color and font type.
  • Adding Your Logo - Click on the edit button on your logo in the preview and then in the editor on the left, select if you want to upload an image directly or use a URL.
  • Adding The Offers - You can add the spin the wheel offers from the editor. Add the text you want to display in the wheel and select the associated discount code (created in Shopify) from the dropdown.

And at last hit the “SAVE” button. 

How to create a popup in Shopify with code?

When you create a pop-up in Shopify with code can be a lengthy process as it involves writing custom HTML, CSS, and JavaScript code to create the Shopify pop-up window and specify its behavior. This requires some technical expertise and can take some time to get it right. 

Additionally, testing and debugging the code is important to ensure all users' pop-up appears and functions correctly.

But for those who are interested in adding a Shopify pop-up!

Here are the steps to create a popup in Shopify:

  1. Log in to your Shopify account.
  2. Go to the "Online Store" section and select "Pages".
  3. Create a new page, and remember to save the handle information for later use.
  4. Find the location in your theme layout where you want to add the clickable text for the pop-up.
  5. In the Shopify theme code editor, find where you want the clickable text to be, and paste the code below:
  1. Replace <your-page-handle> with the handle of the page you created earlier.
  2. Copy the HTML code for your pop-up and paste it into the newly created page in 
  3. the Shopify code editor. Customize the text and layout as desired.
  4. Create a new .js file called "popup" in the "Asset" folder and add the provided JavaScript code.
  5. Add the provided CSS code in your main CSS file at the end to style the pop-up and make it look visually appealing.
  6. Save all changes and preview your store to test the pop-up.

Congratulations! This is how you create a pop-up in Shopify using code.

How Can You Customize the Behavior of Your Shopify Pop-Ups?

The behavior settings let you determine when the Shopify popup is going to appear, who will see it, and where it will come up.

1. When to show:-

  • Welcome - As soon as a user lands on your website, welcome them to your brand.
  • Exit Intent - Whenever a user is abandoning the website (clicking on a cross button), a popup captures their attention. 
  • Scroll Intent - Based on how much a user has scrolled a page, show them a popup at the right time.
  • Time on page - Based on the time spent by a user on the website/page.

2. Where to show:-

  • Which device - To display the popup on both desktop and mobile or only mobile/desktop?

3. Who to show:-

  • Already Opted In - Whether to display popups to users who have already opted in or not.
  • Everyone

Conclusion- 

Well, folks, that's a wrap on our little tutorial on how to add pop-ups to the Shopify store! We hope you've had as much fun learning about these pesky little windows as we have.

From promoting sales to collecting email addresses, pop-ups are a powerful tool for any online business owner.

We showed you two ways to add pop-ups to Shopify stores: with code or with an app. If you're feeling brave and want to get your hands dirty with some coding, go for it! But if you'd rather leave the technical stuff to the experts (and who can blame you?), we highly recommend trying BiteSpeed App.

With BiteSpeed App, you can add pop-ups to Shopify stores in minutes, with no coding required. Plus, it's so easy to use that you'll wonder how you ever managed without it.

So Book A Demo Today!!

View all blogs