Cart (drawer + page)

The cart is two surfaces that read as one system: a slide-out cart drawer (opens when a shopper adds a product or taps the cart icon) and the full cart page at /cart. Both render the same line items and the same summary — the drawer is for quick confirmation and checkout, the page is for reviewing a bigger order, adding an order note, or filling in delivery details.

Every preset ships the same anatomy with its own signature treatment: a single seam separating the items from the totals — Uisce's luminous waterline, Gaoth's wind-trail streak, Talamh's soil-strata horizon, Tine's molten heat-glow, Neart's vital-pulse line — plus its own capsule, stepper and checkout-button language.

Choosing drawer or page

Theme settings → Cart → Cart type controls what happens when a shopper adds to cart:

• Cart drawer (default) — adding a product opens the slide-out drawer, and the header cart icon opens it too.
• Page — the drawer is disabled entirely. Adding a product takes the shopper straight to the cart page, and the header cart icon links to /cart. Use this when orders need careful review before checkout (large configurable orders, services, trade accounts).

Nothing else needs configuring: the header, the product forms and the cart icon all follow this one setting.

Where each setting lives

The drawer and the cart page are two separate sections, so each one carries its own copy of the settings that apply to it. Setting the free-shipping threshold on the cart page does not set it in the drawer, and vice versa — check both if you want them to match.

• Cart page — Theme editor → the /cart template → Cart.
• Cart drawer — Theme editor → Header group → Cart drawer. The drawer never appears on the editor canvas (it only exists once a shopper opens it), so open it from the storefront preview to see your changes.

Settings

Both surfaces

Setting	What it does
Color scheme	The surface's colors. The drawer uses one scheme for the whole panel, so background, text and buttons always pair correctly in light and dark mode.
Empty cart → Heading / Text / Button label / Button link	The designed empty state. Leave the text or button fields blank to fall back to the theme's translated defaults ("Your cart is empty" / "Continue shopping"); a blank heading simply doesn't show. Fill them to speak in your store's voice.
Highlight metafield	Shows one product metafield as a small capsule under each line item — a turnaround time, a pet type, a sowing season. Enter it as namespace.key (for example uisce.turnaround_time). Products with no value in that metafield show no capsule.
Show free shipping progress bar / Free shipping threshold	A progress bar toward free shipping with a text message ("Add €18 more for free shipping"). The threshold is read in your shop's base currency.
Delivery date picker (+ earliest / latest / blackout dates / require)	An optional delivery-date field saved as a cart attribute. Blackout dates are rejected inline and block checkout while invalid.
Policy acknowledgement	A consent checkbox rendered directly above the checkout button, so a shopper reads it before acting rather than after being refused. Off by default: the block's own Required setting decides whether ticking it is mandatory, and switching both on gates checkout. Its position is fixed — the cart dispatches it as a static slot so it cannot end up below the button it gates.
Marketing consent (+ label / default checked)	An optional opt-in checkbox saved as a cart attribute. Once a shopper answers, their answer wins over the default on every reload.
Gift wrapping (+ Gift wrap product)	An optional gift-wrap checkbox saved as a cart attribute. Pick a Gift wrap product and its price is shown beside the checkbox and added to the cart as a line item, so the shopper is charged what the page advertises. Leave it empty to offer wrapping free.
Product recommendations (+ source / fallback collection / count)	Cross-sell cards below the items (page) or above the checkout button (drawer). The source cascades: per-product metafield handles → Shopify's Recommendations API → your fallback collection.

The Fallback collection picker stays visible even when recommendations are switched off — Shopify does not allow a collection picker to be hidden conditionally. It has no effect while recommendations are off.

Cart page only

Setting	What it does
Order note maximum length	Character limit for the order-note field, with a live counter. Default 500.
SMS consent checkbox	A second opt-in checkbox saved as a cart attribute. There is no separate label setting for this one.

The drawer has no order-note field: notes belong on the page, where there is room to write one.

What each line item shows

In order, under the product image:

