Cart Drawer Design Checklist for Shopify Stores

A well-designed cart drawer shows five things in a clear order: the items, a progress bar, one or two offers, the total, and one primary button. It uses your theme's fonts and colours so it reads as part of the store, and it has a considered state for an empty cart and for the moments when it is updating. This checklist goes through the hierarchy, the styling, contrast, the empty and loading states, and the things most drawers should lose.

What order should the elements appear in?

From top to bottom:

1. Header. A title, the item count and a close button.
2. Progress bar. One line saying how far the cart is from the next reward.
3. Items. Each with a thumbnail, title, variant, price, a quantity control and a way to remove it.
4. Offers. One or two products that go with what is in the cart.
5. Optional extras. Add-ons, the order note and a discount link, collapsed until wanted.
6. Footer. The total and the checkout button, fixed in place.

The position on the screen and the visual weight are different things. The checkout button sits last and should be the strongest element in the drawer. The items and the total come next. The progress bar is visible but light. Offers are the quietest: present, easy to accept, never louder than the cart itself.

A useful test is to squint at the drawer. If the first thing you see is anything other than the checkout button, the hierarchy is off. On a phone the same order holds with less room; see mobile cart drawer UX: what to get right.

How should line items look?

Like a receipt the shopper can edit. Each line needs:

• a thumbnail large enough to recognise the product,
• the full title and the chosen variant, wrapped onto a second line if needed,
• the price, with any discount shown as the original struck through beside the price charged,
• plus and minus buttons for quantity,
• a remove control that is clearly separate from the quantity buttons.

How do you match the drawer to your theme?

Use the theme's own typeface, colours and button style. A drawer in a different font with a differently shaped button looks like a third-party widget, and a shopper who is about to pay notices when the store's look changes.

Check each of these against a product page:

• Typeface and sizes. Same font family; headings and body text in the same proportions.
• Button. Same colour, same corner radius, same label style as your 'Add to cart' button.
• Colours. Background, text and accent colour from the theme's palette.
• Wording. 'Cart', 'bag' or 'basket', whichever the store uses elsewhere.

Marka Cart Drawer takes its colours, fonts and button shape from your theme when it is switched on, and its free plan includes full design control and templates for anything you want to adjust.

What about contrast?

Every piece of text and every control must be readable against its background, in daylight, on a phone. The places drawers most often fail:

• The button label. Pale text on a mid-tone brand colour.
• The progress bar. A fill and a track too close in tone to tell how far along it is.
• Secondary text. Variant names and struck-through prices in a grey that disappears.
• Sale prices marked by colour alone, which some shoppers cannot distinguish.

Do not rely on colour as the only signal. Pair the progress bar with a sentence, and pair a discount with a label. The full treatment, including keyboard and screen-reader use, is in making a cart drawer accessible.

What should an empty cart show?

Something to do next. A blank panel with 'Your cart is empty' is a dead end at a moment when the shopper has just opened the cart on purpose.

• A short message and a button back to shopping, linked to a collection and not just the home page.
• Optionally, a few best sellers or the shopper's recently viewed products.
• If you have a free shipping threshold, state it here. It is useful before the first item goes in.

How should the drawer behave while it updates?

It should respond at once and never jump. Each change to the cart involves a round trip to Shopify, and the design has to cover that gap.

• Immediate feedback. When a quantity is tapped, the number changes straight away. The confirmed total follows.
• Local loading states. Mark the line or the total that is updating. A spinner over the whole drawer blocks everything for a change to one line.
• No double submissions. The checkout button should pause briefly while totals are being confirmed, so nobody pays the old amount.
• Reserved space. Offers and the progress bar should hold their place while loading, so the content below does not shift under the shopper's thumb.

What should you take out?

Most drawers improve by subtraction. Candidates:

• A second button beside checkout. 'View cart' next to 'Checkout' splits the decision. Keep one primary button; make any other route a text link.
• Product carousels. One or two chosen offers do more than a strip of eight. How to choose them is in what products to upsell in the cart.
• Countdown timers that reset or have no real deadline behind them.
• Rows of badges and payment icons. Checkout shows the payment methods.
• Long policy text. Link to it.

A short checklist

1. The checkout button is the strongest element and the only primary button.
2. Items show thumbnail, title, variant, price, quantity and remove.
3. One progress bar, with a sentence as well as a fill.
4. One or two offers, visually quieter than the cart items.
5. Fonts, colours and button shape match the theme.
6. Text and controls are readable; no signal relies on colour alone.
7. The empty cart and the loading states have been designed, not left to chance.

Design is the frame; what you put inside it decides what the cart earns, and our guide to what belongs in a cart drawer covers that. To start from a drawer that already follows your theme, see Marka Cart Drawer.