How to Add a Popup for Your Shopify store?

Are you having trouble getting people to buy things from your Shopify store? Perhaps you've tried every trick in the book to get the emails of your visitors, but nothing seems to be working. A popup is necessary!

When a user first visits a website, popups, which are modal display boxes, appear on their screens. They have probably been on your radar a lot.

Pop-ups can initially be unwelcome, but they are an effective marketing strategy. They can increase your sales and help you gain more subscribers if you use them properly.

In this article, we will explain why you should include popups on your store, and how to add a popup on Shopify.

What is a popup?

A pop-up is a graphical user interface (GUI) display area, usually a small window that  appears in the foreground of the visual interface unexpectedly. A single or double mouse click, or a rollover, can be used to create popups. Popups are frequently created with a voice command or a timed action. There are several varieties of popups, including full-screen, sidebar, and banner. Popups are frequently generated by websites that have JavaScript code embedded in their HTML.

How does a popup benefit your Shopify store?

Popups used to be annoying as untrustworthy websites often employed them as clickbait, which made them a nuisance. Popups used to be particularly bothersome since they interfere with the user's ability to interact with the content.

Today, practically all world-famous firms use popups to enhance sales, leads, and conversion rates on their websites. Below are some reasons why you should add popup to Shopify.

Focus on Call To Action

The most basic function of a popup is to deliver a strong call-to-action, which is exactly what you require. To entice people to buy, you may highlight your store's best-selling items or special offers.

Collect customer information

Lead generation is also an important aspect of your conversions. Typically, a variety of offers and sorts of popups will be inserted to capture users' email addresses so that you can use them to persuade people to subscribe to your newsletter and then contact them later.

Reduce cart abandonment

Popups can also be used to lower your cart abandonment rates. Some exit-intent popups can use the "pattern interrupt" technique, which is especially helpful in this situation. Customers can be influenced to give your store a second chance by stopping the shopper's intended action of leaving your site, which means you have a chance to get a sale in the end.

Increase average order value

Increasing the amount of money spent by customers in a single transaction is another really powerful popup technique. Popups can help you raise your AOV by encouraging customers to spend a minimal amount by offering incentives such as free delivery, a gift, or a discount to users who meet or exceed your minimum purchase quantity.

Know better your customer

The popup can also assist you in learning more about your visitors and their previous interactions with your brand. This is because you may use it to collect feedback throughout the checkout process, show an exit-intent popup to consumers who are about to leave your site, and many other things.

Conversion rate

A popup can easily increase conversion rates from local visitors. You can get your popups to convert effectively simply by producing distinct value, selecting the optimum moment, and delivering valuable information.

Demand attention

Websites frequently use popups to generate leads by bringing ad material to the front of the visitor's mind. That's why, if you're pushing a new white paper, e-book, or other piece of inbound-friendly premium content, a popup might be a good approach to get people's attention, enhance conversions, and generate leads.

2 ways to create a popup for your Shopify store

In this article, we will show you 2 ways to create a popup that displays any type of information you want your customers to see, such as a "Newsletter' popup, a "Size Chart' popup, and a "Quick Shop" popup.

In order to deploy this popup on your Shopify site, you'll need to know a little coding. This can be placed anywhere on your Shopify site, but you must first determine where you want it to appear in order to display the popup.

#Method 1: Create a popup in Shopify using code.

The first method is adding a popup to Shopify by using code.

Step 1: Create a New Page

We will pull the content from the page you create in order to display it inside the popup. The HTML code will make use of the page's handle. The page handle for the page we created in the example below, which is called Popup Content, is popup-content. Save the handle information for the subsequent tutorial section.

Step 2: Add The HTML Code

This is the point where you must comprehend a bit of coding and your theme layout. Finding the appropriate location for the popup is necessary because it only displays clickable text. Having a disclaimer about shipping, delays, or any other information you want your customers to click on and read is one example.

Find the location of the clickable text in your Shopify theme's code editor and paste the following code there. Don't forget to adjust the handle where necessary and the text where necessary.