1. Product title, linking to the product.
2. Variant and subscription plan, when the line has them.
3. Line item properties — anything the shopper filled in on the product page or an app added to the line. Shopify's own gift-card "send as a gift" fields (recipient email, name, message, send date) show here, as does engraving or personalisation text. Property names starting with _ are private plumbing and are never shown; a property the shopper left blank is not shown either. A file upload shows as a link named after the file.
4. The highlight capsule, when you have set Highlight metafield and the product has a value.
5. Price, plus the discounted price and the name of each discount that applies to that line (for example "Trade account (−€12.00)").
6. Quantity stepper and Remove, both 44 × 44 px targets.

Cart-level discounts, the subtotal, and taxes/shipping wording live in the summary. Every one of these is plain text, so they stay readable in every color scheme, in dark mode and at any contrast setting — nothing in the cart is marked by color alone.

Per-line blocks (cart page)

On the cart page you can add per-line blocks in the theme editor: service location input, pet-type indicator, seasonal availability hint, spec summary, subscription cadence preview, dietary tags, bulk quantity shortcuts. They render under each line item. Section-level blocks — purchase reassurance, policy acknowledgement, custom Liquid, cart attribute, bulk shipping notice — render in the sidebar.

Drawer note: the drawer supports the capsule via the Highlight metafield setting, not per-line editor blocks. Shopify does not reliably carry theme-block instances into header-group sections, so a per-line block placed there never reaches the rendered drawer. Use per-line blocks on the cart page; use the Highlight metafield when you want the same signal in the drawer.

Data you need

For	You need
Highlight capsule	A product metafield with a value, referenced as namespace.key. Text metafields work best; a blank value shows nothing.
Recommendation cascade	Either a uisce_cart.cross_sells product metafield holding product handles, Shopify's recommendations, or a collection.
Named line discounts	An automatic or code discount that targets specific products — Shopify supplies the name; the theme only displays it.
Free shipping bar	A shipping rate that is genuinely free above your threshold. The bar is a display; it does not create the rate.
Gift wrap product	A product you create for wrapping. Ticking the box adds it to the cart; unticking removes it.

Common questions

Why doesn't the drawer open when I click the cart icon? Check Theme settings → Cart → Cart type. If it is set to Page, the icon deliberately navigates to /cart. The drawer's script also loads only on the first interaction, so on a very slow connection the first click can take a moment — and if the script cannot load at all, the click falls back to /cart rather than doing nothing.

Why is my Highlight metafield capsule not showing? The value must be namespace.key exactly (one dot), and the product needs a value in that metafield. Products without it show no capsule — that is by design, not an error. Remember to set it on both the cart page and the cart drawer if you want it in both places.

I set a gift-wrap product / delivery lead time and the drawer ignores it. Set it on the drawer too. The drawer is its own section with its own settings — Header group → Cart drawer. (Before theme version 06.16-77 the drawer could not carry these at all; if you are upgrading, re-check the drawer's settings.)

A shopper unticked marketing consent and it came back ticked. It no longer does. The checkbox reads the answer stored on the cart first, and falls back to your Checked by default setting only when the shopper has not answered yet.

Where do discount names show? Discounts that apply to a specific line show their name under that line's price. Cart-level discounts show in the summary as a chip and as a named row in the totals. The theme has no discount-code field — Shopify's Theme Store requirements prohibit one — so shoppers enter codes at checkout, or arrive with one already applied through a /discount/CODE link; the cart displays whatever Shopify has applied.

Does the drawer slow my pages down? No. The drawer's script and stylesheet load only when a shopper first interacts with the cart — hovering or clicking the cart icon, or adding a product. Before that they cost nothing on every page.

What happens with JavaScript disabled? The cart icon is a normal link to /cart, the add-to-cart form submits natively, and quantity edits on the cart page work through a standard form post. Shoppers land on the cart page and can check out.

Does the cart work with a screen reader and a keyboard? Yes. The drawer is a modal dialog with a focus trap; Escape closes it and focus returns to the cart icon. Quantity, remove and checkout controls are all 44 × 44 px or larger, every state has a text equivalent, and quantity or removal changes are announced politely. Motion is disabled under "reduce motion".