Skip to main content

​
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

Cart drawer

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 for the full mechanics.
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.
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.
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.
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.
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

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.
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.
The drawer, the search modal, the wishlist modal and the mobile menu all close with Escape.
The announcement strings are theme translation keys, not hard-coded English, so they are localised with the rest of the store.

Cart drawer

The section reference.

Hero Product

Where the bulk tier is configured.