Shopify Wunschliste ohne App: 4 DIY-Methoden mit Code (2026)

Ja, du kannst eine Wunschliste zu Shopify ohne App hinzufügen — hier sind 4 funktionierende Methoden mit echtem Code, wo jede einzelne an ihre Grenzen stößt und wann sich eine App wirklich lohnt.

Sep
Sep
15
Read
8. Juni 2026
Shopify Wunschliste ohne App: 4 DIY-Methoden mit Code (2026)

Kurze Antwort: Ja, du kannst eine Wunschliste zu Shopify ohne App hinzufügen. Nein, Shopify liefert keine nativ mit. Und nein, die meisten DIY-Methoden überstehen keinen echten Shop im großen Maßstab — aber ein paar funktionieren gut, wenn du unter ein paar hundert Produkten hast und ein entwicklerfreundliches Theme nutzt.

Dieser Leitfaden zeigt dir jede funktionierende Methode, den tatsächlichen Code und eine ehrliche Einschätzung, wo jede an ihre Grenzen stößt. Am Ende weißt du, ob du die DIY-Version umsetzen oder dir den Ärger sparen solltest.

Hat Shopify eine eingebaute Wunschliste?

Nein. Stand 2026 enthält Shopify in keinem Plan eine Wunschlisten-Funktion — weder Basic noch Plus. Du baust sie entweder selbst oder installierst eine Drittanbieter-App.

Deshalb existiert dieses Keyword. Zehntausende Händler suchen monatlich nach “shopify wishlist without app” in der Hoffnung auf eine versteckte Einstellung. Die gibt es nicht. Aber es gibt vier vernünftige Wege, eine mit Liquid, JavaScript und metafields zu bauen — gehen wir sie durch.

Methode 1: localStorage-Wunschliste (die häufigste DIY-Variante)

Das ist die Methode, die 90 % aller “kostenlosen Wunschlisten”-Tutorials lehren. Du fügst einen Herz-Button zu deinen Produktkarten hinzu, speicherst Produktdaten im localStorage des Browsers und renderst eine Wunschlistenseite aus diesem gespeicherten Array.

Vorteile: Kein Login erforderlich. Funktioniert offline. Kein Backend. ~50 Zeilen Code.

Nachteile: Die Wunschliste lebt in einem Browser, auf einem Gerät. Wenn ein Käufer auf dem Handy speichert und am Desktop zurückkommt, ist seine Wunschliste leer. Cookies gelöscht? Weg. Browser gewechselt? Weg. Du kannst sie auch nicht per E-Mail benachrichtigen, wenn ein Artikel im Preis fällt oder wieder verfügbar ist — du hast keine Ahnung, wer sie sind.

Schritt 1 — Wunschlisten-Button zur Produktseite hinzufügen

Öffne deinen Theme-Code-Editor (Online Store → Themes → Edit code) und finde dein Produktvorlagen-Snippet (meist snippets/product-card.liquid oder innerhalb von sections/main-product.liquid). Füge das ein, wo das Herz erscheinen soll:

<button
  type="button"
  class="wishlist-btn"
  data-id="{{ product.id }}"
  data-handle="{{ product.handle }}"
  data-title="{{ product.title | escape }}"
  data-image="{{ product.featured_image | image_url: width: 400 }}"
  data-price="{{ product.price | money }}"
  aria-label="Add to wishlist">
  <span class="wishlist-icon">♡</span>
  <span class="wishlist-label">Save</span>
</button>

Schritt 2 — JavaScript einbinden

Füge das in assets/wishlist.js ein (Datei anlegen) und binde es aus theme.liquid mit {{ 'wishlist.js' | asset_url | script_tag }} ein:

