Widget de carte pour Shopify

Pourquoi une section de thème vaut mieux qu'une application Shopify

La plupart des « applications de carte » exigent une installation, des autorisations sur les données de votre boutique et un abonnement mensuel — pour au final un simple iframe. Voici l'alternative honnête : un seul fichier Liquid qui vit dans votre propre thème. Il ne demande aucune autorisation sur la boutique, n'ajoute aucun script à vos pages, ne transmet rien et ne coûte rien. Les seules requêtes externes de vos visiteurs sont l'iframe de carte en bac à sable servi par whatismylocation.ai et ses tuiles OpenStreetMap — aucun cookie Google, aucun bandeau de consentement à gérer. Si le service devenait inaccessible, l'iframe échoue en silence sans casser votre page. Supprimez le fichier de la section et toute trace disparaît.

Télécharger whatismylocation-shopify-sections.zip — les deux sections plus un README, quelques kilo-octets. Suivez ensuite les étapes d'installation ci-dessous.

Installation en deux minutes environ

Deux temps : collez le fichier une fois, puis utilisez-le comme n'importe quelle section intégrée.

Collez le fichier : interface d'administration Shopify ▸ Boutique en ligne ▸ Thèmes ▸ ⋯ ▸ Modifier le code. Dans la barre latérale de gauche, sous Sections, cliquez sur Ajouter une nouvelle section, nommez-la whatismylocation-map, supprimez le contenu d'exemple et collez tout le contenu de whatismylocation-map.liquid — c'est le bloc {% schema %} en bas du fichier qui construit votre panneau de réglages, il doit donc être inclus. Enregistrez.

Utilisez-la : ouvrez l'éditeur de thème (Personnaliser), allez sur votre page de contact (ou n'importe quelle page), appuyez sur Ajouter une section et choisissez WhatIsMyLocation Map. Le panneau de réglages apparaît à gauche ; tant que vous n'avez pas saisi de coordonnées, la section affiche un message d'attente qui indique exactement ce qu'il lui manque.

Récupérez les coordonnées dans le générateur de carte à intégrer — tapez votre adresse, puis faites glisser l'épingle sur votre entrée avant de copier. La section embarque vos coordonnées définitives : l'épingle ne peut donc plus dériver ensuite.

Les succursales sont des blocs

Les boutiques à plusieurs adresses profitent du meilleur : dans l'éditeur de thème, chaque succursale est un bloc — appuyez sur Ajouter une succursale, renseignez la latitude, la longitude, un libellé et une adresse, puis réorganisez-les par glisser-déposer (jusqu'à 10). La carte s'ajuste automatiquement à toutes les succursales, les épingles sont numérotées pour correspondre à la liste, et les visiteurs obtiennent le panneau des succursales — un accordéon à côté de la carte sur ordinateur, une bande de fiches défilante sur téléphone, avec un itinéraire par succursale et, en option, des icônes « Ouvrir dans Google Maps / Apple Maps ». La disposition du panneau (auto, côté, bas, aucune) et l'animation de transition (fluide, fondu, animée, aucune — les visiteurs qui limitent les animations obtiennent toujours la version instantanée) sont des menus déroulants dans le même panneau.

Tous les réglages, en détail

Le même zip contient whatismylocation-widget.liquid — le widget de localisation sous forme de seconde section (thème, mode compact/complet, hauteur), pour les pages de livraison et les recherches de magasin.

Dépannage

La section n'apparaît pas dans Ajouter une section. Le fichier doit se trouver dans Sections (pas dans Snippets ni Assets) et le collage doit contenir tout le fichier — si le bloc {% schema %} a été tronqué, Shopify refuse ou masque la section. Recollez le fichier entier et enregistrez.

Erreur « Invalid schema » à l'enregistrement. Un collage partiel — le plus souvent une accolade fermante manquante, parce que la sélection s'arrête une ligne avant la fin. Collez à nouveau le fichier complet ; ne modifiez pas le schéma à la main sans connaître Liquid.

La carte est grise. Les tuiles viennent de tile.openstreetmap.org ; un bloqueur de publicités agressif ou un réseau d'entreprise peut les bloquer. Vérifiez sur un téléphone en données mobiles — vos clients la voient presque certainement sans problème.

L'épingle n'est pas sur ma porte. Reconstruisez les coordonnées dans le générateur, faites glisser l'épingle sur votre entrée et collez les nouvelles valeurs dans les réglages de la section.

Les modifications n'apparaissent pas sur la boutique en ligne. Vous avez modifié un thème brouillon ou non publié — faites la modification dans le thème publié (ou publiez celui que vous avez modifié). Le widget lui-même n'a rien à mettre en cache.