The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!

One special element that you can add onto a product page or within a Collection list connected to the products category is the Add to cart element. This button allows users to add a product to their shopping cart.

In this lesson
  1. The add to cart component
  2. Add to cart settings
  3. ‍Anatomy of the add to cart component

The add to cart component

The add to cart component lives in the Add panel under the Ecommerce section. 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 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
‍Add to cart settings

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


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

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 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.
  • Submit button — this is the actual "add to cart" button that you can style and customize. Select the "submit button" to change the button text an waiting text in the Submit button settings.
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.

Edit the error messages from the element settings panel