How to Add a Quantity Selector to Shopify Product Pages

November 7, 2026

In Dawn, the quantity selector is already there: it ships on the product page and the cart page, so most stores do not need to add anything. If it is missing, add the Quantity selector block in the theme editor on the product template, below the buy buttons. Only the checkout page is off limits, because checkout cannot be edited unless you are on Shopify Plus.

First, check whether you already have one

Most people who ask how to add a quantity selector already have one. Dawn ships with a quantity selector on the product page and the cart page, so customers can choose how many products they want before they reach checkout. The block is part of the product template, and it only disappears if a previous theme edit removed it, or if the store is running a template that never had it. Before you write any code, open a product page in the theme editor and look for the Quantity selector block. If it is there and hidden, unhide it. If it is missing, add it back, which takes a minute and no code at all.

The confusion comes from the checkout page, where the quantity selector does not exist and cannot be added on a standard plan. Checkout customizations are limited unless you are on Shopify Plus, and no theme edit will put a quantity selector on the checkout page. That is a platform limit, not a theme gap, and the answer is to make the product page and cart page do the job instead.

Adding it in the theme editor

In the theme editor, open a product page and find the product template in the sidebar. Add the Quantity selector block below the buy buttons, then save and preview. The block shows a minus button, a quantity field, and a plus button, and it respects the product's inventory: it will not let a customer order more than you have, and it updates the cart count when the quantity changes. That is the whole job, and for most stores it is done at this point.

The setting worth checking is the block's position. Put it directly above or below the buy button, not buried under the description, because a buyer who cannot find the quantity control will order one unit and come back to complain, or order one unit and never come back. If your product is sold in packs, set the default quantity to the pack size, and say so in the product description, because a selector that starts at one on a product sold in sixes creates support tickets.

The mobile row problem, and the small fix

On desktop, the quantity selector and the add to cart button sit in the same row and look fine. On mobile they stack, and the stacked version can push the buy button below the fold on a short screen, which is the one place you do not want it. The fix is a small CSS change at the top of your theme code: on screens below 749 pixels, float the quantity selector left at about 25 percent width, float the buy button area right at about 65 percent, and clear the description below them. That puts the two controls side by side on a phone, the way they sit on desktop.

Test this on a real phone, not just the theme editor preview, because the editor preview hides the crowding that a real device shows. And test it with the longest variant name you sell, because a long variant label wraps and pushes the row apart. If the row still breaks, the answer is a narrower quantity field, not a smaller buy button: the buy button is the one control that must never shrink.

When a quantity selector is the wrong tool

A quantity selector is not always the right control. If your product is sold by the unit and almost nobody buys more than one, the selector adds clutter and a decision the buyer did not need. If your product is a subscription, the quantity is usually fixed and the selector confuses the subscription choice. And if your store sells one product per order, which is common for made-to-order and custom work, remove the selector entirely and say so on the page. The test is simple: if fewer than one order in ten changes the quantity, the selector is decoration. Keep it where bulk buying is real, and drop it where it is not.

Keep reading: How to Add a Quantity Selector to Shopify Product Pages, How to Add Volume Discounts to Shopify Product Pages, and Shopify Product Pages on Mobile: What Belongs Above the Add to Cart Button.

Frequently asked questions

Does Dawn have a quantity selector built in?

It is already there in Dawn. The quantity selector ships on the product page and the cart page, so your customers can choose how many products they want before checkout. If you do not see it, check the product template in the theme editor, because a previous edit may have removed the block.

Can I add a quantity selector to the checkout page?

No, not on standard plans. Checkout customizations are limited unless you are on Shopify Plus, and the checkout page cannot be edited to add a quantity selector. On Plus, you can customize checkout with Shopify Scripts and the Script Editor app. Everywhere else, the quantity selector lives on the product page and the cart page.

How do I add a quantity selector in the theme editor?

Open the theme editor, go to a product page, and add the Quantity selector block below the buy buttons. Save, then preview on mobile, because the selector and the add to cart button can crowd each other on narrow screens. If they stack badly, a small CSS tweak puts them in the same row.

Can the quantity selector and add to cart sit in the same row on mobile?

Yes, with a small CSS change in the theme code. Set the quantity selector to float left at about 25 percent width and the buy button area to float right at about 65 percent, on screens below 749 pixels. Test it on a real phone, not just the editor preview, because the editor preview hides the crowding.