Create a Ecommerce Website

Using Webflow
Created by
Shakil

Shakil

shakil

You will need

Website template

Select a template from the range of templates available in Webflow template gallery, or start from scratch

List of products

Prepare a list of product with product titles, short descriptions, and prices. Include photos of your products or videos, if possible.

Also include any relevant technical or other details for your products.

Ecommerce-enabled plan

You would need one of Webflow's "Ecommerce" plans. Currently, these start at $29/month.

The cheapest plan includes a custom checkout, shopping cart, and the ability to process payments with Stripe/Paypal.

Step-by-step instructions

Step 1
Design a product section

You would need a list of products and individual product pages.

In Webflow, a list of products for a website is designed by setting up so-called CMS Collection pages. Go to "Collection List Settings" and select "CMS Collections", then configure your Collection from there. There's a tutorial on how to create these here.

Product pages usually feature a grid with a preview image, product title, short description. For a visual walkthrough on designing product pages, watch this video

Step 2
Set up a shopping cart

Go to "Add", then "Elements", "Ecommerce" and find the "Cart" element. Select it. And add to an area on a page of your choice.

In "Cart Wrapper Settings", select your cart type (left sidebar, right sidebar, modal or dropdown). Select easing (e.g. "Ease Out Quad"), and easing duration.

Select whether you want to open the cart automatically once a product is added via "Open when product is added" checkbox.

Configure your error message settings and specify custom error messages where applicable

Step 3
Set up an "Add to Cart" button

Go to "Add", then "Elements", "Ecommerce" and select an "Add to Cart" element.

You would want to insert this element on your product pages or in Collection items, like a product card in a product list. This will enable shoppers to add a selected product to their shopping cart.

Customize your "Add to Cart" button by toggling "Quantity", "Add to Cart", and "Buy" now fields and buttons and doing this for every state of the cart ("Default", "Out of stock" or "Error")

Step 4
Add a payment method

Set up your payment method by going to "Settings", "Ecommerce", "Payment".

Connect your Stripe account. Review various payment providers enabled by Stripe and toggle Web Payments (such as "Apple Pay" or "Pay with browser") on or off.

You would usually want to enable Web Payments, as they simplify the checkout experience for your users by using saved payment information.

Step 5
Set up checkout

You should find "Checkout" and "Order Confirmation" utility pages in your "Pages" panel.

Add these to your website. "Order confirmation" is fully customizable - "Checkout" contains several items that should not be removed from it though.

View more tips on how to use these utility pages in Webflow's interface.

The result

Ecommerce Website

A complete Ecommerce experience with product lists, pages, a shopping cart and a checkout workflow.

↑ Press to view all guides for this result

Comments