Réponse courte : oui, vous pouvez ajouter une wishlist à Shopify sans application. Non, Shopify n’en fournit pas nativement. Et non, la plupart des méthodes DIY ne tiendront pas la route sur une vraie boutique à grande échelle — mais deux d’entre elles fonctionnent très bien si vous avez moins de quelques centaines de produits et un thème accessible aux développeurs.

Ce guide vous donne chaque méthode qui fonctionne, le vrai code, et un avis honnête sur l’endroit où chacune flanche. À la fin, vous saurez si vous devez déployer la version DIY ou éviter le casse-tête.

Shopify dispose-t-il d’une wishlist intégrée ?

Non. En 2026, Shopify n’inclut toujours pas de fonctionnalité de wishlist dans aucun plan — ni Basic, ni Plus. Soit vous la construisez vous-même, soit vous installez une application tierce.

C’est pour cela que ce mot-clé existe. Des dizaines de milliers de marchands recherchent chaque mois « shopify wishlist without app » en espérant un réglage caché. Il n’y en a pas. Mais il existe quatre façons raisonnables d’en construire une avec Liquid, JavaScript et des metafields — passons-les en revue.

Méthode 1 : wishlist en localStorage (le DIY le plus courant)

C’est la méthode enseignée par 90 % des tutoriels « wishlist gratuite ». Vous ajoutez un bouton cœur à vos fiches produit, enregistrez les données du produit dans le localStorage du navigateur, puis affichez une page wishlist à partir de ce tableau stocké.

Avantages : Aucune connexion requise. Fonctionne hors ligne. Aucun backend. ~50 lignes de code.

Inconvénients : La wishlist vit dans un seul navigateur, sur un seul appareil. Si un acheteur enregistre sur mobile et revient sur desktop, sa wishlist est vide. Cookies effacés ? Disparue. Changement de navigateur ? Disparue. Vous ne pouvez pas non plus leur envoyer d’email lorsqu’un article baisse de prix ou est réapprovisionné — vous ne savez pas qui ils sont.

Étape 1 — Ajouter un bouton wishlist sur votre page produit

Ouvrez l’éditeur de code de votre thème (Online Store → Themes → Edit code) et trouvez le snippet de votre template produit (généralement snippets/product-card.liquid ou à l’intérieur de sections/main-product.liquid). Insérez ceci là où vous voulez le cœur :

<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>

Étape 2 — Brancher le JavaScript

Ajoutez ceci à assets/wishlist.js (créez le fichier) et incluez-le depuis theme.liquid avec {{ 'wishlist.js' | asset_url | script_tag }} :

(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();
})();

Étape 3 — Construire la page wishlist

Créez une nouvelle page dans Online Store → Pages appelée « Wishlist » avec le handle wishlist. Ensuite, créez un template templates/page.wishlist.liquid et assignez-le à cette page :

{% 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>

Voilà la wishlist en localStorage complète. Ça fonctionne. Ça a aussi un taux d’abandon de 30 à 50 % pour les acheteurs multi-appareils, aucune analytique, et vous ne pouvez envoyer d’email à personne lorsqu’un article qu’ils voulaient passe en promotion ou est réapprovisionné. Ce qui mène à la méthode 2.

Méthode 2 : metafields client (l’approche DIY « propre »)

Si vos acheteurs créent des comptes, vous pouvez stocker la wishlist sur l’objet client via les metafields. La wishlist les suit désormais d’un appareil à l’autre, et vous pouvez techniquement leur envoyer des emails — bien que l’envoi de ces emails soit un autre problème.

Avantages : Synchronisation entre appareils. De vraies données interrogeables. Survit aux effacements de navigateur.

Inconvénients : Nécessite que le client se connecte (abandon immédiat de 60 à 80 % par rapport à l’anonyme). Écrire dans les metafields depuis le storefront nécessite la Storefront API avec un jeton d’accès client, ou un App Proxy + une petite fonction serverless. Il n’y a pas de solution copier-coller — vous vous engagez dans du dev.

Configurer le metafield

Allez dans Settings → Custom data → Customers → Add definition :

• Namespace et clé : custom.wishlist
• Type : JSON
• Accès : lecture + écriture Storefront

Afficher l’état de la wishlist en Liquid

{% 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 %}

Écrire dans le metafield

C’est là que ça se complique. La Storefront API ne vous permet pas de muter customer.metafields directement depuis du JS anonyme — vous avez besoin d’un jeton d’accès client, ou d’un App Proxy authentifié. Un handler App Proxy minimal (Node.js, déployé sur Vercel/Cloudflare Workers) ressemble à :

// /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
}

L’implémentation complète tourne autour de 200 lignes une fois que vous gérez l’authentification, les états d’erreur et la limitation de débit. Temps de développement réaliste pour un développeur qui ne l’a jamais fait : 1 à 2 jours. Pour quelqu’un qui l’a déjà fait : 2 à 3 heures.

Méthode 3 : panier caché avec propriétés de ligne (enregistrer pour plus tard)

