Sommaire
Réponse courte: Créez un widget WAButton gratuit, copiez son code d'intégration, et collez-le juste avant la balise fermante
</body>dans le fichiertheme.liquidde votre thème Shopify. Aucune application ni compétence en codage n'est nécessaire.
Un bouton WhatsApp donne aux acheteurs un moyen de poser des questions sur les tailles, les délais de livraison ou le paiement avant d'acheter, et de parler à une personne plutôt que de remplir un formulaire.
De nombreuses applications de chat Shopify facturent des frais mensuels et ajoutent leurs propres scripts à votre boutique. Si vous avez seulement besoin d'un bouton, vous pouvez en coller un dans votre thème à la place.
Ce guide vous montre comment ajouter un bouton de chat WhatsApp à votre thème Shopify, gratuitement et sans application.
En quoi WhatsApp diffère d'un widget de chat en direct
Avec un widget de chat en direct, la conversation se déroule généralement dans l'onglet du navigateur. Si le visiteur le ferme avant que votre équipe réponde, il risque de ne jamais voir la réponse.
Un bouton WhatsApp click-to-chat fonctionne différemment de deux manières :
- La conversation reste sur son téléphone : Le chat se déplace dans l'application WhatsApp de l'acheteur. Quand votre équipe répond, l'acheteur reçoit une notification sur son téléphone.
- Le premier message peut être rédigé pour eux : Vous pouvez définir le message pour que, quand l'acheteur tape sur le bouton, WhatsApp s'ouvre avec le produit déjà nommé (par exemple, « Bonjour, j'ai une question sur [Nom du produit] »).
Si vous vendez aussi sur d'autres plateformes, consultez notre Répertoire des Intégrations CMS pour des guides pas à pas sur WordPress, WooCommerce, Webflow et Squarespace.
Guide pas à pas : Ajouter le bouton WhatsApp à votre thème Shopify
Vous n'avez pas besoin de compétences en codage pour ajouter WAButton à votre thème Shopify. L'extrait est autonome et sans dépendances.
Étape 1 : Créez votre widget dans le tableau de bord WAButton
- Créez un compte WAButton gratuit, ou connectez-vous à votre tableau de bord si vous en avez déjà un.
- Créez un widget et saisissez votre numéro de téléphone WhatsApp Business au format international E.164 (par exemple
+14155552671sans espaces, tirets ni zéro initial). - Définissez un message prérempli engageant, comme :
Bonjour ! Je parcours votre boutique et j'ai une question sur ma commande. - Dans l'éditeur du widget, ouvrez Share & install > Website install et copiez votre code d'intégration. Il contient déjà l'identifiant de votre widget, il fonctionne donc dès que vous le collez.
Étape 2 : Ouvrez l'éditeur de code de votre thème Shopify
- Connectez-vous à votre tableau de bord Shopify Admin.
- Dans la barre de navigation latérale, allez dans Boutique en ligne > Thèmes.
- Localisez votre thème actif (par exemple, Dawn, Sense, Refresh ou Impact).
- Cliquez sur les trois points (
...) à côté de Personnaliser, puis sélectionnez Modifier le code.
Étape 3 : Collez le code d'intégration dans theme.liquid
- Dans la liste des fichiers à gauche, ouvrez le dossier
Layoutet cliquez surtheme.liquid. - Faites défiler jusqu'en bas du fichier pour trouver la balise fermante
</body>. - Juste avant la balise
</body>, collez votre code d'intégration WAButton :
<!-- Widget WhatsApp WAButton -->
<script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script>
<!-- Fin Widget WhatsApp WAButton -->
- Cliquez sur Enregistrer en haut à droite.
C'est tout ! Visitez l'URL de votre boutique en ligne sur ordinateur et sur mobile pour tester le widget. Quand on clique dessus, il ouvrira WhatsApp Web sur les navigateurs de bureau ou lancera l'application native WhatsApp sur les smartphones.
Avancé : Ajouter un bouton de formulaire de commande WhatsApp sur les fiches produits
Si vous gérez une boutique de créateurs, une marque de vêtements personnalisés ou un catalogue de gros, vous voudrez peut-être que vos clients passent commande directement sur WhatsApp plutôt que de passer par le paiement standard.
Avec notre Générateur de Formulaire de Commande WhatsApp gratuit, vous pouvez créer des demandes de commande structurées qui se remplissent automatiquement :
- Référence (SKU) et titre du produit
- Déclinaison choisie (taille, couleur, matière)
- Adresse de livraison et code postal
- Mode de paiement préféré (Paiement à la livraison, Virement bancaire, Stripe)
Cela peut convenir aux marchés où vos clients s'attendent déjà à commander via WhatsApp.
Pourquoi un petit script compte
Les Core Web Vitals mesurent la vitesse de chargement d'une page et sa stabilité, notamment le Largest Contentful Paint (LCP) et le Cumulative Layout Shift (CLS). Google recommande de viser de bons scores.
Les applications de chat tierces peuvent charger leurs propres scripts, polices et feuilles de style sur chaque page, ce qui ajoute à la charge du navigateur.
WAButton garde une empreinte légère :
- Aucune dépendance : JavaScript simple et icônes SVG.
- Chargement asynchrone (
async) : Le script se télécharge en parallèle et ne bloque pas le rendu de vos images et textes. - Aucun décalage de mise en page à cause du bouton : Il flotte à une position fixe, votre page ne saute donc pas pendant son chargement.
Consultez notre Guide d'intégration Shopify pour plus de conseils de configuration et pour envoyer les taps sur le bouton à Google Analytics 4 et Meta Pixel.
Foire aux questions
Puis-je afficher le bouton WhatsApp uniquement pendant les heures d'ouverture ?
Oui. Vous pouvez configurer des règles de visibilité planifiées ou personnaliser les messages d'absence automatiques avec notre Générateur de Message d'Absence WhatsApp gratuit pour définir les attentes lorsque votre équipe est hors ligne.
Cela fonctionne-t-il sur tous les thèmes Shopify ?
Oui. Le code d'intégration est du HTML5 standard et fonctionne avec tous les thèmes Shopify Online Store 2.0 (Dawn, Refresh, Craft, Studio, Publisher) ainsi qu'avec les thèmes vintage hérités.
Ai-je besoin d'un compte API WhatsApp Business ?
Non. WAButton fonctionne avec les numéros personnels WhatsApp standard, les comptes de l'application WhatsApp Business et les numéros officiels WhatsApp Cloud API.
Envie d'autres façons d'utiliser WhatsApp dans votre boutique ? Lisez WhatsApp pour les Boutiques en Ligne ou essayez notre Générateur de Liens WhatsApp gratuit.
Sources
- Comprendre les Core Web Vitals et les résultats de recherche Google, Google Search Central
- Comment utiliser le click-to-chat, Centre d'aide WhatsApp
Laisse les visiteurs de ton site t'écrire sur WhatsApp.
Ajoute un bouton flottant, choisis ses couleurs et son message d'accueil, puis réponds dans l'app WhatsApp que tu utilises déjà.
WAButton est un bouton de site web. Nous ne vendons pas d'accès à l'API WhatsApp ni de boîte de réception partagée, donc rien ici ne dépend de ton achat.
Écrit par Équipe WAButton