Entering a promo code 🏷️

A reward for a user to earn a discount on their purchase, promo codes are a pre-requisite in any e-commerce website.

‍To avoid a confused customer, make sure they understand what is happening with their code - whether it works, expired or isn't applicable.

• Make promo code input field visible

  The cart or checkout are pages expected to have a promo code field. It should be in a place that can be seen when scanning towards the button to continue.

• Promo code applied successfully

  The change can be reflected using your success state colors (likely green) to indicate the code was applied.

  In the example is two different options, divided by how much information you want to show. For both, hiding the input field altogether makes it clear only one code can be entered.

• Reflect promo code effects

  This can be shown with the promo code entry as a total amount, or be represented on In item-to-item basis.

  It's important to also show or at least repeat the discount near the total at checkout.

• Promo code error

  The promo code may not be applicable, or entered incorrectly.

• Remove promo code

  In some cases, a user might not like the discount offered and prefer the original sale price of an item. Or, they found a better promo code to use.