(function () {
  const KEY = 'shopify_wishlist_v1';
  const read = () => JSON.parse(localStorage.getItem(KEY) || '[]');
  const write = (list) => localStorage.setItem(KEY, JSON.stringify(list));

  function syncButton(btn, list) {
    const inList = list.some(i => i.id === btn.dataset.id);
    btn.classList.toggle('in-wishlist', inList);
    btn.querySelector('.wishlist-icon').textContent = inList ? '♥' : '♡';
    btn.querySelector('.wishlist-label').textContent = inList ? 'Saved' : 'Save';
  }

  function updateCount() {
    const count = read().length;
    document.querySelectorAll('.wishlist-count').forEach(el => {
      el.textContent = count;
      el.hidden = count === 0;
    });
  }

  document.querySelectorAll('.wishlist-btn').forEach(btn => {
    syncButton(btn, read());

    btn.addEventListener('click', () => {
      let list = read();
      const exists = list.find(i => i.id === btn.dataset.id);
      if (exists) {
        list = list.filter(i => i.id !== btn.dataset.id);
      } else {
        list.push({
          id: btn.dataset.id,
          handle: btn.dataset.handle,
          title: btn.dataset.title,
          image: btn.dataset.image,
          price: btn.dataset.price,
          addedAt: Date.now()
        });
      }
      write(list);
      syncButton(btn, list);
      updateCount();
    });
  });

  updateCount();
})();

Schritt 3 — Die Wunschlistenseite bauen

Lege eine neue Seite unter Online Store → Pages mit dem Namen “Wishlist” und dem Handle wishlist an. Erstelle dann eine Vorlage templates/page.wishlist.liquid und weise sie dieser Seite zu:

{% layout 'theme' %}

<div class="page-width wishlist-page">
  <h1>Your wishlist</h1>
  <div id="wishlist-grid" class="wishlist-grid"></div>
  <p id="wishlist-empty" hidden>
    Your wishlist is empty.
    <a href="{{ routes.collections_url }}/all">Browse products</a>.
  </p>
</div>

<script>
  (function () {
    const list = JSON.parse(localStorage.getItem('shopify_wishlist_v1') || '[]');
    const grid = document.getElementById('wishlist-grid');
    const empty = document.getElementById('wishlist-empty');

    if (!list.length) { empty.hidden = false; return; }

    grid.innerHTML = list.map(item => `
      <article class="wishlist-card">
        <a href="/products/${item.handle}">
          <img src="${item.image}" alt="${item.title}" loading="lazy">
          <h3>${item.title}</h3>
          <p>${item.price}</p>
        </a>
        <button data-id="${item.id}" class="wishlist-remove">Remove</button>
      </article>
    `).join('');

    grid.addEventListener('click', e => {
      const btn = e.target.closest('.wishlist-remove');
      if (!btn) return;
      const next = JSON.parse(localStorage.getItem('shopify_wishlist_v1'))
        .filter(i => i.id !== btn.dataset.id);
      localStorage.setItem('shopify_wishlist_v1', JSON.stringify(next));
      btn.closest('.wishlist-card').remove();
      if (!next.length) { grid.innerHTML = ''; empty.hidden = false; }
    });
  })();
</script>

Das ist die vollständige localStorage-Wunschliste. Sie funktioniert. Sie hat aber auch eine Abbruchrate von 30–50 % bei geräteübergreifenden Käufern, keine Analytics, und du kannst niemandem eine E-Mail schicken, wenn etwas, das er wollte, in den Sale geht oder wieder verfügbar ist. Was zu Methode 2 führt.

Methode 2: Kunden-Metafelder (der “richtige” DIY-Ansatz)

Wenn deine Käufer Konten anlegen, kannst du die Wunschliste über metafields am Kundenobjekt speichern. Jetzt folgt die Wunschliste ihnen über Geräte hinweg, und du kannst sie technisch gesehen per E-Mail benachrichtigen — diese E-Mails zu versenden ist allerdings ein eigenes Problem.

Vorteile: Geräteübergreifende Synchronisierung. Echte Daten, die du abfragen kannst. Übersteht Browser-Löschungen.

Nachteile: Erfordert, dass sich der Kunde einloggt (sofortiger Abbruch von 60–80 % im Vergleich zu anonym). Das Schreiben in metafields vom Storefront aus benötigt die Storefront API mit einem Customer Access Token oder einen App Proxy + eine kleine serverless Function. Es gibt keine Copy-Paste-Lösung — du verpflichtest dich zu Entwicklungsarbeit.

