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 limits are.
Where these settings live
| Area | What it controls |
|---|---|
| Cart drawer, Product line item | The quantity and variant controls on each cart line |
| Sticky Add-to-Cart, Content | The quantity and variant controls in the sticky bar, separately for desktop and mobile |
The two are independent. Changing one doesn't change the other.
Quantity selector in the cart drawer
Hide it
- Open your cart drawer in the editor.
- Go to Product line item.
- Untick Quantity selector.
The quantity editor disappears from each line, and the quantity number is not shown on the line either.
What you can't do
| Request | Supported |
|---|---|
| Hide the quantity selector for one product, collection or URL | No |
| Hide it with a product metafield | No |
| Set a max quantity on one item | No |
| Lock quantities to fixed steps (like 12/24/48) | No |
The setting applies to the whole cart drawer.
Variant selector in the cart drawer
Each cart line has its own variant selector, so customers can change the variant without leaving the drawer. All options show in one combined picker. Separate colour and size pickers, swatches or pills are not available.
Hide it
- Go to Product line item.
- Untick Variants.
This hides the selector on every line. You can't hide it for some products only.
Don't replace the built-in variant selector with custom HTML or JavaScript. It's tied to Shopify's variant IDs, prices and stock, and a custom one won't stay in sync.
Sticky Add-to-Cart bar
Open the Sticky Add-to-Cart editor, then Content. Tick or untick Variant select and Quantity selector. Switch the preview between desktop and mobile to set each device. Both are on by default.
The sticky bar shows one variant selector. Picking several variants at once, or separate colour and size pickers, is not supported.
Image, title and price on cart lines
| Question | Answer |
|---|---|
| Change the product image size | Product line item > Design > Product image size |
| Show the original price crossed out | Product line item > Strike through price |
| Change the title or price colour | Design > Product line item > Primary text color and Product price color |
| Hide the image, title or price | Not a setting. Use Custom CSS. See Custom CSS and HTML Reference |
| Portrait images instead of square | Custom CSS. See the example in Custom CSS and HTML Reference |
Upsell offers
Upsell offers in the cart drawer have no quantity picker. Customers add one unit and can change the quantity on the cart line.
Out-of-stock variants
CSS that hides out-of-stock variant options only works on desktop. On mobile, sold-out options still show.
If a free gift variant goes out of stock, it stops being added to the cart. This is expected.