Comment ajouter un Woosmap Store Locator à votre boutique Shopify, sans app

Jérémy Sandrin - Reading time : 8 min

Sommaire

Si vous vendez en boutique physique autant qu'en ligne, l'une des actions les plus fréquentes d'un visiteur sur votre site Shopify est de chercher le magasin le plus proche. Quand cette recherche est lente, imprécise ou enterrée à trois clics de profondeur, vous perdez la visite, et souvent la vente qui se serait faite en magasin.

Bonne nouvelle : ajouter un vrai store locator à Shopify n'impose pas une app de la marketplace, un abonnement mensuel par fonctionnalité, ni un sprint de développement. Avec le Woosmap Store Locator Widget, vous pouvez ajouter une page « Trouver un magasin » rapide et précise à n'importe quel thème Shopify en une dizaine de minutes, entièrement depuis l'admin Shopify.

Ce guide déroule tout, étape par étape. Vous n'avez pas besoin d'être développeur pour le suivre, mais si vous en avez un dans l'équipe, il s'y retrouvera aussi.

Pourquoi ne pas simplement installer une app ?

La plupart des store locators Shopify sont des apps que vous installez depuis l'App Store. Les apps sont pratiques, mais elles ont des contreparties : une facture récurrente de plus, un tiers de plus avec accès à votre boutique, un contrôle limité sur l'apparence et le comportement de la carte, et des données sur vos acheteurs qui transitent par un outil que vous ne maîtrisez pas.

L'approche de ce guide est différente. Vous ajoutez le Woosmap Store Locator Widget comme section de thème personnalisée, un bloc natif de votre thème Shopify. Cela signifie :

Aucune app à installer. Rien depuis l'App Store, aucun abonnement supplémentaire lié à la fonctionnalité.
Aucun Shopify CLI, aucun environnement de dev local. Tout se passe dans l'éditeur de thème, dans votre navigateur.
Fonctionne avec n'importe quel thème Online Store 2.0. Dawn ou un thème sur mesure, peu importe.
Vous gardez le contrôle. La carte, les données et la configuration vivent dans votre thème, et vous pouvez les modifier ou les retirer quand vous voulez.

Une fois la section créée, n'importe qui dans votre équipe peut déposer le store locator sur une page depuis l'éditeur de thème, exactement comme il ajouterait une bannière ou une grille de produits.

Ce qu'il vous faut avant de commencer

Deux choses :

Un accès à votre admin Shopify, précisément la possibilité de modifier le code de votre thème (Boutique en ligne → Thèmes → Modifier le code).
Une clé d'API publique Woosmap, elle commence par woos-…. Si vous n'en avez pas encore, créez un compte gratuit dans la Woosmap Console, ajoutez vos magasins et générez une clé publique. Le guide de démarrage du Store Locator Widget (EN) couvre cela en quelques minutes.

Une précision sur la clé : la clé publique est faite pour vivre sur votre boutique. Elle est restreinte par referrer, ce qui veut dire qu'elle ne fonctionne que sur les domaines que vous autorisez. Elle peut être exposée sans risque dans votre thème, c'est exactement pour ça qu'elle est conçue.

Vous préférez tester sans risque d'abord ? Dupliquez votre thème en ligne (Boutique en ligne → Thèmes → menu ⋯ → Dupliquer) et faites tout ce qui suit sur la copie. Vous pouvez la prévisualiser, tout régler, et ne publier que quand vous êtes satisfait.

Les cinq étapes

Voici tout le processus en un coup d'œil. Chaque étape est détaillée ci-dessous.

Ouvrir l'éditeur de code du thème
Ajouter le fichier JavaScript
Ajouter le fichier CSS
Créer la section
Ajouter la section à une page et coller votre clé

Étape 1 : Ouvrir l'éditeur de code du thème

Dans votre admin Shopify, allez dans Boutique en ligne → Thèmes. Sur le thème à modifier, cliquez sur** Actions → Modifier le code**.

Vous verrez une arborescence de fichiers à gauche, avec des dossiers comme Assets, Sections et Snippets. C'est là que se déroulent les quatre étapes suivantes.

Étape 2 : Ajouter le fichier JavaScript

Ce petit script charge la web app Woosmap et affiche la carte. Il est écrit pour que vous n'ayez plus jamais à y toucher, tous vos réglages viendront de l'éditeur de thème plus tard.