Metafeld einrichten

Gehe zu Settings → Custom data → Customers → Add definition:

  • Namespace und Key: custom.wishlist
  • Typ: JSON
  • Zugriff: Storefront read + write

Wunschlisten-Status in Liquid anzeigen

{% if customer %}
  {% assign wishlist_raw = customer.metafields.custom.wishlist.value | default: '[]' %}
  {% assign wishlist = wishlist_raw | parse_json %}

  <button
    class="wishlist-btn-meta"
    data-id="{{ product.id }}"
    data-customer="{{ customer.id }}">
    {% if wishlist contains product.id %}♥ Saved{% else %}♡ Save{% endif %}
  </button>
{% else %}
  <a href="{{ routes.account_login_url }}?return_url={{ request.path }}"
     class="wishlist-btn-logged-out">♡ Log in to save</a>
{% endif %}

In das Metafeld schreiben

Hier wird es hässlich. Die Storefront API erlaubt es nicht, customer.metafields direkt aus anonymem JS heraus zu mutieren — du brauchst einen Customer Access Token oder einen authentifizierten App Proxy. Ein minimaler App-Proxy-Handler (Node.js, deployt auf Vercel/Cloudflare Workers) sieht so aus:

// /api/wishlist-toggle  (Shopify App Proxy)
export default async function handler(req) {
  const { customerId, productId } = await req.json();

  const query = `
    mutation updateWishlist($id: ID!, $value: String!) {
      customerUpdate(input: {
        id: $id,
        metafields: [{
          namespace: "custom",
          key: "wishlist",
          type: "json",
          value: $value
        }]
      }) {
        customer { id }
        userErrors { message }
      }
    }
  `;

  // 1. Fetch current list
  // 2. Toggle productId
  // 3. Send mutation to Admin API
  // 4. Return new state
}

Die vollständige Implementierung umfasst rund 200 Zeilen, sobald du Auth, Fehlerzustände und Rate Limiting abdeckst. Realistische Entwicklungszeit für einen Entwickler, der das zum ersten Mal macht: 1–2 Tage. Für jemanden mit Erfahrung: 2–3 Stunden.

Methode 3: Versteckter Warenkorb mit Line-Item-Properties (für später speichern)

Manche Tutorials schlagen vor, den Warenkorb zu missbrauchen, indem Wunschlisten-Artikel mit Menge 0 oder mit einer benutzerdefinierten Eigenschaft wie _wishlist: true hinzugefügt werden. Tu das nicht. Es zerstört die Warenkorb-Berechnung, verwirrt den Checkout, und die meisten Themes rendern die Artikel trotzdem. Ich erwähne es nur, damit du es erkennst und vermeidest, wenn es auf Reddit vorgeschlagen wird.

Die einzige halbwegs vertretbare Variante: ein separates “Saved for later”-Cart-Attribut, das du außerhalb des Hauptwarenkorbs renderst, etwa so:

<!-- in cart.liquid -->
{% assign saved = cart.attributes.saved_items | split: ',' %}
{% if saved.size > 0 %}
  <div class="saved-for-later">
    <h2>Saved for later</h2>
    {% for handle in saved %}
      {% assign p = all_products[handle] %}
      <a href="/products/{{ p.handle }}">{{ p.title }} — {{ p.price | money }}</a>
    {% endfor %}
  </div>
{% endif %}

Es ist eine halbe Sache. Cart-Attribute verschwinden, wenn der Warenkorb geleert wird. Überspringen.

Methode 4: Teilbare URL-Wunschliste (der Social-Hack)

Das ist keine echte Wunschliste — eher ein “Teile deine Favoriten”-Link. Du baust eine Liste clientseitig auf und kodierst sie dann in eine URL, die der Käufer teilen oder als Lesezeichen speichern kann.

// Build a share URL from the localStorage list
function getShareUrl() {
  const ids = JSON.parse(localStorage.getItem('shopify_wishlist_v1') || '[]')
    .map(i => i.id)
    .join(',');
  return `${location.origin}/pages/wishlist?items=${ids}`;
}

