I'm creating a shopping cart with the option to use a Coupon for discounts, but some doubts came to my mind. I was reading a study case where the web site had problems with users leaving the page on the checkout process to look for a Coupon, and the order was never finished.

So where should I put my Coupon box? During item selections (img 01) or during checkout (img 02)? Or what other solution/method should I use?

Img 01

enter image description here

Img 02

enter image description here

As far as I know, both situations may have the same issue, since users can leave the page at any moment to look for a new Coupon.

Partial solution (?)

As a complementary design to this I was thinking about using a helper to tell users 'How to get a Coupon?'. Since we only provide Coupons via birthdate, amount of purchases (ex.: after 10 purchases you win 50%) and Facebook promotions, for example. So, after clicking on the ? icon, a dialog box shows up explaning how to get a Coupon.

enter image description here

  • As one of those guys who sometimes leave, I'd advise you to place easily findable, cheap (for you) coupons somewhere. ~10% off coupons are sometimes easy to find and can save me a lot of money - when I leave, I usually found a better alternative while searching for coupons.
    – Sebb
    Jul 21, 2016 at 13:21
  • @Sebb this is exactly what I'm trying to avoid. I know it's hard, but this is why I was planning on show users how to obtain a coupon within my own web page, this way he knows how to get discounts. As a user who leave sometimes, what do you think about this? Jul 21, 2016 at 13:36
  • (1/2) I'm not representative here, but to me that question mark looks like you would inform me what coupons are, so I wouldn't click on it. You could either place a text there like "Coupons can only be obtained by promotions or regular buyers", but this would probably increase the chance of people searching for coupons. Or you could have a page dedicated on how to obtain coupons for your site and try to SEO it a the top when some searches "[your shop] coupons".
    – Sebb
    Jul 21, 2016 at 14:01
  • (2/2) Lastly, I'd place the coupon code box in the shopping card - it's easy to find if you have a coupon, but at the order summary it would really stick out and remind me that maybe I could have it cheaper.
    – Sebb
    Jul 21, 2016 at 14:02

2 Answers 2


I think no matter where you place the coupon box, you're going to have some level of checkout abandonment by users looking for codes.

Option 1: Adjust the terminology

You could consider changing the term from Coupon (which sounds like something you can quickly Google to obtain) to Gift Code, Gift Card, or maybe even Promotional Code, which I think all sound more unique to the user. Amazon uses the latter two on the last step of their checkout (They also hide the input until you click on the "Have a gift card/promotional code?" link, which may be a method for qualifying people that have codes).

Maybe it would be good to change the question mark to something more enticing/relatable for users that don't have codes. What about "Don't have a code yet?". It would make it sound like you'll provide them with instructions on how to obtain a code, instead of instructions on what a coupon code is or how to use one.

Option 2: Don't use coupon codes at all

You can use query parameters or a specific route to pass the code into the page through the URL and apply the discount automatically. You could even cookie the user to save it so the discount is applied even if they leave the page and come back. I think this solution is best because it gets the job done with minimal friction for the conversion flow.

  • The second option for me isn't possible. It's an e-commerce based on multiple store, so there is a lot of verifications.. But the general idea is greate and I can use some things. The first option is easier to work with and, since I don't have much type of coupon, I think it fits better! Jul 20, 2016 at 0:58

I would stick with putting the coupon code as it is in image 1. This allows the user to add or remove items from the shopping cart while seeing their total after the discounts. Users will want to see their final total/subtotal before clicking checkout, so that they are certain the coupon has had its effect. If they see the total after the coupon, they may be inclined to add an item. But if we use the layout in image 2, they will have to go back to the item selection.

Placing the coupon code entry box after item selection will force the user to figure out their total with the coupon themselves, before clicking checkout.

Finally, if something goes wrong with the coupon, this could affect the users purchase. If, for some reason, their coupon is no longer valid, they may make a smaller purchase, and in image 2 this means they would have to go back and remove some items.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.