Dans le panneau de gauche, sous Assets, cliquez sur** Ajouter une ressource**.
Choisissez Créer un fichier vierge.
Nommez-le exactement store-locator.js.
Collez le code ci-dessous, puis cliquez sur Enregistrer.

(function () {
  var WEBAPP_SRC = 'https://webapp.woosmap.com/webapp.js';
  var CONFIG_SELECTOR = 'script.woosmap-store-locator__config';
  var MOBILE_QUERY = '(max-width: 600px)';

  function parseConf(raw) {
    if (typeof raw !== 'string' || raw.trim() === '') {
      return { conf: {}, error: null };
    }
    try {
      var value = JSON.parse(raw);
      if (value && typeof value === 'object' && !Array.isArray(value)) {
        return { conf: value, error: null };
      }
      return { conf: {}, error: 'Configuration must be a JSON object.' };
    } catch (e) {
      return { conf: {}, error: e.message };
    }
  }

  function buildConf(settings) {
    settings = settings || {};
    return parseConf(settings.advancedJson).conf;
  }

  function ensureWebApp(win, doc, cb) {
    if (win.WebApp) {
      cb();
      return;
    }
    win.__woosmapWebAppQueue = win.__woosmapWebAppQueue || [];
    win.__woosmapWebAppQueue.push(cb);
    if (win.__woosmapWebAppLoading) {
      return;
    }
    win.__woosmapWebAppLoading = true;
    var script = doc.createElement('script');
    script.src = WEBAPP_SRC;
    script.async = true;
    script.onload = function () {
      var queue = win.__woosmapWebAppQueue || [];
      win.__woosmapWebAppQueue = [];
      for (var i = 0; i < queue.length; i += 1) {
        queue[i]();
      }
    };
    doc.head.appendChild(script);
  }

  function readConfig(el) {
    var node = el.querySelector(CONFIG_SELECTOR);
    if (!node) {
      return null;
    }
    try {
      return JSON.parse(node.textContent);
    } catch (error) {
      return null;
    }
  }

  function showConfigError(el, doc, message) {
    var box = doc.createElement('div');
    box.className = 'woosmap-store-locator__error';
    box.setAttribute('role', 'alert');
    box.textContent = 'Woosmap Store Locator — invalid Configuration (JSON): ' + message + '. Using default configuration.';
    el.insertBefore(box, el.firstChild);
  }

  function initContainer(el, win, doc) {
    if (!el || el.dataset.wslRendered) {
      return;
    }
    var config = readConfig(el);
    if (!config || !config.publicKey) {
      return;
    }
    el.dataset.wslRendered = 'true';
    var result = parseConf(config.advancedJson);
    if (result.error && win.Shopify && win.Shopify.designMode) {
      showConfigError(el, doc, result.error);
    }
    ensureWebApp(win, doc, function () {
      var isMobile = typeof win.matchMedia === 'function' && win.matchMedia(MOBILE_QUERY).matches;
      var webapp = new win.WebApp(el.id, config.publicKey);
      webapp.setConf(result.conf);
      webapp.render(isMobile);
    });
  }

  function initAll(win, doc) {
    var containers = doc.querySelectorAll('[data-woosmap-store-locator]');
    for (var i = 0; i < containers.length; i += 1) {
      initContainer(containers[i], win, doc);
    }
  }

  var boot = function () { initAll(window, window.document); };
  if (window.document.readyState === 'loading') {
    window.document.addEventListener('DOMContentLoaded', boot);
  } else {
    boot();
  }
  window.document.addEventListener('shopify:section:load', boot);
})();

Vous n'avez pas besoin de le lire ligne par ligne. En résumé : il attend que la page soit prête, charge la web app Woosmap une seule fois, lit les réglages que vous saisirez dans l'éditeur de thème, et dessine la carte. Il se réaffiche aussi correctement pendant que vous éditez dans l'éditeur de thème, pour que l'aperçu reste à jour.

Étape 3 : Ajouter le fichier CSS

Il contrôle la taille et l'espacement du store locator pour qu'il s'intègre bien dans votre thème.

Sous Assets, cliquez sur** Ajouter une ressource → Créer un fichier vierge**.
Nommez-le exactement store-locator.css.
Collez le code ci-dessous, puis cliquez sur Enregistrer.

.woosmap-store-locator {
  width: 100%;
  height: var(--wsl-height, 600px);
  min-height: 320px;
}

