Cart

The cart is the bag everywhere in Ribbon. Adding to the bag opens the cart drawer, "Your bag (3)", which glides in from the side of the screen, and the bag's count bubble in the header updates. A size pill on a card, in Shop the look or in Wear it with adds that size straight away. The drawer and the cart page show the same things:

• The free-shipping bar ("$18.00 away from free shipping", then "Free shipping unlocked") when Theme settings › Commerce › Free shipping over is above 0 and the shopper is shopping in your store's currency.
• Each line with its photo, its options ("Champagne · S"), any subscription plan and line properties (such as "Pre-order"), a quantity stepper, Remove and the line price.
• In the drawer only, the Wear it with box: one pairing for the first item in the bag (chapter 10).
• The order note (Shopify's own note field, "Order note"), discounts, the subtotal in large serif figures, "Tax and shipping calculated at checkout." (or "Tax included. Shipping calculated at checkout."), the Check out button, accelerated checkout buttons, and View bag in the drawer.
• Empty: "Your bag is empty" and "Start with something soft." with a button back to the shop.

Quantity changes and removals update the bag in place, and B2B quantity rules are checked as shoppers change quantities. Apps that change the cart are picked up too, and screen readers hear "Added to your bag." and "Bag updated." The note arrives as the order's Notes in admin.