Summary

Webflow gives designers the first completely visual, completely customizable ecommerce platform. Build eye-popping layouts, author amazing interactions and animations, and customize every detail of your cart and checkout experiences. All without writing a line of code.

Lessons in this course

Getting started

Coming soon

In the Webflow Designer, you can use the Ecommerce panel to build your store database adding, organizing and managing products and categories. Fully customize the look and organization of your store database by adding custom fields.

Learn all about the Webflow Ecommerce Products and Categories Collections.

Overview Ecommerce Collections
2:37
Coming soon

Customize and style your Cart and Cart button.

Fully customize and style your Cart and Cart button.

Customize the Cart button
2:38
Coming soon

After adding a Cart, customizing the Cart button, and styling it, it’s time to customize the Cart itself. You can choose the Cart type, the easing and duration of the opening and closing animation, and the number of items to show in the Cart preview. You can also specify if you want to open the Cart when a product is added.

Learn how to customize your shopping Cart.

Customize the shopping Cart
4:15
Coming soon

Add, style, and customize an add-to-cart button in your product lists and products page.

Create an add-to-cart button
2:26
Coming soon

Generate variants of a specific product in Webflow Ecommerce to automatically account for size or color options.

Create product variants
2:15
Coming soon

Learn how to customize and preview your store’s email branding and language.

Customize ecommerce emails
1:46
Coming soon

Learn how to enable checkout to launch your Webflow Ecommerce store.

Launch your ecommerce store
1:18
Coming soon

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

Design your store
5:33
Coming soon

Webflow Ecommerce

8
Lessons
Getting started
Getting started

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

Overview Ecommerce Collections

In the Webflow Designer, you can use the Ecommerce panel to build your store database adding, organizing and managing products and categories. Fully customize the look and organization of your store database by adding custom fields.

Learn more

Transcript

Customize the Cart button

Customize and style your Cart and Cart button.

Learn more

Transcript

Customize the shopping Cart

After adding a Cart, customizing the Cart button, and styling it, it’s time to customize the Cart itself. You can choose the Cart type, the easing and duration of the opening and closing animation, and the number of items to show in the Cart preview. You can also specify if you want to open the Cart when a product is added.

Learn more

Transcript

Create an add-to-cart button

Learn more

Transcript

Create product variants

Learn more

Transcript

Customize ecommerce emails

Learn more

Transcript

Launch your ecommerce store

Learn more

Transcript

Design your store

Learn more

Transcript

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
  • Headphones, speakers, and a Steinway Model D grand piano

Related courses

Related courses

Notes:

  • The main video will get replaced with javascript after the site loads either from the browser's url if there's a videoUrl there, otherwise from the first video in the nav
  • We should pick some default video so people who have javascript turned off load some webflow video instead of wistia example currently there. do that in the embed with the iframe ^
  • The embed at the bottom of the page has some configurable options at the top of that code block. eg: you can tweak what the urls look like, but once this launches don't change them
  • Right now the classes used in the side nav can be edited by adding an element there with those classes. If you'd rather edit the css for those directly in the code you can add a css block in a new html embed at the top of this page for that, if doing that consider changing their names to not conflict with classes edited in the designer