Mini Cart

A live cart button that opens a dropdown, a side panel, a window or a full-screen cart — with the cart lines, quantities, a coupon field, free-shipping progress, recommendations and checkout. Add something below, then open each cart: they all update together. Coupon to try: WELCOME10.

Add something

Add a deal to the cart — every mini cart on the page updates, and the side cart opens.

A dropdown

The classic header cart: a count badge and the subtotal, opening a dropdown.

A side panel with free-shipping progress

A pill button that slides the cart in from the right, with − / + quantities and progress towards free shipping.

Your own icon, a coupon field and cross-sells

Any icon from Divi’s icon picker · a label with the subtotal · the count as different products · apply and remove coupons without a reload · progress towards free shipping at $100, with a truck · cross-sells you can add in one click · “Continue shopping” closes the cart.

A side panel that simplifies on small screens

Icon and count only on tablets, the icon alone on phones · free shipping at $60, hidden once reached · related products · a note under the totals.

A window

Opens as a modal · the coupon field always shown · trimmed lines (no options, no line total) · stacked buttons · “Continue shopping” goes to the shop · the empty cart’s button closes the window.

Full screen, with hand-picked picks

A “Bag” that fills the screen · no thumbnails · three hand-picked recommendations, shown even while the bag is empty.

Hidden while the cart is empty

This button only appears once something is in the cart.

A floating button

Fixed to the bottom-right corner on every screen — 40 px in on desktops, bottom centre and 16 px in on phones — and 64 px wide (52 px on phones). It opens a side panel. Look at the corner of this page.

Floating on phones only

On phones it floats at the middle of the left edge; on tablets and desktops it stays right here, in place.