Wishlist page
The full-page view of what a shopper has saved. The demo wires it to templates/page.wishlist.json, so it lives on a page whose handle is wishlist — which is also the default of the global Quick view & wishlist → Wishlist page setting.
Saved items are held by the shopper’s own browser, shared with the wishlist drawer and every heart in the theme — so the page works for guests and customers alike, with no account and no app.
Section settings
Section titled “Section settings”| Setting | Type | Default | What it does |
|---|---|---|---|
| Eyebrow | Text | Kept for later | Small accent line above the heading |
| Heading | Inline rich text | The <b>file</b> | The page heading |
| Columns | Range 2–5 | 4 | Columns in the grid |
| Top spacing | Range 0–160 px | 0 | Top spacing |
| Bottom spacing | Range 0–160 px | 0 | Bottom spacing |
How the grid is built
Section titled “How the grid is built”The page renders the theme’s real product card rather than hand-rolled rows, using the same trick as Recently viewed:
- The saved handles are turned into a search query —
handle:a OR handle:b … - The section re-fetches itself through
/search?…§ion_id=…, withoptions[unavailable_products]=last - The cards are rendered on the server, and the script lifts the cards out and lays them into the grid in saved order, newest first
The practical payoff: the wishlist looks exactly like every other product grid in the theme and inherits the badges, hover image swap, quick view, compare control and the heart — which doubles as the remove control, so there is no bespoke row UI to maintain.
On the re-fetch only the grid is lifted out; the masthead is rendered once by the real page load and never replaced. The subtitle gains a count, and the body is marked aria-live="polite" with aria-busy cleared once the grid lands.
Empty state
Section titled “Empty state”Held in a <template> in the markup and cloned in when there is nothing saved: two lines of display type, a line of copy and a button to the all-products collection.