Certains tutoriels suggèrent de détourner le panier en ajoutant des articles wishlist à la quantité 0 ou avec une propriété personnalisée comme _wishlist: true. Ne faites pas ça. Ça casse les calculs du panier, embrouille le checkout, et la plupart des thèmes affichent quand même les articles. Je l’inclus uniquement pour que vous sachiez l’éviter quand vous le verrez suggéré sur Reddit.

La seule variante légèrement défendable : un attribut « Enregistré pour plus tard » séparé que vous affichez en dehors du panier principal, comme ceci :

<!-- 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 %}

C’est une demi-mesure. Les attributs du panier disparaissent lorsque le panier est vidé. À éviter.

Méthode 4 : wishlist par URL partageable (le hack social)

Celle-ci n’est pas une vraie wishlist — c’est un lien « partagez vos favoris ». Vous construisez une liste côté client, puis l’encodez dans une URL que l’acheteur peut partager ou ajouter aux favoris.

// 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);
}

Utile en complément de la méthode 1 — elle donne aux acheteurs un moyen de partager des listes avec des amis ou de se les envoyer à eux-mêmes. Ce n’est pas une wishlist en soi.

Le verdict honnête : quand le DIY suffit, quand il flanche

Le DIY fonctionne si vous pouvez répondre oui aux quatre questions :

1. Votre boutique a moins de ~500 SKU (pour que la maintenance manuelle reste raisonnable).
2. Vous ne vous souciez pas de la synchronisation entre appareils (ou vous imposez de toute façon la création de compte).
3. Vous ne prévoyez pas d’envoyer d’email aux clients lorsque les articles de la wishlist passent en promotion ou sont à nouveau en stock.
4. Vous avez soit un développeur en interne, soit l’aisance pour éditer le Liquid vous-même.

Le DIY casse dès que vous voulez :

• Envoyer à un client un email « votre article de wishlist est de nouveau en stock » — vous n’avez aucune idée de qui possède l’entrée localStorage.
• Récupérer les wishlists abandonnées par SMS ou email — même problème.
• Afficher la conversion wishlist dans l’analytique — vous pouvez déclencher des événements GA4, mais vous ne pouvez pas les lier au chiffre d’affaires sans travail backend.
• Permettre aux invités d’enregistrer sans imposer la création de compte, et synchroniser avec leur email quand ils se connectent plus tard.
• La confier à un marketeur non technique pour la gérer.

Ce ne sont pas des limites théoriques. Ce sont les raisons pour lesquelles la plupart des boutiques qui commencent avec une wishlist DIY basculent vers une application dans les 6 mois.

Ce qu’une wishlist DIY coûte réellement (soyons honnêtes)

Les gens cherchent « sans application » parce qu’ils supposent que l’application est l’option chère. Vérifions.

Un développeur qui construit la version localStorage : 2 à 4 heures. À 75 $/h, ça fait 150 à 300 $, plus aucun coût continu. Raisonnable.

Un développeur qui construit la version metafield avec déclencheurs d’email : 8 à 16 heures. 600 à 1 200 $, plus un Klaviyo ou similaire pour réellement envoyer les emails (20 à 45 $/mois). Plus de la maintenance à chaque mise à jour de votre thème ou changement d’extensions de checkout de Shopify.

Une application wishlist séparée + une application de retour en stock séparée + une application de précommande séparée : généralement 15 à 25 $/mois chacune. Donc 45 à 75 $/mois pour les trois fonctionnalités.

Une application combinée : une seule facture.

Ou : obtenez les trois en une seule application, avec un plan gratuit

Divulgation — nous faisons Notify Me!, et nous l’avons conçue précisément parce que la plupart des boutiques ont besoin de wishlist + retour en stock + précommande ensemble. Un client enregistre un produit → il passe en rupture de stock → il est notifié → s’il ne revient jamais, vous lui proposez une précommande. Trois fonctionnalités qui vont de pair.

À quoi ressemble réellement la configuration

Vous activez les fonctionnalités page par page (produit, collection, accueil) depuis le tableau de bord — aucun code de thème à maintenir :

L’écran Wishlist dans Notify Me! — le mode invité est activé par défaut, et la wishlist est rattachée au compte d’un client dès qu’il se connecte. Aucune modification de code requise.

Bouton de page produit — entièrement personnalisable

Choisissez une icône cœur, signet ou étoile. Modifiez les libellés des deux états. Le widget s’affiche en ligne à côté de votre bouton Ajouter au panier :

Paramètres du bouton de la page produit — définissez les libellés avant/après, l’icône et le style sans toucher au Liquid.

Widget de page collection — fonctionne sur chaque carte

Là où les méthodes DIY peinent le plus : placer un bouton d’enregistrement fonctionnel sur chaque vignette de page collection. L’application gère cela avec un seul interrupteur :

Widget de page collection — choisissez l’icône, la position et le style d’affichage. S’affiche automatiquement sur chaque fiche produit.