<div class="popup-btn">
<!-- Change the text below to what you need it to be -->
<span>ADD WHAT YOU WANT THE CLICKABLE TEXT TO BE</span>
</div>
<div class="popup-overlay">
<div class="popup">
<!-- Put your page handle between the 'page.' and '.content' -->
{{ pages.put-your-page-handle-here.content }}
<span class="popup-close"></span>
</div>
<!-- Coded by jotting.com -->
{{ 'popup.js' | asset_url | script_tag }}
</div>

Step 4: Add The Javascript Code

Make a .js file with the name popup and create it in the Asset folder by scrolling down. Insert the following code into the newly created popup.js file.

document.querySelector(".popup-btn").addEventListener('click', function (e) {
e.stopPropagation();
document.querySelector(".popup").style.display = 'block';
}, false);
document.querySelector(".popup-btn").addEventListener('click', function () {
document.querySelector(".popup-overlay").style.display = 'block';
}, false);
document.querySelector(".popup-close").addEventListener('click', function () {
document.querySelector(".popup").style.display = 'none';
document.querySelector(".popup-overlay").style.display = 'none';
}, false);
document.querySelector("body").addEventListener('click', function () {
document.querySelector(".popup").style.display = 'none';
document.querySelector(".popup-overlay").style.display = 'none';
}, false);
document.querySelector(".popup").addEventListener('click', function (e) {
e.stopPropagation();
}, false);

Step 5: Add Code in Theme.css

Finally, open the base.css file, which is the main CSS file in this case because we are using the Dawn theme. Paste the following code there at the end of the file.

.popup {
background-color: #fff;
border-radius: 8px;
padding: 50px 30px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 3px;
position: absolute;
z-index: 25;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 450px !important;
display: none;
width: 95%;
}
@media only screen and (max-width: 767px) {
.popup {
padding: 35px 15px;
}
}
.popup-close:after {
width: 30px;
content: '╳';
position: fixed;
right: 10px;
top: 10px;
font-size: 20px;
line-height: 30px;
cursor: pointer;
}
.popup-btn {
cursor: pointer;
}
.popup-overlay {
position: fixed;
height: 100%;
width: 100% !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
display: none;
z-index: 100;
}

You're done now! For the content to appear in your popup, the last step is to add content to the page you created in the first step.

#Method 2: Create a popup in your store using apps.

The second way to create a popup in your Shopify store is by using a Shopify popup app.

In this tutorial, we will share with you how to create a popup using the Adoric Shopify app which allows you to design clever popups to increase website traffic, sales, leads, and email subscribers. You can also design customized popups to upsell your customers and bring in more money.

Follow the steps below to create a popup for your Shopify store.

Step #1: Install Adoric to Your Website

The first step is to install Adobic to your Shopify store. Go to the Shopify app store, hit the Add app button.

The installation procedure is simple and clear-cut. For the installation process to go smoothly, you must be logged into your Shopify account.

Step #2: Launch the Adoric Admin Dashboard

After you install the app on your website, the Adoric admin dashboard will open automatically. But in the case that it didn't, here's what you ought to do:

On the left pane of your Shopify admin dashboard, select the Apps tab. The list of installed apps on your website will then appear. After that, click it to start Adoric.

Then your Adoric admin dashboard will immediately open.

Step #3: Create Your First Campaign

Once your Adoric admin board appears, you should create a popup campaign by clicking the Campaigns link at the top page.

On the Campaigns page, click the  + icon to create a popup.

On the next screen, you will be prompted to select your campaign goal.

Your goals may be to encourage new users to make purchases, expand your email list, reduce cart abandonment, advertise special sales, and encourage repeat customers to make purchases from you.

Click the Start with a template link if none of those options are what you're looking for.

The next step after clicking the link to "start with a template" is to choose the popup template you want to use. In this tutorial, let's use the example below:

The design editor will start up automatically when you click on that template. You will be editing the pop-up template here.

With our drag-and-drop design editor, editing a template is simple. Simply click on the section you want to edit, then make the necessary adjustments.

For instance, click on the heading text and button color to edit them and make the following changes:

