Skip to main content

Add to cart, quantity, and checkout buttons

Configure the Button, Checkout, and Quantity select product elements and their cart actions in Instant.

Purchase controls live in Insert → Shopify → Product. Instant gives you three dedicated elements for the buy box:

  • Quantity select — a stepper (minus / number / plus) tied to the product form.

  • Button — an add-to-cart control that comes pre-wired with the Add to cart action.

  • Checkout — a button that sends the shopper straight to Shopify checkout.

You can also use a generic Button from Insert → Basics and give it an Add to cart or Go to checkout action yourself. The Product presets just save you the setup.

Quantity select

Place Quantity select next to your add-to-cart button. It's bound to the product form, so the chosen quantity is used when the shopper adds to cart or checks out. Style the stepper and number in the Design panel to match your buy box.

To build your own quantity controls (for example, quick "1 / 2 / 3" pills), add a Set quantity action to any element and give each control a fixed quantity value.

Add to cart button

The Product Button preset defaults to the Add to cart action. Select it, open the Action section in the Design panel, and set two options:

  • On clickGo to cart (keep shopping) or Go to checkout (send the shopper to checkout after adding).

  • Open — where the cart opens: Cart page, Instant cart, or Custom cart. This option is hidden when On click is set to Go to checkout.

Use Add option to reveal optional settings: apply a Discount code, override the Quantity, or Clear cart before adding.

Checkout button

The Checkout preset is a dedicated button that skips the cart and goes to Shopify checkout with the selected variant and quantity. Place it alongside Add to cart for a "Buy now" pattern — for example, style checkout as your primary action and add to cart as the secondary one.

Cart page, Instant cart, or custom cart

The Open setting decides what happens after a shopper adds to cart:

  • Cart page — sends the shopper to Shopify's standard cart page.

  • Instant cart — opens the cart drawer you designed in Instant, without a full page load.

  • Custom cart — for a theme with its own cart drawer. Instant shows a Theme code required note in the Design panel, because your theme needs a code snippet to trigger it.

If you choose Instant cart and haven't built a cart layout yet, Instant shows a prompt with a Create cart button that starts one for you. See Build a cart drawer.

Keep the Open target consistent across your product Button elements, Product card tiles, and the header Cart button (which uses the Open cart action). For the drawer to open everywhere, each of these must point at Instant cart.

Show and hide by availability

Use conditional visibility to adapt the buy box to inventory — for example, hide the Button or show Checkout based on a product's Available for sale state. Test add to cart on mobile with both Cart page and Instant cart targets before publishing.

Related articles

Did this answer your question?