Tarification (facturation annuelle)

Détails complets des plans sur la page tarifs. Le plan Lite gratuit existe pour que vous puissiez réellement le tester sur votre boutique avant de payer quoi que ce soit. La plupart des boutiques restent sur Starter à long terme — 15,92 $/mois remplace trois applications que vous installeriez sinon séparément.

Fonctionnalités que les versions DIY ci-dessus ne peuvent pas égaler :

• Mode invité (pas de connexion forcée) — la wishlist se rattache automatiquement au compte lors de la première connexion
• Plusieurs listes nommées par client
• Widgets wishlist sur les pages d’accueil, collection et produit
• Déclencheurs automatiques d’email et SMS en cas de baisse de prix, de stock faible et de réapprovisionnement
• Boutons de précommande intégrés et paiements partiels
• Personnalisation complète en Liquid pour s’adapter à votre thème
• Prise en charge B2B et DTC dès le départ

Commencer gratuitement sur le Shopify App Store →

FAQ

Peut-on ajouter une wishlist à Shopify sans coder ?

Pas sans application. Toute méthode no-code nécessite soit l’installation d’une application wishlist, soit le collage de code dans votre thème. Il n’y a pas de bascule native.

Existe-t-il une wishlist Shopify gratuite ?

Oui, quelques-unes. La méthode localStorage ci-dessus est gratuite si vous la construisez vous-même. Côté application, le plan Lite de Notify Me! est gratuit jusqu’à 50 actions de wishlist à vie, ce qui suffit pour valider que les clients utilisent réellement la fonctionnalité sur votre boutique avant de payer un plan supérieur.

Shopify 2.0 dispose-t-il d’une wishlist ?

Non. Shopify 2.0 est l’architecture des thèmes (sections, blocs, blocs d’application) — elle n’ajoute pas de fonctionnalité de wishlist. Elle rend toutefois plus propre l’installation d’une application de wishlist via les blocs d’application, c’est pourquoi la plupart des applications de wishlist modernes s’intègrent aux thèmes Online Store 2.0 en quelques secondes.

Puis-je ajouter une wishlist avec uniquement du Liquid ?

Partiellement. Le Liquid peut afficher une wishlist si les données se trouvent dans un metafield client, mais le Liquid ne peut pas écrire dans les metafields depuis le storefront. Vous aurez besoin de JavaScript et soit de la Storefront API, soit d’un App Proxy pour enregistrer les articles.

Comment ajouter une wishlist à une page produit Shopify sans application ?

Utilisez la méthode 1 ci-dessus : collez le snippet du bouton wishlist dans votre template produit, ajoutez wishlist.js aux assets de votre thème et créez une page wishlist à partir de templates/page.wishlist.liquid. Code complet dans ce guide.

Une wishlist augmente-t-elle réellement les conversions ?

Oui — enregistrer signale une intention d’achat réelle, et les acheteurs qui utilisent la wishlist convertissent généralement à des taux nettement plus élevés que ceux qui ne font que naviguer. Le plus gros gain vient de l’envoi d’emails aux détenteurs de wishlist lorsqu’un article passe en promotion ou est de nouveau en stock — c’est là que les méthodes DIY échouent.

Qu’arrive-t-il à une wishlist en localStorage lorsque le client efface ses cookies ?

Elle est supprimée définitivement. Pas de sauvegarde, pas de récupération. C’est la principale raison pour laquelle les boutiques dépassent l’approche DIY.

Une wishlist peut-elle déclencher des emails de retour en stock ?

Uniquement si vous reliez la wishlist à un email client. Le localStorage ne le peut pas. Les metafields client le peuvent, mais vous avez toujours besoin d’un backend pour détecter les changements d’inventaire et envoyer l’email. Une application qui fait les deux — comme Notify Me! — élimine entièrement ce travail.

Quelle est la différence entre une wishlist et une waitlist ?

Une wishlist est une liste organisée de produits qu’un acheteur veut retenir ; une waitlist est une file d’attente pour un produit temporairement en rupture ou en pré-lancement. Les wishlists sont ouvertes ; les waitlists sont limitées dans le temps par l’inventaire ou la date de sortie. La plupart des boutiques finissent par vouloir les deux.

Vaut-il mieux utiliser « Continuer à vendre en rupture de stock » ou une wishlist ?

Problème différent. « Continuer à vendre en rupture de stock » vous permet d’accepter des commandes pour un inventaire indisponible (essentiellement une précommande). Une wishlist permet aux acheteurs d’enregistrer des articles sans s’engager. Si vous essayez de capturer la demande sur un produit indisponible, vous voulez généralement les deux — une wishlist pour recueillir l’intention et une option de précommande pour les acheteurs prêts à acheter maintenant.

Dernière mise à jour : juin 2026. Rédigé pour les thèmes Shopify sur Online Store 2.0. Si votre thème est plus ancien (vintage), les chemins Liquid diffèrent légèrement — le JavaScript est identique.