Adding discount codes in Webflow Ecommerce

Create discount codes shoppers can apply at checkout.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

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. Publish and test your Webflow Ecommerce site

Add the Discounts element to your checkout page

In the Pages panel in the left toolbar, under Ecommerce pages, click the page you want to add a discount element to (e.g. Checkout). Now when you go into the Add panel, the Discounts element will be visible under Checkout page

Drag the Discounts element onto your canvas. 

Head back to the Pages panel and repeat this for all the pages where you’d like to add the discount element.

Now, let’s add the discount code. 

Add a discount code

Back in the left toolbar in the Ecommerce panel, select Discounts, and click New Discount

Under Basic info, you can choose to automatically generate a discount code or manually enter a custom discount code. Under Discount details, you can choose to discount a percentage or a fixed amount of the total. Toggle the Discount status to Active and click Create to save your changes. 

You can create or deactivate discount codes in this Discount window. 

Publish and test your Webflow Ecommerce site

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

And that’s it! Your customers can now enter the discount code and apply it to their order.

Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback