Get an overview of the add-to-cart component and settings.
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:
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).
You can customize the Add to cart element in the element settings panel.
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.
This is "on" by default. You can disable add to cart to hide the button from the add to cart wrapper.
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.
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.
This is what shoppers will see by default. The default state contains the following components:
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:
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.
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.
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.