> ## Documentation Index
> Fetch the complete documentation index at: https://varaahi.vritservicespro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cart drawer

> The slide-out cart with live line items, quantity editing, upsell cross-sells and screen-reader announcements.

# Cart drawer

The cart drawer is where the purchase actually happens. It slides in from the right,
updates in place — no page reload, no redirect — and carries the cross-sell that most
stores put on a separate page.

![Cart drawer](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro-c6bfa2fc/images/placeholder/section-cart-drawer.png)

Cart drawer with line items and upsell row

***

## Settings

| Setting | Notes |
| - | - |
| **Show Upsell Products** | Toggles the cross-sell row at the bottom of the drawer |
| **Empty state text** | Shown when the cart is empty |
| **Checkout button label** | The primary CTA |
| **Continue shopping label** | The secondary link |
| **Free shipping threshold** | In your store's currency. Set to `0` to hide the progress bar |
| **Free shipping message** | Text shown when the threshold is met |

### The Upsell Product block

Add one per cross-sell. Each block takes a product, a heading, and a short description.

> [!NOTE]
>
> The best upsells are **complementary, not superior**. A case, a cable, a spare
> earpad, a longer cable — things the shopper was going to need anyway. Upselling
> your own more expensive product inside the cart reads as a bait-and-switch and
> hurts trust.

***

## How it behaves

### Live updates

Adding to the cart, changing a quantity, or removing a line item all happen via
Shopify's Ajax Cart API. The drawer re-renders in place, and the header cart count
updates at the same time. There is no page reload and no scroll jump.

### The free shipping bar

A progress bar fills as the cart total approaches your free shipping threshold. When
the threshold is met, the bar completes and the message changes to the confirmation
copy.

> [!WARNING]
>
> Set the threshold to **exactly** what your shipping policy says. A progress bar
> that promises free shipping at a value your policy does not honour is a deceptive
> practice, and it is the kind of thing that gets a store reported.

### Screen-reader announcements

Every cart change is announced politely to screen readers through a live region in the
header. A shopper using a screen reader hears *"3 items in cart"* after an add, and
*"Cart is empty"* after a removal — without the focus moving.

> [!NOTE]
>
> This is why the cart button carries `data-announcement-one`, `data-announcement-other`
> and `data-announcement-empty` attributes. They are translated strings, not
> hard-coded English, so the announcement is localised with the rest of the theme.

### The checkout pulse

The checkout button has a soft, slow glow that animates continuously to draw the eye
to the final step. It respects `prefers-reduced-motion` and it stops as soon as the
shopper interacts with the button.

***

## Mobile behaviour

The drawer becomes a full-screen panel. The same line items, quantity steppers and
upsells are present, and the checkout button is pinned to the bottom so it is always
reachable with a thumb.

***

> **[Cart page](https://varaahi.vritservicespro.com/sections/main-cart.md)**
>
> The full-page cart for markets that want one.

> **[Cart & checkout](https://varaahi.vritservicespro.com/features/cart-and-checkout.md)**
>
> The complete cart and checkout story.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.