Design your store

Use the data from your Ecommerce Collections to design your Webflow Ecommerce product page.

ecommerce
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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
  1. Ecommerce pages
  2. Ecommerce elements
  3. 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

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?