The cart is the bridge between browsing and buying. If shoppers can’t easily find it, they lose track of what they’ve added. If it’s too prominent, it distracts from browsing. The balance is subtle but important — the cart should always be accessible but never in the way.
The persistent cart icon
The simplest form of cart access is a cart icon in the header, visible on every page. Most Shopify themes include this by default. It shows a small shopping bag or cart icon with a badge indicating the number of items inside.
This works well on desktop, where the header is always visible and the icon sits in the upper-right corner where shoppers expect it. On mobile, the situation is more nuanced. The header scrolls out of view as the shopper scrolls down a product page, taking the cart icon with it. By the time they decide to buy, they have to scroll back to the top to find the cart.
A persistent cart icon — one that stays fixed on screen regardless of scrolling — solves this. On mobile, a tabbar with a cart button is the most natural implementation. The cart icon sits in the bottom bar, always visible, always within thumb reach. The item count badge updates in real time as the shopper adds products.
With Navi+, configuring a tabbar with a cart button is a drag-and-drop operation. The button shows the current item count and opens the cart drawer or navigates to the cart page with one tap. This keeps the cart accessible throughout the browsing journey without adding a floating element that covers content.
When to show the item count
The cart badge — the small number showing how many items are in the cart — serves as a passive reminder. It tells the shopper “you have 3 items waiting” without interrupting their browsing.
Some stores only show the badge when there’s at least one item in the cart. Others always show it (displaying “0” when empty). The first approach is cleaner — a badge that says “0” draws attention to the fact that the shopper hasn’t added anything yet, which can feel like pressure.
The badge should update immediately when an item is added. A common frustration: the shopper taps “Add to cart” on a product page, but the badge doesn’t update until the next page load. This delay makes the shopper unsure whether the action worked. Real-time badge updates — ideally with a small animation (the number incrementing, a brief highlight) — confirm that the item was added.
Cart drawer versus cart page
When the shopper taps the cart icon, there are two common destinations: a full cart page, or a cart drawer (a slide-out panel showing the cart contents without leaving the current page).
The cart drawer has a navigational advantage. The shopper can check their cart without leaving the product they’re looking at. If they decide to keep shopping, they close the drawer and they’re right where they were. If they’re ready to check out, they tap the checkout button in the drawer. No extra page loads, no losing their place.
A full cart page works better when the shopper has many items and needs to review, edit quantities, or remove products. The full page gives more space for this. But for a quick check — “did that item get added? how many do I have?” — the drawer is faster and less disruptive.
Many stores offer both: the cart icon opens a drawer for a quick look, with a “View full cart” link at the bottom for detailed review. This two-tier approach gives the shopper the right level of access depending on their intent.
Quick-add patterns
Quick-add is a pattern where the shopper can add a product to the cart without visiting the product page at all. On a collection page, each product card has an “Add to cart” button (or a “+” icon). One tap adds the item. The cart badge updates. The shopper continues browsing.
This reduces navigation friction significantly. Without quick-add, the journey is: collection → product page → add to cart → back to collection. With quick-add, it’s just: collection → add to cart. Three steps become one.
Quick-add works best for simple products without variants — a candle, a poster, a book. For products with multiple sizes or colors, quick-add can show a small variant picker (a row of size buttons, a color swatch) that expands on tap. The shopper selects the variant and adds it, all from the collection page.
The risk of quick-add is that it bypasses the product page entirely. For stores that rely on product page content to convince shoppers (detailed descriptions, reviews, comparison charts), skipping that page might reduce conversion on higher-consideration items. The solution is to offer quick-add as an option alongside the full product link — the shopper can choose the fast path or the detailed one.
Cart persistence across sessions
Cart persistence refers to keeping the cart contents saved even after the shopper leaves the site and comes back later. On Shopify, carts persist for a reasonable period by default (typically until the session expires or the cart is abandoned). For logged-in customers, the cart can persist indefinitely across devices.
This is a navigation concern because many shopping journeys span multiple sessions. A shopper might add items on their phone during lunch, then come back on their laptop in the evening to complete the purchase. If the cart is empty when they return, the store has lost the progress from the first session.
For stores with a high percentage of returning visitors, cart persistence is a significant conversion factor. The shopper returns, sees their cart still has items, and picks up where they left off. Without persistence, they have to find those products again — and many won’t bother.
This article is part of the larger guide on Why shoppers abandon cart at checkout (and how navigation plays a role).