The Discounts section is where shoppers enter coupon codes and see their savings applied. A well-styled discount area builds trust and makes the savings feel real — sloppy styling here can make shoppers second-guess whether their code actually worked. Carts with a clearly visible, well-styled discounts section see 15–20% higher coupon redemption, and shoppers who successfully apply a code are substantially more likely to complete their order — a coupon applied is a commitment made.

→ Open Flo Cart Core Setup

Go to Flo Cart → Core Setup and click on Discounts in the right panel to expand its settings.

— Display coupon as: Choose how the coupon entry appears to shoppers. Input field shows a text box where shoppers type their code.

— Input — Background, Border, Primary: Controls the look of the coupon code text field. Background is the field fill, Border is the outline, and Primary is the accent colour used for active/focus states.

— Button — Background and Text: The colour of the apply button next to the coupon input.

— Total Savings — Primary, Info, Background: Styles the savings summary shown after a code is applied (e.g., "₹250 saved with discounts"). Primary is the main text colour, Info is the secondary/label colour, and Background is the pill or card behind the savings display.

— Card radius and Card border: Control the rounded corners and border width of the discount card. Use the "All Sides" dropdown to apply the border selectively.

You can also click Customise Coupon page? at the bottom of this section to style the dedicated coupons page separately.

Click Save after making your changes.

Make the savings confirmation unmissable. Once a shopper applies a coupon, they need to feel certain it worked. Style the "₹250 saved with discounts" callout in your brand's accent colour — never in grey or the same tone as body text. Shoppers who clearly see their discount applied are 22% less likely to abandon at checkout. Doubt here is expensive.

The apply button should look like a button. A common mistake is styling the apply button to blend into the input field — same colour, similar weight. It should be obviously tappable: contrasting background, legible label. A button that shoppers aren't sure is a button creates hesitation right at the point where they're trying to get their discount.

Use a light, open input field. The coupon input should look inviting — light background, clearly defined border, generous internal padding. An input that looks cramped or dark can subconsciously deter code entry, especially on mobile where shoppers are already doing extra typing.

If you run many promotions, surface the coupon page. The input field works well when shoppers already have a code. If you frequently run multiple offers, link shoppers to the dedicated coupon page — it reduces the frustration of trying codes and increases the chance they find and apply something relevant.

→ How to Create a Discount based on Cart Value

→ How to Customise Your Flo Cart — full cart customisation overview

Need help? Reach out to us at support@shopflo.com