Shopify wishlist without an app — the complete code

The heart button. Drop it into any product card or the product page.

{%- comment -%}
  Wishlist button — no app, no backend.
  Usage:  {% render 'wishlist-button', product: product %}
{%- endcomment -%}

<button
  type="button"
  class="wl-btn"
  data-wl-handle="{{ product.handle }}"
  data-wl-id="{{ product.id }}"
  aria-label="Add {{ product.title | escape }} to wishlist"
  aria-pressed="false"
>
  <svg class="wl-icon" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
    <path d="M12 21s-7.5-4.6-9.6-8.6C.6 9.1 2.2 5.5 5.6 4.7c2-.5 3.9.3 5 1.8l1.4 1.9 1.4-1.9c1.1-1.5 3-2.3 5-1.8 3.4.8 5 4.4 3.2 7.7C19.5 16.4 12 21 12 21z"
          fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
  </svg>
</button>

All the logic: saves handles to localStorage, keeps every heart on the page in sync, updates the header count.

(function () {
  'use strict';
  var KEY = 'shopify_wishlist';

  function read() {
    try { return JSON.parse(localStorage.getItem(KEY)) || []; }
    catch (e) { return []; }
  }
  function write(list) {
    localStorage.setItem(KEY, JSON.stringify(list));
    // Same-tab listeners (the storage event only fires in OTHER tabs).
    document.dispatchEvent(new CustomEvent('wishlist:change', { detail: list }));
  }

  function toggle(handle) {
    var list = read();
    var i = list.indexOf(handle);
    if (i > -1) list.splice(i, 1); else list.push(handle);
    write(list);
    return i === -1; // true = it was just added
  }

  function paintOne(btn, list) {
    var on = list.indexOf(btn.dataset.wlHandle) > -1;
    btn.classList.toggle('is-active', on);
    btn.setAttribute('aria-pressed', on ? 'true' : 'false');
  }

  function paintAll() {
    var list = read();
    document.querySelectorAll('.wl-btn').forEach(function (b) { paintOne(b, list); });
    document.querySelectorAll('[data-wl-count]').forEach(function (el) {
      el.textContent = list.length;
      el.hidden = list.length === 0;
    });
  }

  // Delegated, so buttons added later (quick view, infinite scroll, section
  // re-render after a theme-editor change) work without re-binding.
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.wl-btn');
    if (!btn) return;
    e.preventDefault();
    toggle(btn.dataset.wlHandle);
    paintAll();
  });

  document.addEventListener('wishlist:change', paintAll);
  window.addEventListener('storage', function (e) { if (e.key === KEY) paintAll(); });
  document.addEventListener('DOMContentLoaded', paintAll);
  // Shopify fires this after a section re-renders in the theme editor.
  document.addEventListener('shopify:section:load', paintAll);
})();

Minimal styling. Uses currentColor so it inherits your theme.

.wl-btn {
  background: none;
  border: 0;
  padding: 6px;
  line-height: 0;
  cursor: pointer;
  color: inherit;
  transition: transform .15s ease;
}
.wl-btn:hover { transform: scale(1.12); }
.wl-btn.is-active .wl-icon path { fill: currentColor; }

.wl-count[hidden] { display: none; }
.wl-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  background: currentColor;
}

.wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
}
.wl-empty { padding: 48px 0; text-align: center; opacity: .7; }

The wishlist page itself. Reads the saved handles and pulls live product data from Shopify's own /products/{handle}.js — so price and availability are never stale.

<div class="page-width">
  <h1>{{ section.settings.heading | default: 'Your wishlist' }}</h1>
  <div class="wl-grid" id="wl-grid"></div>
  <p class="wl-empty" id="wl-empty" hidden>
    Nothing saved yet. Tap the heart on any product to add it here.
  </p>
</div>

<script>
(function () {
  var grid  = document.getElementById('wl-grid');
  var empty = document.getElementById('wl-empty');
  var money = {{ shop.money_format | json }};

  function fmt(cents) {
    return money.replace(/\{\{\s*amount\s*\}\}/, (cents / 100).toFixed(2));
  }

  async function render() {
    var handles = [];
    try { handles = JSON.parse(localStorage.getItem('shopify_wishlist')) || []; } catch (e) {}
    grid.innerHTML = '';
    empty.hidden = handles.length > 0;

    for (const handle of handles) {
      try {
        // Public JSON for any product. No API key, no app.
        const res = await fetch('/products/' + handle + '.js');
        if (!res.ok) continue;            // product deleted or unpublished
        const p = await res.json();
        const img = p.featured_image || (p.images && p.images[0]) || '';
        const card = document.createElement('div');
        card.className = 'wl-card';
        card.innerHTML =
          '<a href="/products/' + p.handle + '">' +
            (img ? '<img src="' + img + '&width=400" alt="" loading="lazy" width="400">' : '') +
            '<h3>' + p.title + '</h3>' +
          '</a>' +
          '<p>' + fmt(p.price) + '</p>' +
          '<button class="wl-btn is-active" data-wl-handle="' + p.handle + '" aria-pressed="true">Remove</button>';
        grid.appendChild(card);
      } catch (e) { /* skip this one, keep rendering the rest */ }
    }
  }

  document.addEventListener('DOMContentLoaded', render);
  document.addEventListener('wishlist:change', render);
})();
</script>

{% schema %}
{
  "name": "Wishlist page",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Your wishlist" }
  ],
  "presets": [{ "name": "Wishlist page" }]
}
{% endschema %}

Optional. The little counter for your header.

<a href="/pages/wishlist" class="wl-link" aria-label="Wishlist">
  Wishlist <span class="wl-count" data-wl-count hidden>0</span>
</a>