// On the wishlist page, hydrate from ?items=
const params = new URLSearchParams(location.search);
if (params.get('items')) {
  const ids = params.get('items').split(',');
  // Fetch each /products/{id}.js and render
  Promise.all(ids.map(id =>
    fetch(`/products/${id}.js`).then(r => r.json())
  )).then(renderWishlist);
}

Nützlich als Ergänzung zu Methode 1 — gibt Käufern eine Möglichkeit, Listen mit Freunden zu teilen oder sich selbst zu schicken. Aber keine eigenständige Wunschliste.

Das ehrliche Fazit: Wann DIY in Ordnung ist und wann es bricht

DIY funktioniert, wenn du alle vier Punkte mit ja beantworten kannst:

  1. Dein Shop hat weniger als ~500 SKUs (damit die manuelle Pflege machbar bleibt).
  2. Dir ist geräteübergreifende Synchronisierung egal (oder du erzwingst ohnehin Kundenkonten).
  3. Du planst nicht, Kunden zu benachrichtigen, wenn Wunschlisten-Artikel in den Sale gehen oder wieder verfügbar sind.
  4. Du hast entweder einen Entwickler im Team oder bearbeitest selbst gerne Liquid.

DIY bricht in dem Moment, in dem du Folgendes willst:

  • Einem Kunden eine “dein Wunschlisten-Artikel ist wieder verfügbar”-E-Mail schicken — du hast keine Ahnung, wem der localStorage-Eintrag gehört.
  • Verlassene Wunschlisten per SMS oder E-Mail zurückgewinnen — gleiches Problem.
  • Wunschlisten-Conversion in den Analytics anzeigen — du kannst GA4-Events feuern, aber ohne Backend-Arbeit kannst du sie nicht mit Umsatz verknüpfen.
  • Gäste speichern lassen, ohne zur Kontoerstellung zu zwingen, und die Liste später beim Login mit ihrer E-Mail synchronisieren.
  • Es an einen nicht-technischen Marketer übergeben, der es verwaltet.

Das sind keine theoretischen Einschränkungen. Das sind die Gründe, warum die meisten Shops, die mit einer DIY-Wunschliste starten, innerhalb von 6 Monaten zu einer App wechseln.

Was eine DIY-Wunschliste tatsächlich kostet (ehrlich gesagt)

Leute suchen nach “ohne App”, weil sie annehmen, die App sei die teure Variante. Schauen wir mal nach.

Ein Entwickler baut die localStorage-Version: 2–4 Stunden. Bei 75 $/Std. sind das 150–300 $, plus null laufende Kosten. Vertretbar.

Ein Entwickler baut die Metafeld-Version mit E-Mail-Triggern: 8–16 Stunden. 600–1.200 $, plus ein Klaviyo oder Ähnliches, um die E-Mails tatsächlich zu versenden (20–45 $/Monat). Plus Wartung bei jedem Theme-Update oder wenn Shopify seine Checkout-Erweiterungen ändert.

Eine separate Wunschlisten-App + eine separate Back-in-Stock-App + eine separate Vorbestell-App: typischerweise 15–25 $/Monat pro Stück. Also 45–75 $/Monat für die drei Funktionen.

Eine kombinierte App: eine Rechnung.

Oder: alle drei in einer App, mit kostenlosem Plan

Offenlegung — wir entwickeln Notify Me! und haben es genau deshalb gebaut, weil die meisten Shops Wunschliste + Back-in-Stock + Vorbestellung zusammen brauchen. Kunden speichern ein Produkt → es geht aus dem Lager → sie werden benachrichtigt → falls es nie zurückkommt, bietest du eine Vorbestellung an. Drei Funktionen, die zusammengehören.

Wie das Setup tatsächlich aussieht

Du aktivierst Funktionen pro Seite (Produkt, Kollektion, Startseite) im Dashboard — kein Theme-Code, der gepflegt werden muss:

