Add to cart

Get an overview of the add-to-cart component and settings.

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

A special element that you can add to a product page or within a Collection list connected to the products category is the Add to cart element. This element consists of 2 buttons allowing users to either add a product to their shopping cart, or go immediately to checkout.

In this lesson:

  1. Add to cart component
  2. Add to cart settings
  3. ‍Anatomy of the add to cart component

Add to cart element

The Add to cart element lives in the Add panel under Ecommerce. You can add an Add to cart element onto your product page or in a Collection list connected to the products Collection from the Add panel or using Quick find (CMD/CTRL+E).

Add an Add to cart button from the Add panel.

Add to cart settings

You can customize the Add to cart element in the element settings panel.

‍Add to cart settings

State

Toggle between the three states (default, out of stock, error) of the add to cart component to style each state separately.

Quantity

This is "on" by default. You can disable the quantity field to hide the quantity input field from the add to cart wrapper.

Add to cart

This is "on" by default. You can disable add to cart to hide the button from the add to cart wrapper.

Buy now

This is "on" by default. You can disable buy now to hide the button from the add to cart wrapper.

Note: Buy now currently only works with Stripe as your payment provider (the provider that accepts payment from your site's customers). If Stripe is not connected - the Buy now button will be hidden on the published site.

Anatomy of the add to cart component

Many elements form the Add to cart component. Each state has its own set of elements. Discover what they are and how you can customize them.

Default state

This is what shoppers will see by default. The default state contains the following components:

  • Option list — this is a set of dropdowns or buttons that appear for products with variants and allow users to choose which variant they want to add to their cart.
  • Quantity — this allows users to specify how many of that product they want to add to their cart. You can hide the quantity in the Add to cart settings. Read more.
  • Add to cart button — this is the actual "add to cart" button that you can style and customize. Select the "submit button" to change the default text and waiting text in the Add to cart button settings. When a shopper clicks the Add to cart button - it will add the product to the shopper’s cart where they can later complete the purchase.
  • Buy now button — this is a “buy now” button that you can style and customize. Select the Buy now button to change the default text in the Buy now button settings. The Buy now button takes a shopper directly to the checkout page to complete their purchase — allowing them to checkout in fewer steps.
Option list

Products with variants have a couple options we can use to let our customers choose different options of a product. With our Option List element selected, we have a couple options to custumize our list:

  • Variant selector
  • Preselect default variant

Using Select lets you have your product variant options in dropdown elements, while using Buttons lets you have your product variant option in selectable button options.

And you can set a variant that each product can start with using Preselect default variant.

Note: if your Add to cart element within your project is missing the Buy now button or Variant selector - re-add a new Add to cart element to your project within the Designer.

Out of stock state

This is the message that will appear in place of the add to cart button when the item is out of stock. You can customize this message and style it when you’re viewing this state in the Designer.

Error state

An error message may appear when the system fails to add a product to the cart. You can customize and style error messages. To edit the error messages, select the Error message text block to access the Error message settings. Select each message in the setting to view it on the canvas. To edit the message, click the pencil icon that appears next to the message in the setting when you hover over it.

Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback