The Order Summary is the section where shoppers see their cart items — each product displayed as a card with name, variant, price, and quantity controls. Getting this section right ensures your product presentation feels polished and on-brand.

A well-structured order summary reduces second-guessing at the cart stage — shoppers who can clearly see what they're getting and what they're saving are significantly less likely to remove items or abandon before checkout. The offer badge alone drives 30–40% more engagement with discounted items when it's styled with high contrast.

→ Open Flo Cart Core Setup

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

— Background: The background colour of each product card.

— Border: The colour of the card border.

— Offer badge: The background colour of the discount badge shown on product images (e.g., "20% OFF"). Use a colour that contrasts strongly with your card background so the badge is immediately visible.

— Text: The colour of product name, variant, and price text within the card.

— Quantity Editor — Background and Text: Controls the look of the +/– quantity control. The background applies to the counter area; the text colour applies to the quantity number and icons.

— Card radius: Controls how rounded the corners of each product card are. Match this to your Primary Button border radius for visual consistency across the cart.

— Card border: Sets the thickness of the card border in pixels. Use the "All Sides" dropdown to apply the border selectively (all sides, top only, bottom only, etc.).

Click Save after making your changes.

Use a high-contrast offer badge colour. Yellow, red, or orange on a white or light card background — or white on a dark card — makes the discount badge pop immediately. High-visibility offer badges increase engagement with discounted products by 30–40% compared to low-contrast alternatives. Don't use a badge colour close to your card background.

Don't neglect the quantity editor. The +/– control is tapped frequently — and low contrast between the editor and the card background is a source of real frustration. If shoppers have to squint to find the minus button, you're creating friction right at the point where they might be reconsidering the item. Make it obvious.

Keep card background distinct from page background. If your card and the surrounding page are the same colour, the cart looks flat and unstructured. A subtle difference (even 5–10% brightness) creates visual separation and makes the layout scannable.

Match card radius to your checkout button. Consistent corner rounding across the cart (product cards, upsell cards, discount card, and checkout button) is one of the clearest signals that a cart has been intentionally designed. Inconsistency here reads as a rushed setup.

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

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