Wishlist page

How to install on your store

1. 1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2. 2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.
3. 3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.
4. 4Open the theme editor, add the section to a template, and replace the example values using the section settings.
5. 5Preview the storefront and test it on a phone-sized screen before publishing.
6. 6Create a Page (Online Store > Pages), assign it to a template, add this section, then link the page in your navigation as 'Wishlist'.
7. 7Pair with the wishlist-button snippet on product pages - they share the same saved list.

1<gpl-wishlist class="gpl-wlist" data-empty="{{ section.settings.empty | escape }}">2  <h2 class="gpl-wlist__heading">{{ section.settings.heading | default: 'My wishlist' }}</h2>3  <div class="gpl-wlist__grid" data-grid><p class="gpl-wlist__loading">Loading saved items…</p></div>4</gpl-wishlist>5 6{% schema %}7{8  "name": "Wishlist page",9  "settings": [10    { "type": "text", "id": "heading", "label": "Heading", "default": "My wishlist" },11    { "type": "text", "id": "empty", "label": "Empty message", "default": "Nothing saved yet - tap the heart on any product." }12  ],13  "presets": [{ "name": "Wishlist page" }]14}