How to add a Popup on Shopify

July 15, 2019

How To Series: UI Popup
– covering how to’s when using our popup application

Popup Introduction

Let’s start with Shopify, Shopify is an e-commerce platform for online stores and retail point-of-sale systems. Shopify creates an environment where it is easy for users without web development backgrounds to build and manage their own online store without a steep learning curve. However, Shopify relies on it’s app store to supplement additional features, outside of the basics (found here: app store).

One of of those basic starting apps is a popup app, as almost every store makes use of popups in one way or another. A popup app is a tool for implementing marketing campaigns to alert users of specific products or ongoing sales. These campaigns also will generally drive up conversions assuming that they are properly thought out. Popups are meant to convey information to the user such that it drives up the conversion rate higher than normal.

Take a look at our other blog post on when to use popups on Shopify: When to Use Popups.

Let’s Get Started

For the sake of this post, we will be building a quick guide on a how to build a popup using our own UI Popup. There are many different types of popups on app store, most of them have different features. We have analyzed each of the most popular popups to help you make your decision. Shopify Popup Comparison. Make the best choice to suite the needs of your store.

UI Popup – Step by Step Guide

1. Install the Popup

A. Go to this, read through the app details, then add the app to your store.
B. Accept the Permissions.

UI Avenue - Installing the App

C. Approve the charges.

UI Avenue Popup - Approving Charges

2. Create a New Popup ( Can be done in 1 minute )

A. Open the app on the Apps Page.
B. Add a new popup.

UI Avenue Popup - Managing Active Popups

C. Choose your template ( choose one our predefined templates )

UI Avenue Popup - Choosing a Template

D. Customize your Content
E. Customize your Styling: Optionally change the CSS attributes for your popup to style it
F. Select live dates for the period of the promotion

UI Avenue Popup - Selecting a Date

E. Select your display type (when and for who the popup should show)

3. Done

Your have just completed and made live your first popup, congratulations! We will automatically create a mobile popup version based on the information that has been entered. Also, we periodically A/B test our designs for you so that you can focus on what is important: building your brand and your company.

Our mobile popup has a simple popup bar design and can be opened to reveal more details about your promotion. It presents information unobtrusively and in a format most mobile users can understand.

UI Avenue Popup - Mobile Popup Example

4. Analyze

Analyze the performance of your pop-ups, combine it with other advertisement in the same campaigns to maximize the amount of conversions and revenue for your business. Please stay tuned for our future articles.