To set up discount codes in Webflow Ecommerce, you navigate to the discounts tab in your e-commerce panel to create percentage, fixed-amount, or free-shipping codes. However, these promotions only apply to one-time products and are completely excluded from subscription items, which is a critical platform limitation. In my 8+ years of Webflow development and 450+ successful projects, understanding these pricing rules is vital to avoiding customer frustration during promotions.
Discounts and promotional codes are powerful tools for driving retail sales. Whether you are running a seasonal campaign like Black Friday, offering a welcome discount to new email subscribers, or providing influencer codes, you need a checkout system that applies these rules accurately. While Webflow provides a straightforward interface to build these codes, the system has strict behavioral rules that differ significantly from platforms like Shopify. I will break down the options available to you, how to configure them without causing errors, and the main gotchas you must avoid.
Types of discount codes you can create
Webflow Ecommerce supports three primary types of discount codes. Each type serves a different promotional strategy and can be customized to fit your campaign needs.
First, you can create percentage discounts, such as "15% off your entire order." This is the most common promotional type and is highly effective for sitewide sales. You can apply the percentage reduction to the entire order subtotal or limit it to specific products or categories.
Second, you can set fixed amount discounts, such as "$10 off your purchase." This works well for driving order value, especially when combined with a minimum order requirement. For example, you can offer "$10 off when you spend $50 or more," which encourages customers to add more items to their cart to qualify for the savings.
Third, you can offer free shipping promotions. This type of discount eliminates the shipping charge at checkout, which is a highly effective way to reduce cart abandonment. You can configure this to apply to all shipping methods or restrict it to standard shipping only, ensuring you do not lose money on overnight or international shipping options.
Configuring limits, minimums, and expirations
A discount code without limits is a major business risk. Webflow allows you to add specific controls to each code to ensure your margins remain protected.
You can set start and end dates for your promotions. This is essential for time-sensitive campaigns, ensuring that a code automatically expires at midnight on a specific date without requiring you to manually disable it. The time zone of the expiration matches your project's settings, so double-check that your site's local time is configured correctly.
Usage limits are also fully customizable. You can set a maximum number of total uses, such as "valid for the first 100 orders." You can also limit the code to one use per customer email address. This prevents a single user from reusing a welcome discount multiple times across separate checkouts.
Additionally, you can target specific product categories or CMS collections. If you want to clear out inventory of a slow-moving item, you can create a code that only applies to that specific product, while leaving the rest of your catalog at full price.
Want a website that turns visitors into customers, not just compliments?
Book a 15-min introThe big subscription exclusion gotcha
The single most frustrating limitation of Webflow Ecommerce discounts is the subscription exclusion. If you sell recurring subscription products, such as a monthly skincare box or a membership package, Webflow's native discount codes will not work.
When a customer attempts to apply a discount code to a cart containing a subscription product, the checkout page will display an error message stating that the discount cannot be applied. The platform does not support discount codes for subscriptions, even for the first month's payment.
If your small brand relies heavily on recurring subscriptions and you need to run promotions, you have to look for workarounds.
One common workaround is to create a separate, lower-priced "promotional subscription product" in your database and list it on a hidden page. You can direct your promotion traffic to this hidden page, where the price is already reduced, rather than using a discount code at checkout. However, this is an awkward setup that requires manual product management.
If complex subscription promotions are core to your business model, you will likely need to use an external checkout tool like Foxy.io or transition to a platform like Shopify, which handles subscription discounts natively.
Setting up the checkout discount field in the Webflow Designer
To allow customers to use their codes, you must manually add the discount input field to your checkout page layout. Many developers forget this step, leading to customer confusion when they try to apply a code they received in an email.
In the Webflow Designer, navigate to your Checkout Page template. Open the Add Elements panel and drag the "Discount Form" element into your checkout structure. You typically want to place this near the order summary block, right above the subtotal line.
Once the element is on your canvas, you can style the input field, the apply button, and the success and error states using Webflow's style panel. Pay close attention to the error state styling. If a customer types in an expired code or a code that does not meet the minimum order value, the error text must be clear and legible. Use contrasting colors (like a strong red) and ensure the font size is readable on mobile devices. If a customer cannot see why their code failed, they are highly likely to abandon their cart.
Testing your codes before promoting them
Never launch a promotional email or ad campaign without testing the discount code live in your checkout flow.
To test your configuration safely, you can create a test code that offers a 100% discount or a flat discount that reduces the checkout balance to $0. Alternatively, you can put your Webflow store into test mode, which allows you to run mock transactions using Stripe's test credit card numbers.
During your test checkout, verify the following behaviors:
- Is the discount applied to the subtotal? Ensure the discount amount is deducted before taxes and shipping are calculated.
- Does it trigger the correct shipping rule? If you are running a free shipping promotion, confirm that the shipping charge drops to zero.
- Are the minimum requirements working? Attempt to check out with a cart value below the minimum threshold and verify that the system blocks the discount.
- Is the layout responsive? Make sure the discount field is easy to tap and type into on mobile screens.
Running these simple checks takes less than five minutes but prevents painful launch-day issues where customer support is flooded with emails about broken promo codes.
If you are planning a store launch and want to make sure your checkout flows are fully optimized, you can check out my strategy page. Building a high-converting store is about removing friction, and a properly tested promotion system is a key part of that process.