Notify Me! Shopify-Wunschlisten-App-Dashboard mit aktiviertem Gastmodus, Steuerung zum Ausschließen bestimmter Varianten und Sichtbarkeits-Toggles für Produktseite, Kollektionsseite und Startseite Der Wunschlisten-Bildschirm in Notify Me! — der Gastmodus ist standardmäßig aktiv und die Wunschliste wird in dem Moment mit dem Kundenkonto verknüpft, in dem sich der Kunde einloggt. Keine Code-Änderungen erforderlich.

Produktseiten-Button — voll anpassbar

Wähle ein Herz-, Lesezeichen- oder Stern-Icon. Bearbeite die Labels beider Zustände. Das Widget wird inline neben deinem Add-to-Cart-Button gerendert:

Shopify-Wunschlisten-Button-Anpassung in Notify Me! mit Herz-, Lesezeichen- und Stern-Icon-Optionen, benutzerdefinierten Button-Labels 'Add to wishlist' und 'It''s in wishlist' und einer Live-Produktseiten-Vorschau mit einem LuxeCraft-Becher Einstellungen des Produktseiten-Buttons — lege die Vorher-/Nachher-Labels, das Icon und den Stil fest, ohne Liquid anzufassen.

Kollektionsseiten-Widget — funktioniert auf jeder Karte

Wo DIY-Methoden am meisten kämpfen: einen funktionierenden Speichern-Button auf jede Kollektionsseiten-Kachel zu bekommen. Die App löst das über einen einzigen Toggle:

Shopify-Kollektionsseiten-Wunschlisten-Buttons mit Stern-Icons oben rechts auf Produktkarten in einer Notify Me!-Widget-Vorschau Kollektionsseiten-Widget — wähle Icon, Position und Anzeigestil. Wird automatisch auf jeder Produktkarte gerendert.

Preise (jährliche Abrechnung)

PlanPreisWunschlisten-AktionenBack-in-Stock-BenachrichtigungenVorbestellungen
LiteKostenlos50 lebenslang100 lebenslang5 lebenslang
Starter15,92 $/Monat24.000/Jahr6.000/Jahr6.000/Jahr
Standard31,92 $/Monat120.000/Jahr18.000/Jahr18.000/Jahr
Rocket55,92 $/Monat300.000/Jahr60.000/Jahr120.000/Jahr
Plus399,92 $/MonatUnbegrenztUnbegrenztUnbegrenzt

Alle Plan-Details auf der Preisseite. Den kostenlosen Lite-Plan gibt es, damit du es tatsächlich in deinem Shop testen kannst, bevor du etwas zahlst. Die meisten Shops bleiben langfristig auf Starter — 15,92 $/Monat ersetzen drei Apps, die du sonst separat installieren müsstest.

Funktionen, die die DIY-Versionen oben nicht bieten können:

  • Gastmodus (kein erzwungener Login) — Wunschliste wird beim ersten Login automatisch mit dem Konto verknüpft
  • Mehrere benannte Listen pro Kunde
  • Wunschlisten-Widgets auf Startseite, Kollektions- und Produktseiten
  • Automatische E-Mail- und SMS-Trigger bei Preisreduzierungen, niedrigem Lagerbestand und Wiederverfügbarkeit
  • Eingebaute Vorbestell-Buttons und Teilzahlungen
  • Vollständige Liquid-Anpassung passend zu deinem Theme
  • B2B- und DTC-Unterstützung von Haus aus

Kostenlos im Shopify App Store starten →

FAQ

Kann man eine Wunschliste ohne Code zu Shopify hinzufügen?

Nicht ohne eine App. Jede No-Code-Methode erfordert entweder die Installation einer Wunschlisten-App oder das Einfügen von Code in dein Theme. Es gibt keinen nativen Toggle.

Gibt es eine kostenlose Shopify-Wunschliste?

Ja, ein paar. Die oben beschriebene localStorage-Methode ist kostenlos, wenn du sie selbst baust. App-seitig ist der Lite-Plan von Notify Me kostenlos bis zu 50 Wunschlisten-Aktionen lebenslang, was ausreicht, um zu validieren, dass Kunden die Funktion in deinem Shop tatsächlich nutzen, bevor du für einen höheren Plan bezahlst.

Hat Shopify 2.0 eine Wunschliste?

