Adding discount codes in Webflow Ecommerce

As a store manager, you can create discount codes shoppers can apply at checkout.

In this lesson:

1. Add the Discounts element to your checkout page
2. Add a discount code
3. Add valid dates
4. Set discount restrictions
5. Activate a discount
6. View the status of your discount(s)
7. Publish and test your site
   

 Discount codes can be managed in the Designer and Editor.

Add the Discounts element to your checkout page

To add a Discount element to your page:

1. Click into the Pages panel in the left toolbar
2. Find the Ecommerce pages section and add it to your Checkout page
3. Click into the Add panel and find the Checkout page section 
4. Drag the Discount element onto your canvas 

Add a discount code

To add a discount code:

1. Click into the Ecommerce panel on the left toolbar
2. Select Discounts and New discount

Under Basic info, you can choose Generate code to automatically generate a random discount code or manually enter a custom discount code. You can also name the discount and add notes (only visible to store managers) to help with tracking (e.g., track one-time use codes).

Under Discount details, you can choose from 3 discounts:

1. Percentage 
2. Fixed amount
3. Free shipping (subtracts the shipping amount from the order total)

If you check Set maximum discount value (available for percentage discounts), the discount will max out at the value provided.

Add valid dates

You can set a Starts on and Ends on date (that uses the site’s time zone) to your discount codes in Dashboard > Settings > General > Time zone.

Some things to note about discounts with Starts on and Ends on dates:

• Shoppers will only be able to apply discounts when the current date is between Starts on and Ends on
• Starts on defaults to the current time (when the discount is created)
• Ends on defaults to the current time + 7 days
• Checking the Never expires option creates a discount that can be applied indefinitely
• A Discount is expired error will appear at checkout if the current time isn’t between the valid dates (customize your error message in Checkout settings)

Set discount restrictions

You can add discount restrictions in the Ecommerce panel > Discounts under Restrictions. 

Let’s look a the Restrictions fields more closely:

Applies to

To specify which products and categories the shopper can apply the discount code to, you’ll choose from:

• Entire order
• Selected products
• Selected categories

At checkout, the discount will be calculated from the eligible items in the cart for percentage and fixed amount discounts. 

Example: 

• A discount is set to 20% off Selected products: A and B
• The cart has products A ($1), B ($10), and C ($100)
• The total discount = -$2.20 (20% off products A and B)
  

Fixed amount discounts include an additional option to control how discounts are calculated (see below).

Free shipping discounts subtract the entire shipping amount if the cart contains at least one eligible item.

Only apply discount once per order

Only apply discount once per order is an optional setting when the discount is Fixed amount and restricted to certain products or categories. If the Only apply discount once per order option is left unchecked, the discount gets calculated for each eligible item. 

Example if unchecked: 

• A discount set to $10 off product A ($15)
• The cart has product A x 4 
• The total discount = -$40
• The order total = $20.00

If checked (default), the discount is calculated once for the eligible items in the cart.

Example if checked: 

• A discount is set to $10 off product A ($15)
• The cart has product A x 4
• The total discount = -$10.00
• The order total = $50.00

Minimum order value

You can have an order value with:

• No minimum
• Value at least

When the Value at least option is chosen, the discount can’t be applied unless the cart’s subtotal is greater than or equal to the specified amount. If the cart’s total isn’t less than or equal to the specified amount, a Discount requirements not met error will appear at checkout (customize your error message in Checkout settings).

Total usage limit

You can set a maximum on the total number of times a discount can be used in your store across all your customers. You have two options:

• Unlimited
• Fixed limit

Once the Fixed limit amount has been reached, customers will no longer be able to apply the discount and the error message “Discount usage limit met” will appear. (Customized error messages in Checkout settings.)

Limit uses per customer

The Limit uses per customer field allows you to specify the maximum number of times each customer can use this discount (unique customers are identified by their email address). You can choose from:

• Unlimited
• Fixed limit per customer

If you’ve chosen Fixed limit per customer and shoppers apply the discount at checkout before providing an email address, we’ll validate the discount again when they try to complete the purchase. An “Discount usage limit met” error message will appear if the customer limit has been reached, and prompt the shopper to refresh the page (which removes the discount). Customized error messages in Checkout settings.

This discount can be used in combination with other discount limits, including total usage (e.g., you can create a discount code with a limit  of 1 per customer and 100 total uses).

Activate a discount

The discount status button can be used to manually toggle discounts off or on. 

To Enable a discount:

1. Toggle the Discount status to Enabled 
2. Click Create to save your changes 
   

Note: Discount updates take effect immediately on Save and don’t require site publish. This allows store managers to instantly manage promotions.

A discount that’s Enabled is subject to the restrictions you added (e.g., valid dates, usage limits, etc.) For example, if the Ends on date has passed, the discount is expired and can’t be used. 

When a discount is Disabled, it can’t be applied in any situation.

View the status of your discount(s)

Use the “Status” field in the list view and in the header of the discount details for a quick glance at your discount status. Discount statuses are visible in the discount list view and the discount details header.

The discount statuses are:

• Disabled: The discount was manually disabled and can’t be applied
• Limit reached: Total usage limit was reached or exceeded and the discount can’t be used
• Expired: Ends on date has passed and discount can’t be used
• Scheduled: Starts on date is in the future and the discount can’t be used yet
• Active: Discount can be used as long as the shopper’s cart meets requirements

Note: You can export and import discounts with a CSV and bulk select them in list view to enable/disable and delete.

Publish and test your Webflow Ecommerce site

From the top right toolbar, click Publish and then Publish to Selected Domain.