Add to cart

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!
This video features an old UI. Updated version coming soon!
Add to cart

One 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 two buttons allowing users to either add a product to their shopping cart, or go immediately to checkout.

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 element

The Add to cart element 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 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.

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.
  • 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.
Note: if your Add to cart element within your project is missing the Buy now button - 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.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form