How to create pop-up discount coupon 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 discount 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 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 in to the Getsitecontrol dashboard and click + Create widget, then proceed to ‘Design ideas’.

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

The gallery contains about 40 popup templates designed to promote coupons. Some of them pop up in the middle of a page (they’re 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 the 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 text on the popup, just click on 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 ‘Note’ section (third text field) to let visitors know for how long it’s going to be valid. The text added to the Note section will appear 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 on it and hit Change image. You’ll be able to fetch any product image from your store (A), select a stock photo or GIF from the built-in gallery (B), or upload a creative from your computer (C):

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 changed the background color. You can also change the color of the primary button and text.

Step 4. Add the discount code to the button settings

When you’re happy with the way your pop-up coupon box looks, it’s time to add the discount code to the button. 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

Click the button on the preview to open the button settings. Here, you can change the text on the button and set a button-click action. In our case, it’s ‘Copy to clipboard’.

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

Depending on the template you’ve chosen in the beginning, this action may be already set by default. In that case, you’ll only need to edit the coupon code and button text.

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

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

Option 2. Let customers apply the discount to their order

If you want to let customers apply the discount code to their order, instead of copying and pasting it at checkout, select ‘Apply 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 order at checkout.

❗ 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, your pop-up discount coupon will be displayed in your Shopify store as soon as someone arrives at your wesbite, 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 discount popup on Shopify

If you’re done setting things up, go to the top right corner and click 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:

This is a high-level performance report showing how many of those who've seen the pop-up coupon have interacted with it. If you want to see more details, click through any of the metrics and proceed to the Statistics report.

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.