Discount codes

Let customers apply discount codes directly in the cart drawer, reducing friction and boosting checkout conversion.

What is the Discount Code?

The Discount Code feature allows customers to enter and apply promo codes right inside the cart drawer without needing to wait until the checkout page. This enhances the buyer experience by validating discounts early and showing applied savings in real-time.

Why to use Discount Code?

Instant Discount Feedback

Customers can apply promo codes directly and see immediate updates to their subtotal, reducing hesitation and increasing trust.

Smoother Checkout Flow

Letting users apply discounts before checkout means fewer distractions later—and fewer abandoned carts.

Brand-consistent UI

Customize placeholder text, button labels, font size, corner radius, and text styles to match your store’s look and feel.

How to set up

Go to Body > Discount codes in your Cart Editor panel to configure this feature. Here, toggle the button at the top right of the settings to enable this feature.

Step 1: Set up general information of Discount Code

Settings

• Discount title: Label that appears above the discount input box

• Button label: Text on the button that applies the code.

• Placeholder: Default text inside the input field

• Error message: Message shown if the discount is invalid (e.g., “The coupon code is invalid”).

Step 2: Customize the Display Setting

Font style Choose between Normal or Bold for the text appearance

Font size Adjust using a slider (from 8px to 24px) to best fit your UI

Corner radius Set the border radius (from 0px to 24px) for a sharper or softer field/button design