How to add ecommerce to a Webflow website

Choose where commerce belongs

Webflow is the design environment; your commerce system handles product selection, checkout and orders. Decide whether native Webflow Ecommerce or an external integration fits your requirements before rebuilding anything. Native Webflow supports customized cart and checkout experiences, so the decision should reflect the specific business requirements, payment setup and subscription needs of your store.

With Penni Cart, you connect your Webflow site, configure commerce and bring the shopping journey into your existing design. Work on a staged copy first if you already have live customers.

Make one product work before building a catalog

Start with one real product, a clear price and the options customers actually choose. A size or grind selection should affect the item added to the cart, rather than simply changing text on the page. Make the add-to-cart action easy to identify and include an accessible status message so shoppers know it worked.

Design the last step as carefully as the first

Checkout is part of your brand. Keep labels readable, use appropriate input types and make errors specific. Show the order total, delivery expectations and payment options before the shopper commits. Test a long address and a small screen; attractive desktop screenshots do not prove a checkout is usable.

Publish a shopping journey, not just a button

Before launch, test product selection, quantity changes, shipping, a declined payment and a successful order. Confirm the order appears in your dashboard and that customer-facing communications contain the correct details. Keep the previous version available until the new shopping journey passes these checks.