Plan your shop

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

Once you have established your product catalog, you can highlight goods and product categories on your front page and other fixed or collection pages using assortment lists. You can refine, organize, paginate, and constrain the number of items in your Collection list. And you will have a completely personalized product showcase!

Afterward, you can adjust the appearance and vibe of the “add to basket” element, the shopping cart element, and the checkout process to ensure that the buying experience blends smoothly with the rest of your creation.

Within this tutorial
  1. Online store pages
  2. Online store components
  3. Online store Collection listings

Online shop pages

You can construct and stylize your goods and categories pages precisely in the same way as you would with a CMS Assortment page. In your Pages collection, you will also observe that you have two new auxiliary pages that enable you to personalize the checkout process. The purchase page is the initial page a customer encounters after wrapping up shopping and proceeding to checkout. Subsequent to submitting their order, they are directed to the Order verification page. You can modify both pages and tailor them so they blend seamlessly with the rest of your shop.

Discover more:

  • Creating and configuring assortment pages
  • Configuring RSS feeds
  • Personalizing the checkout process

Online shop components

With E-commerce, you will receive a selection of new elements and features that enable you to incorporate online trade functionality with your design and lead internet shoppers through their shopping journey, from incorporating products into their carts, to examining and adjusting their cart, to completing the purchase and receiving the order verification.

Shopping basket

Integrate a shopping basket into any fixed or assortment page and wholly adjust and stylize the basket button as well as the shopping basket itself. You possess a multitude of options to personalize your shopping basket.

Append to basket

You can attach an Add to basket element to your goods page or any Assortment list linked to the goods assortment. It allows customers to include a product into their shopping basket. You can adjust the button in any manner you prefer — decide whether to include a quantity input field or not, design the default state, as well as the out-of-stock and error states.

Online payments

This permits you to include Online Payments into your checkout form or your shopping basket.

‍Checkout features

The checkout form encompasses various components, some of which are utterly essential for its operation and cannot be excluded from the parent component.

Order verification features

The order verification component includes numerous child components as well. This component can be entirely customized and any of the child components can be added from the add panel.

Online shop assortment lists

You can utilize assortment lists to form product grids and showcase category listings on your front page and other fixed or assortment pages. If you have commended products in, for instance, a blog assortment, you will also be capable of retrieving product details and present them in your blog articles.

Discover more: Presenting assortment items using assortment lists

Item exploration

You can employ site search to establish a personalized search engine that enables buyers to explore specific content on your site.

Discover more: Building up site search

Ewan Mak
Latest posts by Ewan Mak (see all)