Cart Drawer: Variant and Quantity Selectors: Setup and Limits
This article explains how to show or hide the variant and quantity selectors in the cart drawer and the sticky Add to Cart bar, and where the current limits are.
Where these settings live
There are three separate places that control variant and quantity selectors:
| Area | What it controls |
|---|---|
| Cart drawer line item settings | The quantity and variant controls shown on each line inside the cart drawer |
| Sticky Add to Cart bar (Content settings) | The quantity and variant controls shown in the sticky bar, separately for desktop and mobile |
| Offers > Offer visibility | The quantity picker shown on upsell offers |
These settings are independent. Changing one does not change the others.
Quantity selector in the cart drawer
Hide it
- Open the cart drawer app settings.
- Go to the Product line item section.
- Disable the Quantity selector checkbox.
This removes the quantity editor from each line, but the quantity value still shows on the line item.
What you can't do
| Request | Supported? |
|---|---|
| Hide the quantity selector for a specific product, collection, or URL | No |
| Hide the quantity selector using a product metafield | No |
| Set a max quantity on a specific item | No |
| Lock quantities to fixed increments (for example 12/24/48/72) | No |
The Quantity selector checkbox applies to the whole cart drawer. There is no per-product, per-collection, or per-URL override.
Variant selector in the cart drawer
Each cart line has its own variant selector, so a customer can change the variant of that line without leaving the drawer. Variant options render as one combined picker. Separate colour and size selectors are not available, and there is no setting to display variants as swatches or pills instead of the combined picker.
Hide it
- Open the cart drawer app settings.
- Go to the Product line section.
- Uncheck the Variant option.
This hides the variant selector on every cart line. You can't hide it for only some products.
Don't replace the built-in variant selector with custom HTML or JavaScript. It ties directly into Shopify variant IDs, pricing, and availability, and a custom replacement will not stay in sync with these.
Sticky Add to Cart bar
The sticky bar has its own settings, separate from the cart drawer. Desktop and mobile are controlled independently.
| Setting | Controls | Default |
|---|---|---|
| Content.isProductVariantSelection | Variant selector on the desktop sticky bar | On |
| Content.isProductQuantitySelection | Quantity selector on the desktop sticky bar | On |
| Content.isProductVariantSelectionMobile | Variant selector on the mobile sticky bar | On |
| Content.isProductQuantitySelectionMobile | Quantity selector on the mobile sticky bar | On |
The sticky bar shows one variant selector per item. Selecting several variants of one product at once, or splitting the selector into separate colour and size pickers, is not supported.
Quantity picker on upsell offers
- Go to Offers.
- Open Offer visibility.
- Enable Show quantity picker.
This adds a quantity picker to the offer, separate from the cart drawer and sticky bar settings above.
Out-of-stock variants
CSS that hides out-of-stock variant options only works on desktop. It does not apply on mobile, so out-of-stock options will still show there.
If a free gift variant goes out of stock, it stops being added to the cart. This is expected behaviour, not a bug.