> ## 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 & checkout

> The complete purchase path — bulk-pack pricing, the live cart drawer, upsells, free-shipping progress and accessible cart feedback.

# Cart & checkout

Most themes treat the cart as a necessary evil — a list of items and a button. VARAHI
treats it as the last thirty seconds of the sale, and it is where the theme's
conversion work is concentrated.

***

## The purchase path

```text theme={"system"}
Browse -> Product -> Add to cart -> Drawer opens -> Maybe an upsell
                                       |
                                       |-- Quantity or variant change (live)
                                       |-- Discount code
                                       |-- Free-shipping progress
                                       `-- Checkout
```

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

Cart drawer — line items, upsells, progress and checkout

***

## 1. The buy box converts before the cart

The bulk-pack tier is the highest-leverage feature in the theme. See
[Hero Product](https://varaahi.vritservicespro.com/sections/hero-product.md#the-bulk-pack-tier) for the full mechanics.

> [!TIP]
>
> Frame the bulk option as **per-unit value**, not as a discount. "Rs. 8,700 each" vs
> "Rs. 13,920 total" is a comparison buyers can evaluate. "20% OFF" is a number they
> have to trust you about.

***

## 2. The drawer keeps the shopper in context

Opening a full-page cart takes the shopper out of the product they were looking at.
The drawer does not.

| Behaviour | Detail |
| - | - |
| **No page reload** | Add, update and remove all happen through Shopify's Ajax Cart API |
| **No scroll jump** | The page behind stays exactly where it was |
| **Header count updates** | Simultaneously, with the cart badge animating |
| **Focus is managed** | Focus moves into the drawer on open, and returns to the trigger on close |

> [!NOTE]
>
> The drawer is a proper modal dialog: `role="dialog"`, `aria-modal="true"`, a focus
> trap, and Escape to close. Keyboard and screen-reader users get the same experience
> as everyone else.

***

## 3. The upsell is the second sale

The upsell row sits at the bottom of the drawer, below the line items. It is the
highest-intent placement on the entire storefront: the shopper has already decided to
buy.

> [!WARNING]
>
> Upsell **complements**, not **supersedes**. The best upsells for premium hardware
> are accessories, extended warranty, or a second unit at the bulk price. Upselling
> your own more expensive product here is the fastest way to lose the first sale too.

### Configuring upsells

**1. Add the block**

In the Cart Drawer section, click **Add block → Upsell Product**.

**2. Choose the product**

Pick a real accessory or bundle.

**3. Write the line**

The heading and description appear directly under the button. Keep it to one
sentence.

***

## 4. Free-shipping progress

A thin bar that fills toward your free-shipping threshold.

| Setting | Notes |
| - | - |
| **Free shipping threshold** | In your store currency. `0` hides the bar |
| **Free shipping message** | The text shown when the threshold is met |

> [!WARNING]
>
> The threshold must match your actual shipping policy exactly. A progress bar that
> promises free shipping at a value your policy does not honour is a deceptive
> practice.

***

## 5. Discount codes

The cart drawer and cart page both accept discount codes, applied server-side by
Shopify. Invalid codes produce an inline error rather than a silent failure.

***

## 6. The checkout

The hand-off to Shopify's checkout is a standard form post. VARAHI does not intercept
it, and does not need to.

> [!NOTE]
>
> Everything you want to influence — cart contents, discount codes, shipping thresholds, gift cards — has to be in place **before** the hand-off. Shopify's
> checkout is not editable.

***

## Accessibility of the cart

> **Polite live-region announcements**
>
> Every cart change is announced without moving focus: *"1 item in cart"*, *"3 items
> in cart"*, *"Cart is empty"*. A screen-reader user knows what happened without
> losing their place.

> **Focus never gets lost**
>
> Opening the drawer moves focus into it. Closing it returns focus to the button
> that opened it. Tab cycles within the drawer while it is open.

> **Escape closes everything**
>
> The drawer, the search modal, the wishlist modal and the mobile menu all close
> with Escape.

> **Live regions are translated**
>
> The announcement strings are theme translation keys, not hard-coded English, so
> they are localised with the rest of the store.

***

> **[Cart drawer](https://varaahi.vritservicespro.com/sections/cart-drawer.md)**
>
> The section reference.

> **[Hero Product](https://varaahi.vritservicespro.com/sections/hero-product.md)**
>
> Where the bulk tier is configured.


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