.woosmap-store-locator__setup {
  padding: 1rem;
  text-align: center;
  color: rgb(var(--color-foreground, 18 18 18));
}

.woosmap-store-locator__error {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid #d72c0d;
  border-radius: 6px;
  background: #fff4f4;
  color: #8e0b00;
  font-size: 0.875rem;
  line-height: 1.4;
}

La carte fait 600 px de haut par défaut. Si vous la voulez plus haute ou plus basse plus tard, c'est cette unique valeur height qu'il faut changer.

Étape 4 : Créer la section

Une « section » est ce qui transforme tout ce qui précède en un bloc que vous pouvez ajouter à n'importe quelle page depuis l'éditeur de thème, sans plus jamais toucher au code.

Dans le panneau de gauche, sous Sections, cliquez sur** Ajouter une section**.
Nommez-la woosmap-store-locator.
Supprimez le contenu par défaut généré par Shopify, collez le code ci-dessous, puis cliquez sur Enregistrer.

{%- liquid
  assign public_key = section.settings.public_key | strip
  assign container_id = 'woosmap-store-locator-' | append: section.id
-%}

{%- capture woosmap_config -%}
{
  "publicKey": {{ public_key | json }},
  "advancedJson": {{ section.settings.advanced_json | json }}
}
{%- endcapture -%}

{{ 'store-locator.css' | asset_url | stylesheet_tag }}

<div
  id="{{ container_id }}"
  class="woosmap-store-locator"
  data-woosmap-store-locator
>
  <script type="application/json" class="woosmap-store-locator__config">{{ woosmap_config }}</script>
  {%- if public_key == blank -%}
    <p class="woosmap-store-locator__setup">Add your Woosmap public key in the section settings to display the store locator.</p>
  {%- endif -%}
</div>

<script src="{{ 'store-locator.js' | asset_url }}" defer="defer"></script>

{% schema %}
{
  "name": "Woosmap Store Locator",
  "settings": [
    {
      "type": "text",
      "id": "public_key",
      "label": "Woosmap public key",
      "info": "Referrer-restricted public key (woos-…). Safe to expose on the storefront."
    },
    {
      "type": "textarea",
      "id": "advanced_json",
      "label": "Configuration (JSON) — required",
      "info": "Woosmap setConf as JSON. Must include \"maps\": { \"provider\": \"woosmap\" }, otherwise the store locator will not work correctly. Invalid JSON is ignored."
    }
  ],
  "presets": [
    {
      "name": "Woosmap Store Locator"
    }
  ]
}
{% endschema %}

Le bloc {% schema %} en bas est ce qui crée les deux champs de réglages, Woosmap public key et Configuration (JSON), que vous remplirez depuis l'éditeur de thème à l'étape suivante. C'est ce qui garde la partie technique hors du chemin de tout le monde.

Étape 5 : Ajouter la section à une page

Maintenant la partie sympa, la placer sur votre boutique.

Allez dans Boutique en ligne → Thèmes → Personnaliser.
Naviguez jusqu'à la page où le store locator doit apparaître. Si vous n'en avez pas encore, créez d'abord une page (par exemple « Trouver un magasin ») puis revenez ici.
Cliquez sur Ajouter une section.
Sélectionnez Woosmap Store Locator dans la liste.
Dans le panneau de réglages à droite :
- Collez votre clé publique Woosmap dans le champ Woosmap public key.
- Collez une configuration dans le champ Configuration (JSON). Ce champ est** obligatoire**, sans lui, la carte ne s'affichera pas correctement. Utilisez l'exemple ci-dessous comme point de départ.
Cliquez sur Enregistrer.

Et voilà. Votre store locator est en ligne sur cette page.

Votre configuration de départ

Le champ Configuration (JSON) est là où vous indiquez au widget comment se comporter : où centrer la carte, combien de résultats afficher, et votre couleur de marque. Il doit toujours inclure "maps": { "provider": "woosmap" }.

Copiez ceci comme point de départ et adaptez-le à votre activité :

{
  "datasource": {
    "maxResponses": 5,
    "maxDistance": 50000
  },
  "maps": {
    "provider": "woosmap",
    "localities": {
      "types": []
    }
  },
  "theme": {
    "primaryColor": "#3578f6"
  },
  "internationalization": {
    "lang": "en",
    "unitSystem": 1
  },
  "woosmapview": {
    "initialCenter": {
      "lat": 51.5074,
      "lng": -0.1278
    },
    "initialZoom": 12
  }
}

