Design your store
Use the data from your Ecommerce Collections to design your Webflow Ecommerce product page.
Once you’ve built your product list, you can feature products and product categories on your homepage and other static or collection pages using collection lists. You can filter, sort, paginate, and limit the number of items in your Collection list. And you’ll have a fully custom product gallery!
Then, you can customize the look and feel of the “add to cart” component, the cart component, and the checkout process so that the shopping experience integrates seamlessly with the rest of your project.
In this lesson
- Ecommerce pages
- Ecommerce elements
- Ecommerce Collection lists
Ecommerce pages
You can build and style your products and categories pages exactly as you’d do with a CMS Collection page. In your Pages panel, you’ll notice that you’ve also got two new utility pages that allow you to customize the checkout experience. The checkout page is the first page a shopper sees once they finish shopping and continue to checkout. After they submit their order, they’re taken to the Order confirmation page. You can customize both pages and style them so they integrate seamlessly with the rest of your store.
Learn more:
Ecommerce elements
With Ecommerce, you’ll get a set of new elements and components which allow you to incorporate Ecommerce functionality with your design and guide online shoppers through their shopping journey, from adding products to their carts, to viewing and updating their cart, to checking out and getting the order confirmation.
Cart
Add a shopping cart to any static or collection page and fully customize and style the cart button as well as the cart itself. You have a ton of options to customize your shopping cart.
Add to cart
You can add an Add to cart element to your products page or any Collection list that’s connected to the products collection. It allows shoppers to add a product to their shopping cart. You can customize the button any way you’d like — choose to include a quantity input field or not, style the default state, as well as the out of stock and error states.
Web payments
It allows you to add Web Payments into your checkout form or your cart.
Checkout elements
The checkout form contains a number of components, some of which are absolutely necessary for its function and may not be removed from the parent component.
Order confirmation elements
The order confirmation component comes with a number of children components as well. This component can be fully customized and any of the children components can be added from the add panel.
Ecommerce collection lists
You can use collection lists to create product grids and display category lists on your homepage and other static or collection pages. If you’ve referenced products in, for example, a blog collection, you’ll also be able to pull product information and display them in your blog posts.
Learn more: Showcasing collection items using collection lists
Product search
You can use site search to create a custom search engine that allows shoppers to search for specific content on your site.
Learn more: Setting up site search