How to create a Popup for your Shopify store
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.
How to create a popup for your Shopify store
- What is a popup?
- Benefits when using popup
- Create a popup in Shopify with code
- Create a popup on your store with apps
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.
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.
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.
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.
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.
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 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
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.
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!
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.
Change the name of the size chart link
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
Create quick shop popup
When you are in your Shopify Admin, go for the
Customize option via
Online store and
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.
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.
Auto-optimize website elements and structure in one-click.
Use Social proof to boost sales
Stunning size guide for great shopping experience
Increase customers’ shopping cart size with free shipping offer