Mobile Cart Drawer UX on Shopify: What to Get Right

On a phone, a cart drawer should fill the height of the screen, keep the total and the checkout button fixed at the bottom where a thumb rests, and make every control big enough to hit on the first try. It should also open the instant a product is added, without waiting on the network. This guide goes through each of those: size, button placement, quantity controls, the keyboard, express payment buttons, speed, and how to test the drawer on real devices.

How much of the screen should the drawer take?

All of the height and most or all of the width. A drawer that leaves a strip of the page showing on a narrow screen gains nothing from it, and the strip steals room from the cart.

Three details matter once the drawer is full-height:

• A visible way out. A close button in the top corner, large enough to tap, plus the phone's back gesture closing the drawer and not leaving the page.
• A locked background. The page behind should not scroll while the drawer is open. If it does, shoppers lose their place and the drawer feels broken.
• One scrolling area. The list of items scrolls; the header and footer stay put. Nested scrolling areas trap the thumb.

Where should the checkout button go?

Fixed to the bottom of the drawer, with the total directly above it. That is where the thumb sits when a phone is held in one hand, and it is the one control every shopper needs.

• Keep it on screen however long the cart is. A shopper with eight items should not have to scroll to pay.
• Make it full width, with a label that says what it does.
• Leave space beneath it for the phone's own home indicator, so the button is not half under the system bar.
• Put nothing below it that competes. One primary button, one job.

How should quantity controls and tap targets work?

Use plus and minus buttons, not a number field. Typing a quantity opens the keyboard, covers much of the cart and takes several actions where one would do.

• Size. Each control should be about the size of a fingertip, with clear space around it. If people hit minus when they meant remove, the targets are too small or too close together.
• Separation. Keep 'remove' apart from the quantity stepper, and make it obvious which line it belongs to.
• Feedback. The number changes the moment it is tapped, and the total follows. A control that does nothing for a second gets tapped twice.

What happens when the keyboard opens?

The field being typed in must stay visible. Two cart fields bring up the keyboard, the discount code box and the order note, and on a small screen the keyboard takes a large share of the height.

Common faults:

• The field sits behind the keyboard, so the shopper types blind.
• The sticky footer rides up on top of the keyboard and covers the field.

The fix is for the focused field to scroll into view above the keyboard, with the footer moving out of the way while typing.

Where should express payment buttons go?

Below the main checkout button, or left to checkout itself. Express buttons are useful for shoppers who have a wallet set up, but each one is a full-width block, and several of them stacked in a drawer push the cart contents off the screen.

• The main checkout button stays first and visually strongest.
• Do not let express buttons separate the total from the checkout button.
• If the footer grows so tall that only one cart item is visible, remove them from the drawer. Shopify's checkout presents express options at its first step anyway.

How fast does the drawer need to be on a mobile network?

Fast enough to feel instant. The shopper taps 'Add to cart' and expects a response at once, on a connection that may be slow.

• Open first, confirm after. The drawer should open immediately and show the item, with the server's confirmation following behind. Waiting for the network before showing anything feels like nothing happened.
• Reserve space. Show placeholders for parts that load later, so the layout does not jump under the shopper's thumb.
• Load offers late. Recommendations can arrive after the drawer is open. The cart and the button cannot.

The drawer's script also loads on every page, which has a cost of its own. How to measure it is covered in does a cart drawer app slow down a Shopify store.

How do you test it?

On real phones, in one hand.

1. Open the store on an iPhone and an Android phone, not just a resized desktop browser.
2. Add eight items and check the checkout button stays visible.
3. Change quantities and remove an item with your thumb.
4. Type a discount code and an order note; watch what the keyboard covers.
5. Switch to a slow connection and repeat.
6. Increase the phone's text size and check nothing overlaps.

If your theme's drawer fails several of these and cannot be adjusted, replacing it can be simpler than patching it. Marka Cart Drawer is switched on as an app embed and takes its colours, fonts and button shape from your theme, so you can run the same tests on it and switch back if you prefer what you had.

Large text and screen readers raise further points, which are covered in making a cart drawer accessible. What to keep and what to cut from the layout is in our cart drawer design checklist.

A short checklist

1. The drawer is full height on a phone and the page behind does not scroll.
2. The total and one checkout button are fixed at the bottom.
3. Quantity uses plus and minus buttons with fingertip-sized targets.
4. The discount and note fields stay visible above the keyboard.
5. Express buttons sit below the main button or are left to checkout.
6. The drawer opens at once on a slow connection.

For what goes inside the drawer, see our cart drawer guide; for a drawer to put it in, see Marka Cart Drawer.