How to create a pop-up discount coupon box for Shopify

Coupon marketing is the most efficient strategy for increasing store sales, especially if you’re trying to convert first-time visitors into buyers.

But how exactly do you offer coupons to your visitors and encourage them to purchase?

One proven tool that works well on Shopify is pop-up coupon boxes that appear on a page at the right moment. This is what they may look like:

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

In this tutorial, we’ll show you how to create a sleek, custom pop-up coupon box for Shopify, using the GSC Email Marketing, Pop ups app.

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 diving into the setup, install the app from the Shopify App Store onto your site. It comes with a free plan that allows you to publish a welcome coupon offer on your website for free.

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

Step 1. Select a template

If you’ve already added the app to your website, log into the dashboard, go to Widgets, and click Create widget. Then proceed to Premade widgets.

Review the template gallery and select a coupon popup to your taste, keeping in mind that you can fully customize it.

For this tutorial, we’ve selected a coupon box that pops up in the middle of the screen and allows for copying the discount code with a click of a button. Let’s now tweak its appearance and turn it into a welcome offer for first-time buyers.

Step 2. Change the text of the offer

To change any piece of the 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 the description of the popup accordingly.

Use the ‘Note’ text field to feature terms and details of the offer, promo duration, and eligibility. This text will be displayed under the button.

Step 3. Change the image and popup style

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

Note that the image will automatically adapt to the mobile version of your popup. Switch to the mobile preview to see what it looks like and toggle image setting controls if necessary.

Finally, if you want to change the text font, color theme, or style of the popup elements, use the Theme menu at the top.

With the Pro plan, you can also use the built-in CSS editor to fine-tune the popup appearance with more precision.

Step 4. Add the discount code to the button settings

If you’re happy with the way your Shopify 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 apply the coupon; we’ll describe both below.

Option 1. Let customers copy the code to the clipboard

Hit the button right on the template to open the button menu. Change the button text to something like “Copy discount code”, then click + Add action and select ‘Copy to clipboard’.

On the next screen, paste the actual discount code you want customers to copy upon the button click. The message “Copied!” will briefly pop up for the customers to confirm that they have copied the code successfully. You can edit this message as well.

Click OK and double-check your button settings before closing the menu. You should have two actions applied: ‘Copy to clipboard’ and ‘Close widget’. The latter action closes the popup after a customer copies the code and sees the confirmation message.

And that’s it! Now, when a customer clicks on the button, the code you’ve inserted will be automatically copied to their clipboard, and they can paste it at checkout.

When ready, hit Continue -> 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 directly to their shopping carts, instead of copying and pasting it at checkout, select ‘Apply discount’ from the Actions menu.

On the next screen, start typing the code in the ‘Discount code’ field. Since the app is integrated with Shopify, it will automatically fetch the discount codes from your store, so you just need to select the right one.

With this option, a discount code will be applied to the customer’s shopping cart, whether it contains items or not.

Step 5. Set up timing and targeting (this step contains optional, premium features)

Once you’re done with the coupon design, hit Continue → in the top right corner to move on to the Targeting tab. That’s where you can define where and when the discount offer will pop up.

For example, if you’re using GSC’s free plan, you can display it to all visitors or visitors of specific pages, as soon as they arrive at your website.

This is what the targeting settings will look like in this case. It’s a default setup, so there is no need to change anything.

With the Pro plan, you can choose to display popups under conditions. For example, with a slight delay, or to first-time visitors only👇

As an alternative to the welcome offer, you can create an exit-intent popup and use it to prevent website or shopping cart abandonment. In this case, use the exit-intent trigger for the ‘Start displaying widget’ control.

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 this guide.

Activate your discount popup on Shopify

Once setup is complete, save your changes and activate the popup in your store by following the on-screen prompts. As soon as it starts getting views and hits, you’ll see them 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 apps like GSC Email Marketing, Pop ups, 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.

If you want to go 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.

Ready to explore more templates? There is a gallery with 42 coupon popups for Shopify and you can test them without registering an account.

Use GSC to convert first-time visitors into customers, grow your email list, send promo emails, and set up email marketing workflows. If you have any questions, our customer support team is available 24/7 via a live chat.