How to create pop-up coupon boxes for Shopify

Coupon boxes come in different types and shapes. There are welcome coupons and don’t-leave-so-fast coupons. Some allow for copying a discount code to the clipboard. Others allow for applying the coupon directly to the shopping cart.

In this quick tutorial, we’ll show you how to create the most common types of coupon boxes using Getsitecontrol – a newbie-friendly popup builder for Shopify.

We’ll also include a few popup templates and provide tips for using them in your store.

Ready to get started?

Let’s dive right in.

How to create a pop-up coupon for Shopify

Before getting to the technical part, we suggest that you find the Getsitecontrol app in the Shopify App Store and add it to your website. It comes with a full-featured 14-day trial period and a detailed performance report, so you’ll be able to see if it works for you before committing to the subscription.

Once ready, follow the steps below. The entire process requires no technical knowledge and will probably take you less than half an hour.

Step 1. Select a coupon box template

If you’ve already added the app to your website, log into the Getsitecontrol dashboard and click Create widget, then proceed to the Template gallery.

In the gallery, find ‘Use cases’ and select ‘Promote coupon codes’ from the list of use cases on the right.

The gallery contains over 30 popup templates designed to promote coupons. Some of them pop up in the middle of a page (they are called ‘modal popups’); others slide in from the side.

Feel free to click around and see the templates in action. Once you find a coupon box that meets your expectations, hit ‘Take this template’ to add it to your Getsitecontrol dashboard.

In our case, it’s a coupon box that pops up from the bottom of a screen and allows for copying the code to the clipboard with a click. Let’s see how we can tweak its appearance and turn it into a welcome offer for first-time buyers.

Step 2. Change the copy

To change any piece of the text on the popup, just click it and proceed to the editor on the right. For example, we want to emphasize that this is a welcome offer valid for first-time orders only, so we’ve edited the title and description accordingly.

💡Are you promoting a limited-time offer? Then use the third text section, called ‘Note’ and let visitors know for how long it’s going to be valid. The text added to the Note section will be displayed under the action button.

Step 3. Change the image and style

Similarly to changing the text, you can change the design of the popup. For example, to replace the image, click it and select ‘Change image’. You’ll be able to fetch any product image from your store, select a stock photo from the built-in gallery, or upload a creative from your computer.

If you want to change the position of the popup, text font, color theme, or style, use the Position and Theme menus at the top.

For example, we’ve moved the coupon box to the top of the screen and switched the style from Bold to Outlined. You can also manually change the colors of the background, button, and text.

Step 4. Insert the discount code into the button

If you’re happy with the way your pop-up coupon box looks, it’s time to add the discount code to the button. Technically, there are two ways to let your customers use the coupon; we’ll describe both of them below.

Option 1. Let customers copy the code to the clipboard

Hit the button right on the template to open the button menu. Here, you can change the text on the button and apply a corresponding button-click action. In our case, it’s ‘Copy to clipboard’.

Once you select the action, paste the discount code to the corresponding field and adjust the confirmation message if you want. By default, it says ‘Copied!’ and briefly appears upon click.

And that’s it! Now, whenever a customer clicks on the button, the code you’ve inserted will be automatically copied to their clipboard.

When ready, hit Done and move on to the next step where we’ll talk about targeting settings.

Option 2. Let customers apply the discount to the cart

If you want to let customers apply the discount code to their shopping carts, instead of copying and pasting it at checkout, select ‘Apply the discount’ from the Actions menu and paste the discount code to the corresponding field. This is what it’s going to look like:

With this option, a discount code is applied to the shopping cart, regardless of whether it contains any items or not.

💡 Obviously, you should only use discount codes you’ve already created in your Shopify admin dashboard. If you don’t know how to create discount codes, read this tutorial.

Step 5. Set up audience targeting

By default, the pop-up coupon box will be displayed as soon as someone arrives at your store, regardless of the page. However, we recommend displaying it at least with a slight delay.

For example, if you’re working on a welcome offer, you can display it a few seconds after a visitor lands on a page, or when they scroll down a certain percentage of it. You can also choose to display the coupon to first-time visitors only. All of these settings are conveniently stored under the Targeting tab 👇

As an alternative to the welcome offer, you can create an exit-intent offer and use it to prevent website abandonment or even shopping cart abandonment on Shopify. In this case, use the exit-intent trigger for the ‘Start displaying widget’ control and select your shopping cart under the Display widget on menu.

There are dozens of other, more complex conditions you can use to target people with certain products in the cart or those who have spent a certain amount with you. To learn more about these targeting settings, check out this guide.

Activate your pop-up coupon box on Shopify

If you’re done setting things up, go to the top right corner and Save & close. Then follow the prompts to activate the popup in your store. As soon as it starts getting views and hits, you’ll notice it in the quick performance stats section:

In this case, the number of sales reflects the number of so-called “widget-related sales” – orders placed after a customer had clicked the action button on your coupon box. Although there are no ways to be sure why customers make their purchase decisions, this is stats help you understand how many customers responded to this particular offer or interacted with your call to action during their buyer journey.

Adding pop-up coupon boxes to Shopify is easy

Of all sales-boosting tactics you can try in ecommerce, coupons are among the easiest ones to implement. And with tools like Getsitecontrol, there’s no need to have any technical knowledge or design skills to create a coupon popup that will be perfectly aligned with the style of your store.

Go ahead and give it a try! And if you feel like going the extra mile, you can even A/B test various coupon types and offers. For example, you can compare percentage discount performance vs monetary value discount performance to see which one brings more sales.