Nein. Online Store 2.0 ist die Theme-Architektur (Sections, Blocks, App Blocks) — sie fügt keine Wunschlisten-Funktion hinzu. Sie macht das Installieren einer Wunschlisten-App über App Blocks sauberer, weshalb die meisten modernen Wunschlisten-Apps sich in Sekunden in 2.0-Themes einbetten.

Kann ich eine Wunschliste nur mit Liquid hinzufügen?

Teilweise. Liquid kann eine Wunschliste anzeigen, wenn die Daten in einem Kunden-Metafeld liegen, aber Liquid kann nicht aus dem Storefront heraus in metafields schreiben. Du brauchst JavaScript und entweder die Storefront API oder einen App Proxy, um Artikel zu speichern.

Wie füge ich eine Wunschliste zu einer Shopify-Produktseite ohne App hinzu?

Verwende Methode 1 oben: Füge das Wunschlisten-Button-Snippet in deine Produktvorlage ein, lege wishlist.js zu deinen Theme-Assets, und erstelle eine Wunschlistenseite aus templates/page.wishlist.liquid. Der vollständige Code befindet sich in diesem Leitfaden.

Erhöht eine Wunschliste tatsächlich die Conversion?

Ja — Speichern signalisiert echte Kaufabsicht, und Käufer, die eine Wunschliste nutzen, konvertieren typischerweise zu deutlich höheren Raten als reine Browser. Der größere Hebel kommt davon, Wunschlisten-Inhabern eine E-Mail zu schicken, wenn ein Artikel in den Sale geht oder wieder verfügbar ist — und genau hier scheitern DIY-Methoden.

Was passiert mit einer localStorage-Wunschliste, wenn der Kunde Cookies löscht?

Sie ist dauerhaft gelöscht. Kein Backup, keine Wiederherstellung. Das ist der einzige größte Grund, warum Shops aus dem DIY-Ansatz herauswachsen.

Kann eine Wunschliste Back-in-Stock-E-Mails auslösen?

Nur, wenn du die Wunschliste mit einer Kunden-E-Mail verknüpfst. localStorage kann das nicht. Kunden-Metafelder schon, aber du brauchst immer noch ein Backend, das Bestandsänderungen erkennt und die E-Mail sendet. Eine App, die beides macht — wie Notify Me! — erspart dir diese Arbeit komplett.

Was ist der Unterschied zwischen einer Wunschliste und einer Warteliste?

Eine Wunschliste ist eine kuratierte Liste von Produkten, an die sich ein Käufer erinnern möchte; eine Warteliste ist eine Schlange für ein Produkt, das vorübergehend nicht auf Lager oder vor dem Launch ist. Wunschlisten sind offen; Wartelisten sind durch Lagerbestand oder Release-Datum zeitlich begrenzt. Die meisten Shops wollen irgendwann beides.

Ist es besser, “Continue Selling When Out of Stock” oder eine Wunschliste zu verwenden?

Anderes Problem. “Continue Selling When Out of Stock” erlaubt es dir, Bestellungen für nicht verfügbaren Bestand anzunehmen (im Grunde eine Vorbestellung). Eine Wunschliste lässt Käufer Artikel speichern, ohne sich festzulegen. Wenn du Nachfrage nach einem nicht verfügbaren Produkt einfangen willst, willst du normalerweise beides — eine Wunschliste, um Interesse zu sammeln, und eine Vorbestelloption für Käufer, die jetzt bereit sind zu kaufen.


Zuletzt aktualisiert: Juni 2026. Geschrieben für Shopify-Themes auf Online Store 2.0. Wenn dein Theme älter ist (vintage), unterscheiden sich die Liquid-Pfade leicht — das JavaScript ist identisch.

Install or Regret!

Stores using Notify Me! have generated Millions in Revenue. Join the club:
Start Free

Bereit, NotifyMe's zu platzieren E-Mail-Expertise auf die Probe gestellt?

Nutzen Sie die Optionen „Auf Lager“, „Low Stock“ und „Vorbestellung“, um Umsatz zu generieren, wenn Ihr Lagerbestand niedrig oder ausverkauft ist!
Jetzt installieren