Home > Shopify Tutorials > Create a Popup for your Shopify store

How to create a Popup for your Shopify store

Last updated: September 01, 2024
Written and researched by experts at AvadaLearn more about our methodology

By Sam Nguyen

CEO Avada Commerce

For the past several years, Shopify popups have been a standard for stores when they try to use the platform to grow the email list, reduce cart abandonment, deliver coupon codes, free gifts or offer customer support, among other benefits and so on. In the marketing field, people consider popups as an effective part of your Shopify marketing playbook.

However, sometimes some users can consider popups to be annoying and might turn popups off right from the moment they see them. Practically speaking, consumers don’t hate popups, they just hate bad popups. It means that as long as you use them strategically, things will work in your store.

So in this time article, I will show you the detailed tutorial of creating a popup for your Shopify store and some useful information while working with it.

What is a popup?

A popup is usually known as a graphical user interface display area. Normally, it is formed as a small window, which unexpectedly pops up (appears) in the foreground of the visual interface. You can create popups through a single or double mouse click or rollover. Also, voice command or timed action is usually used to create popups. In the background window or the interface, a popup window must be smaller than it. If you can not meet that requirement, pick a replacement interface instead.

create a popup for your Shopify store

Benefits when using popup

There is a report from Nielsen Norman Group that modal ads when appearing on top of a site’s content when you go to the site is usually closed before you can interact with the site content. However, it’s not true to say that consumers hate popups, they only hate bad popups. So that’s why the information below will tell you clearly about why popups are still being favored by many companies.

create a popup for your Shopify store

Collect customer information

When the visitor first visits your website, they will not probably purchase something immediately, so it is necessary for you to capture their email address. Normally, there will be a number of offers and types of popups embedded to collect users’ email addresses so that you can utilize it to convince people to subscribe to your newsletter and them contact them afterward.

Reduce cart abandonment

Additionally, popups are also taken advantage of reducing your cart abandonment rates. There are some exit-intent popups able to take the “pattern interrupt” technique, which is particularly useful in this case. By interrupting the shopper’s intended action of leaving your site, customers can be influenced to be more willing to give your store a second chance, which means you have the opportunity to get a purchase ultimately.

create a popup for your Shopify store

Increase average order value

Even more, increasing the amount of money in a single transaction, which is spent by customers, is also an incredibly effective method from popups. When it comes to popups, it will help you increase your AOV by getting customers to spend a minimum amount by offering incentives like free shipping, a free gift, or a coupon to users that meet or surpass your minimum order amount.

There are other effective ways of getting your customers to spend more money, which is cross-selling and upselling as well. When it comes to popups, it will show the items that provide additional value to the specific customer in question so that you can increase your average order value from customers.

Know better your customer

What is more, the popup is also useful in helping you to learn more about your visitors, as well as their experience thus far with your brand. This is because you can use it to collect feedback during the checkout process or utilize an exit-intent popup on customers who are abandoning your site to be made aware of their actions and many more.

Conversion rate

As popup is added, a “get direction” so that it can simply enhance the conversion rates from the local visitors. Just by creating unique value, determining the best time, and providing useful information, you can get your popups to convert in an effective way.

Demand attention

Popup is often employed by websites for lead generation by pushing ad content to the forefront of a visitor’s attention. That is why if you’re promoting a new white paper, e-book, or another piece of inbound-friendly premium content, a popup may be a successful way to draw attention to it, increase conversions, and boost lead generation as well.

Focus on Call To Action

Because popup can be set to only focus on one message, at the same time, there are so many different messages on your site; then popups is an ideal choice to provide you space to focus on one call to action and help your visitors to easily be able to find the call to action button as well.

create a popup for your Shopify store

Create a popup in Shopify with code

Until now, when you are in this section, I believe that you have decided to go get a website a popup. There are three options for you to choose while creating a popup, which is enabling the ‘Newsletter’ popup, ‘Size Chart’ popup, and ‘Quick Shop’. Go to the tutorial below to get a brief knowledge of how to set up each of these popups in the theme’s built-in settings.

Create newsletter popup

First of all, from your Shopify Admin, navigate to the Online store, go for Themes and choose the Customize button.

You will see under the Theme settings, there will be the option to enable Popup. After that, you will be able to insert the custom content to the newsletter that you choose to show up, which encourages your shop’s visitors to subscribe to your newsletter.

create a popup for your Shopify store

create a popup for your Shopify store

You might need to keep in mind some of these available options below while adding popups:

  • Heading & Text Block
  • Ability to add an Image
  • Newsletter form & option to add first/last name fields
  • Ability to link up the popup content
  • Choose whether or not you’d like the popup to show on mobile
  • Popup delay & popup frequency

Create a size chart popup

Create a Size Chart

Of course, you will need a size chart to use in your shop by navigating to Online Store > Pages > “Add a Page”. From here, you can have the options for your text and/or images, and commonly some kind of grid or table to present sizing information. You should concern for some of adjusting options, which are presented below.

Note: You can use Size Chart app to create size chart with easy!

create a popup for your Shopify store

Use a single size chart for all products

To get a different size chart from your product page, firstly, navigate to your Customize theme area by choosing Online Store > Themes > Customize > Theme settings > Product grid.

Then, you need to choose the page that you’ve just created for your size chart. Finally, your “Size chart” link will be added to every product page of your online store.

Use different size charts for different products

In case you have different size charts for different items, you can specify which ones to use by navigating to your Size Chart Page and take note of the handle for that page:

Repeat this step for every size chart and every product you have, that you want to use a specific size chart with.

Finally, make sure you have your Size chart set to None in the Customize theme area. You can achieve this action by going to your Online Store, choose for Themes > Customize > Theme settings > Product grid > Size chart and clear all the content to ensure that nothing is selected.

In order to do this, navigate to the theme’s language settings from your Online Store, and then Actions > Edit Language. From the Product tab, you will see the text field for the Size chart when you scroll down. Just enter your preferred text there, hit the Save button.

Create quick shop popup

When you are in your Shopify Admin, go for the Customize option via Online store and Themes.

After that, from the Theme settings, choose Product Grid > Enable Quick Shop.

So now, you have enabled the Quick Shop for your products, which allows your customers to easily and quickly add a product to their cart without having to leave the page.

Create a popup on your store with apps

With the help of popup apps, everything will be easier for you while creating a popup. There are hundreds of the Popup apps available to support you creating on your store in the review list, which were picked manually by AVADA Commerce experts. Go for it, and find your suitable ones.

create a popup for your Shopify store

Conclusion

On the whole, in this section, you will find the effective use of popups in your Shopify store, which is a powerful marketing tool. Even though there are many consumers’ that have a negative reaction when seeing a popup is as it can be annoyed or frustrating, but that was the case of bad popups.

When it comes to a powerful and professional-looking popup for your website, this will help you build your newsletter and mailing list, and even notify visitors about special sales or promotions for your Shopify store. Then popup can become a must-have item for any store owner that wants an affordable and easy-to-use tool to help increase your marketing and sales.

I hope this how to create a popup for your Shopify store article has helped you a lot in designing your popups, and the way they appear to your target audience, which causes less of an annoyance, and more as a pleasant surprise.

If there is any trouble occurring while practicing, please feel free to contact us via the comments below. AVADA is always here to help you.

Related Posts:


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.