Deux changements pour l'adapter :

initialCenter, réglez lat et lng sur l'endroit où vous voulez que la carte s'ouvre (votre magasin phare, le centre de votre ville, ou le milieu de votre marché principal).
primaryColor, réglez-le sur votre couleur de marque pour que les marqueurs et les boutons s'accordent à votre boutique.

Une règle à retenir : ce champ attend du JSON strict. C'est-à-dire des clés entre guillemets doubles, pas de virgule finale, et des noms de propriétés en camelCase (maxResponses, pas max_responses). Si le JSON est invalide, le widget l'ignore et, dans l'éditeur de thème, affiche une petite note rouge qui vous dit exactement quoi corriger. Ne comptez pas dessus comme un filet de sécurité pour autant : la carte a besoin d'une configuration valide pour s'afficher (au minimum "maps": { "provider": "woosmap" }), donc une config cassée ou vide signifie pas de carte, pas un comportement par défaut fonctionnel. Corrigez le JSON avant de publier.

Tout le reste de l'apparence et du comportement du locator (rayon de recherche, marqueurs personnalisés, fiches de résultats, filtres) se configure via ce même champ. La référence de configuration complète (EN) liste chaque option.

Si quelque chose cloche

La plupart des soucis se résument à l'une de ces cinq choses. Voici comment les lire :

Ce que vous voyez	Ce que ça signifie généralement
Message « Add your Woosmap public key… »	Le champ de clé publique est vide, collez votre clé `woos-…`.
Zone de carte vide, sans erreur	La clé est invalide, ou votre projet Woosmap n'a aucun magasin près du centre de la carte.
Une note rouge dans l'éditeur de thème uniquement	Votre Configuration (JSON) a une coquille, vérifiez les guillemets et les virgules.
Fonctionne dans l'aperçu de l'éditeur mais pas sur la page en ligne	Rechargez la page en ligne. L'éditeur se rafraîchit à chaque changement, pas une page en ligne.
La carte ne s'affiche pas correctement	La Configuration (JSON) est vide ou il manque `"maps": { "provider": "woosmap" }`.

Si vous êtes bloqué, vous n'êtes pas seul. Contrairement aux grands fournisseurs de cartes, Woosmap vous donne un accès direct à une vraie équipe support qui connaît le produit, pas une file de tickets qui aboutit à un chatbot. Envoyez-nous l'URL de la page et une capture de votre panneau de réglages, et nous vous aiderons à régler ça.

Pourquoi les équipes choisissent Woosmap pour ça

Ajouter la carte est la partie facile. La raison pour laquelle les retailers migrent leur store locator vers Woosmap, c'est ce qui se passe après le lancement :

Une précision qui envoie les clients au bon endroit. Woosmap tire ses données de localisation des meilleurs fournisseurs de chaque marché (Royal Mail au Royaume-Uni, Eircode en Irlande, et des sources officielles équivalentes ailleurs), pour qu'une recherche « près de moi » renvoie des magasins réellement proches, pas une adresse à trois rues de là.
Des coûts prévisibles. Vous obtenez une précision et une fiabilité de niveau entreprise pour environ la moitié du coût de fournisseurs comparables, avec une tarification que vous pouvez anticiper plutôt qu'une facture qui explose avec votre trafic.
Vos données restent les vôtres. Woosmap n'utilise pas vos données ni les recherches de localisation de vos acheteurs pour alimenter de la publicité ou d'autres produits. Ce que vos clients cherchent reste entre vous et eux.
Aucun verrouillage. La section vit dans votre thème. Elle est à vous, vous pouvez la modifier, et vous n'êtes jamais l'otage d'un fournisseur.

Pour commencer

Si vous avez déjà une clé publique Woosmap, les cinq étapes ci-dessus vous mettront en ligne en une dizaine de minutes. Sinon, créez un compte gratuit dans la Woosmap Console, ajoutez vos magasins et générez une clé, puis revenez directement ici.

Besoin d'un coup de main pour adapter le locator à votre marque, ou pour planifier un déploiement sur plusieurs boutiques ? Parlez à notre équipe, nous connaissons le produit et nous répondons vite.

Pour aller plus loin

Store Locator Widget : Quick Start (EN)
Store Locator Widget : Full Configuration (EN)
Store Locator Widget : Reference (EN)