Sticky Cart
A cart summary pinned to the side as you scroll, holding items, totals, and a checkout button. Keeps payment in reach on long product and listing pages.
A cart summary pinned to the side as you scroll, holding items, totals, and a checkout button. Keeps payment in reach on long product and listing pages.
Search blocks by description or jump to a page.
Sticky Cart pins a persistent bar to the bottom of the viewport. The bar is always visible and shows a shopping cart icon with a live item count badge, a "Your Cart" label, the running total, and a checkout button. A chevron icon lets the shopper tap anywhere on the bar to expand or collapse a fuller panel beneath it. When expanded, the panel splits into two columns: a scrollable item list on the left and an order summary card on the right. Each item row shows a thumbnail, product name, color and size details, inline quantity steppers, a line total, a struck-through original price when a discount applies, and a remove button. The order summary card breaks out subtotal, shipping (free above a threshold), and total, then repeats the checkout button.
Every text string and numeric value is plain state you can swap out. The item list, the free shipping threshold, and the order summary card are all independent, so you can add or remove items, adjust the threshold, or drop the summary card entirely without touching the bar or the expand toggle.
Reach for this block on any long product detail or listing page where shoppers will scroll and you do not want the cart to disappear. For an ecommerce storefront brand it is particularly useful on pages that mix editorial content with products, since the sticky bar keeps the purchase action reachable the whole time a visitor reads. It outperforms a sidebar cart when screen width is limited, because the bar collapses to a single line and only takes full height when the shopper asks for it.
A natural flow around it on an Ecommerce page:
Before
After
The bar and panel together cover the core cart review moment. A few ways to put them to work on a storefront:
Tip: the free shipping threshold message updates automatically based on the subtotal, so set the threshold to a realistic order value for your catalogue and it will nudge shoppers to add one more item on its own.