Product Form Submit

The Add to Cart button — the dark pill with an arrow at the bottom of the buy column. It’s the block that actually submits the order, so it carries the selected variant, the chosen subscription plan, the quantity and any bundle add-ons all in one go.

It also renders two things you don’t add separately:

• an optional quantity stepper above the button, and
• the Product Stock Message directly beneath it.

Add it inside Product Main, below the price.

Settings

Setting	What it does
Show quantity controls	Shows the − / number / + stepper above the button. On by default. Turned off on the live product page — see below.
Button Text	The label on the button. Defaults to “Add to Cart”.
Button Text While Adding	The label shown from the moment of the click until the cart has updated. Defaults to “Adding to Cart…”. A spinner replaces the arrow while this shows.
Block ID	Optional anchor, so a link elsewhere can jump to this block.

The price is not in the button

The button label is just “Add to Cart” plus an arrow. It deliberately does not include the price.

The price lives in the Product Price Display block directly above the button, which is where it stays accurate as the customer changes pack size or switches to a subscription. Putting the price in the button label as well would show the same number twice.

Don’t type a price into Button Text

The Button Text setting is plain text — whatever you type stays there. Typing “Add to Cart — $26.95” produces a price that never updates when the customer picks a different pack or a subscription, and it will contradict the live price sitting right above it.

What “Button Text While Adding” is for

Adding to cart takes a moment. In that gap the button:

1. Swaps its label to your Button Text While Adding copy
2. Shows a spinning ring in place of the arrow
3. Disables itself, so a second click can’t add the item twice

Once the cart has updated, the button returns to its normal label and the cart drawer opens.

Keep this copy short and in the present tense — it sits in the same pill as the normal label, and a long phrase will wrap the button to two lines mid-click.

Reduced motion

The spinner is held still for visitors who’ve asked their device to reduce motion. They still get the label change and a screen-reader announcement that the button is busy, so the pending state is never invisible.

Quantity controls

When Show quantity controls is on, a − / number / + stepper appears above the button and the quantity is sent to the cart. When it’s off, the quantity is simply 1 — the block still works exactly the same, it just doesn’t offer the choice.

The live product page has this off, because customers buy more by choosing a bigger pack in the Product Pack Selector rather than by increasing a quantity. Turning both on gives customers two different ways to buy three months’ supply at two different prices, which is worth avoiding.

Sold-out behaviour

When the selected variant is unavailable the button greys out and can’t be clicked, and the out-of-stock copy from Product Stock Message appears underneath. This follows the selected variant, not the product — a product with a sold-out 3 Pack and an in-stock 1 Pack will enable and disable the button as the customer switches between them.

Subscriptions and bundles

Both are handled automatically — there is nothing to configure here.

• Subscriptions are native Shopify selling plans. When the customer picks Subscribe & Save in the Product Frequency block, the chosen plan is attached to this form and the subscription price is what’s charged. There is no separate subscription button and no vendor widget.
• Bundle add-ons selected in a Bundle Group are submitted alongside the main product in the same click, so the customer only presses Add to Cart once.

Tips

• Only one of these per product template. It renders the product form itself; a second copy produces two competing forms on the page.
• Keep the label to two or three words. “Add to Cart” fits the pill comfortably. Longer copy wraps, and it wraps differently on mobile.
• Put it below the price, not above. The price-then-button order is what makes the button label’s lack of a price read correctly.
• Check the stock message settings too. They live on the Product Stock Message block that this block renders — you won’t find them in this block’s own settings.