Promo codes serve many purposes. You could use them for promotions, in order to track which code (each of which is shared in a different channel), how much it is used and therefore which is your most profitable channel (at least for the given promotion). You could also give them away to customers who you have somehow disappointed. You can offer promo codes for other reasons as well.
Promo codes, as you probably know, serve to reduce the price. They are a mandatory part of every online store.
To avoid confusion for customers on our site, we must make an effort to ensure that the information about the promo codes is accessible and clear. If you have promo codes that you give away and are visible in the user’s account, it is good to have the information about them indicate whether they are active, expired and for which products or product categories they are valid.
1. Make the input field visible
Since the purpose of promo codes is to be used, it’s a good idea to make the input field visible. These fields are expected to be located either on the page “Cart” or on the “Checkout“. A good location for placing the promo code input field is one that will be seen as the user naturally scans the screen to find the continue button.
2. The promo code has been successfully entered
When a promo code has been successfully entered and accepted by the system, it is a good idea to notify the user. Just as I show the user input errors, it is also appropriate to show them when the operation they wanted to perform has been successfully completed.
You could either completely change the visualization of the input field, which is the recommended method, or simply put a caption under the field that says “The code has been successfully accepted.” Whatever you choose, the color should be green. The internationally accepted color for successful action.
In the examples below, you will see two options, depending on how much information you want to display. In both options shown, hiding the input field of the input field makes the design cleaner. It also shows that only one promo code can be entered. In case you allow more than one promo code to be entered, you can of course put a link that says “Add promo code”.
3. Reflect the effect of the promo code/s
Regardless of whether you accept the entry of more than one promo code, after it has been reported by the system and you have replaced the input field with a message about the accepted code, reflect its effect in the price (or whatever other effect it has, let it be visible).
It is good to indicate both the total change in the amount and the change in the price of each individual product.
4. Error? Show it.
In case the promo code has expired, been written incorrectly or is simply not recognized by the system, show this to your customer. No matter what the reason for the error is, it’s a good idea to share it with your users.
Has the code expired? Show it.
The code is not recognized by the system? This could be due to misspellings or the code not existing. Direct your users to these options.
The code is not applicable to the products in the cart? Tell the customer and direct them to the product categories in which they could choose something to get at the discounted price.
5. Removing a promo code
Sometimes a customer may decide that the discount is too small and would be better off on another order with a higher price. In such cases, it is good to allow the code to be removed, but also to use it immediately. Too many merchants do not allow re-entering promo codes on the same day. They probably think they are protecting themselves from fraud, but in reality they are only frustrating their customers. Let the user decide for themselves what to do with the promo codes you have provided them. This includes removing them from the field.
When the user removes the promo code, this should also be clearly shown – visually and textually. You could use green – because the operation was successfully completed. On the other hand, you can also use the warning yellow color to suggest to the user that they are losing the discount they would have received. The latter option is useful in case the removal was done unintentionally. Since we have no way of knowing whether the code was removed intentionally or unintentionally, we have to choose one of the two colors and stick with it.
In the example below, you see a green option.
