Wishlist drawer

A slide-in panel rendered on every page of the store. The header’s heart opens it instead of navigating.

It renders only when Theme settings → Quick view & wishlist → Enable wishlist is on.

Section settings

None. Everything it needs comes from global settings and from the shopper’s own saved list.

Global setting	What it does here
Enable wishlist	Whether the drawer, the header heart and the card hearts exist at all
Wishlist page	Where the drawer’s View all button and the header heart’s href point. Defaults to /pages/wishlist

How saving works

Saved products are held by the shopper’s own browser, never leaving that device — which is why the same person sees an empty wishlist`. No account, no app, no server — so it works identically for guests and signed-in customers, and it is private to that browser.

Any [data-wl="<handle>"] control toggles membership. Those are:

• the heart on every product card
• the heart beside the add-to-cart button on the product page
• the heart on a card inside the wishlist drawer, which doubles as its remove control

Every heart on the page is repainted whenever the list changes — .on plus aria-pressed="true" — and the header’s count badge is updated and hidden at zero.

How rows are built

The drawer’s list is fetched when it opens, not rendered at page load:

• each saved handle is requested from /products/<handle>.js
• rows show up to 12 saved items
• the list is therefore always current, and a shopper who never opens the drawer pays nothing for it

Rows, not cards

A 440px panel is the wrong shape for the product grid the wishlist page uses, so the drawer renders compact rows with its own classes. It deliberately does not borrow the cart drawer’s .sdrawer-* rules, which belong to that section’s stylesheet and would break the moment the cart drawer was not on the page.

Pruning dead handles

A handle that no longer resolves used to be dropped from the view but left in storage: the header counted it forever, and the shopper could not clear it, because it was never drawn and so had nothing to press Remove on.

The drawer now prunes such a handle — but only on a definite 4xx, which is the product itself answering (deleted, unpublished, or renamed). A dropped connection or a 5xx never deletes someone’s saved pieces.

Empty state

Two lines of display type, a line of body copy and a button to the all-products collection. The View all footer button is hidden while the list is empty, because the wishlist page would be just as empty — the button in the body goes somewhere useful instead.

Without scripting

The header heart stays a real link to the wishlist page, so with scripting off it still goes somewhere useful rather than being a dead control.

Related

• Wishlist page — the full-page grid of saved pieces
• Cart drawer
• Header