You can alter your design by taking away and adding components. Here's how to do it, for instance, if you want to add a form rather than the text and button.

Step #4: Publish Your Popup

After making all the necessary modifications to the popup template, publish the popup. That is the simplest and easiest step in creating a popup.

Simply click the Publish button in the top-right corner to publish. And with that, your Shopify store now has a popup that you successfully added.

5+ Best Shopify Popup Apps

Besides Adoric Shopify app, there are many popular Shopify apps that help store owners add popups to your store. Below are some of the best ones.

Popupsmart

You can attract website visitors and turn them into devoted customers by using Popupsmart Shopify popup builder. With straightforward tools that take into account the actions of your customers, you can create marketing automation.

It includes email sequences to attract customers and encourage them to visit your website again. To maintain your brand's voice, it provides predesigned templates and a Popup & Email editor.

Pricing: Popupsmart provides its users with a free version and 3 paid plans.

• $24/month for the BASIC plan
• $66/month for the PRO plan
• $108/month for the EXPERT plan

Quick Announcement Bar

Rating: 4.9 /5 (5308 reviews)

Quick Announcement Bar is a useful Shopify popup app for announcements, as is clear from the name.

You could, however, inform your customers by posting a display banner on your website. Visitors can view the page with just one click using the "call to action button" on the banner. So, in essence, without a developer, you can reach an infinite number of impressions. These days, that's what we're looking for. It's quick and simple.

With the Quick Announcement Bar, you can express the holiday and promotion mood to your customers, offer targeted discounts based on your business dynamics, and ultimately increase sales!

Pricing: Quick Announcement Bar offers a free plan and a PREMIUM plan with a cost of $9.99/month

Sales Pop

Rating: 4.8/ 5 (7301 reviews)

Sales The Pop Shopify popup app aids in social proof building. Additionally, it displays the shopping habits of your store. Let me explain the procedure to you.

Customers are more likely to make purchases when they are aware of what other customers are buying from your store. As a result, it offers a better experience and boosts customer engagement.

As a result, if you want a straightforward service that still increases conversions while lacking depth features. Without a doubt, it's for you!

Pricing: Sales Pop provides its users with a free plan and 3 premium packages. There is also a 7-day free trial:

• $29/month for the GROWTH 2k plan
• $79/month for the GROWTH 10k plan
• $199/month for the GROWTH 50k plan

Pop‑Up Window

Rating: 4.8/5 (847 reviews)

Would you like to inform your customers about any special sales or promotions? In such cases, Pop Up-Window may help.

This Shopify popup app offers a simple tool that you can use to increase your marketing and sales. Use either pre-made templates or original images and texts while establishing some rules for your popup.

Additionally, you can incorporate an email signup form, which will automatically add new subscribers to your MailChimp or Klaviyo list.

Pricing: Pop‑Up Window does not offer a free plan but comes with 3 premium packages, and a 7-day free trial:

• $5.95/month for the BASIC plan
• $9.95/month for the PRO plan
• $15/month for the ULTIMATE plan

Privy

Rating: 4.6/5 (24788 reviews)

With Privy, you can expand your customer base from your Shopify store and boost conversion rates.

Popups, banners, flyouts, scroll boxes, and announcement bars with exit-intent are available to increase conversions.

A sizable number of both small and large e-commerce companies use Privy. People favor this Shopify popup app because it allows them to make popups with targeting options to catch customers' attention and profit from contacts that are automatically synced to MailChimp + Klaviyo. Privy is an effective way to lower cart abandonment and boost conversions.

Pricing: Privy offers a Free Plan and 3 paid packages:

• $15/month for the STARTER plan
• $45/month for the GROWTH plan
• $70/month for the CONVERSION plan

How to Add a Popup for Your Shopify store: FAQs

Conclusion,

You can easily build an email list, share discounts, and promote new products on your Shopify store using these popup apps.

We have selected the top pop-up apps by taking into account the app store rating, the quantity of reviews, the app's key features, and other arbitrary criteria. This information should be useful to you as you choose the best app for your store.