Code du bouton WhatsApp pour les thèmes Shopify

Pourquoi la même réponse vaut pour Dawn, Sense, Refresh, Craft, Studio et Ride

Les thèmes gratuits de Shopify reposent tous sur l'architecture Online Store 2.0. Ils partagent un même fichier de mise en page, theme.liquid, qui enveloppe chaque page, et ils prennent tous en charge les intégrations d'applications (app embeds), le mécanisme qui permet à une application d'ajouter un élément flottant sans toucher à votre code. Sense, Refresh, Craft, Studio et Ride sont des variantes du code de Dawn : un bouton qui fonctionne sur Dawn fonctionne donc aussi sur eux.

Vous avez ainsi deux voies. La voie A passe par une intégration d'application et ne demande aucun code. La voie B est un extrait que vous collez une fois dans theme.liquid, ou dans une section Liquid personnalisé si vous ne le voulez que sur certains modèles de page. Les deux ouvrent le même lien de discussion wa.me ; la différence tient à ce qui se passe autour.

• Centre d'aide Shopify : étendre votre thème avec des applications (intégrations d'applications)
• shopify.dev : mises en page de thème et theme.liquid

Voie A : sans code, avec une intégration d'application

C'est la voie que nous recommandons à la plupart des boutiques, et celle que notre guide du thème Dawn détaille étape par étape. Installez WhatsApp Pilot, enregistrez votre indicatif pays, votre numéro et votre message par défaut dans Paramètres, puis ouvrez Boutique en ligne → Thèmes → Personnaliser, cliquez sur l'icône Intégrations d'applications et activez WhatsApp Pilot. Enregistrez : le bouton est en ligne. Le forfait gratuit l'affiche sur la page d'accueil ; Pro l'affiche sur les pages produit, collection, panier et les autres pages, avec la visibilité par appareil et l'infobulle d'accueil.

Les étapes sont identiques sur Sense, Refresh, Craft, Studio et Ride, car le panneau Intégrations d'applications appartient à l'éditeur de thème, et non à un thème en particulier. Si vous changez de thème plus tard, réactivez l'intégration sur le nouveau thème ; les réglages dans l'application restent inchangés.

Voie B : l'extrait à copier-coller

Avant de commencer, dupliquez votre thème depuis Boutique en ligne → Thèmes pour disposer d'une sauvegarde, comme le conseille le guide de Shopify sur la modification du code d'un thème. Ouvrez ensuite l'éditeur de code (menu à trois points → Modifier le code), trouvez layout/theme.liquid et descendez jusqu'à la balise de fermeture body, près du bas du fichier. Collez les lignes ci-dessous juste au-dessus, remplacez le numéro d'exemple par le vôtre au format international (indicatif pays d'abord, sans signe plus ni espaces), puis enregistrez.

Chaque ligne est volontairement courte pour se coller proprement. Les valeurs d'attribut utilisent des guillemets simples à dessein ; Liquid et HTML les acceptent. Le libellé du bouton et le message prérempli de l'exemple sont en anglais : remplacez-les par votre propre formulation.

1. <a class='wa-float' href='https://wa.me/962790000000?text=Hi%2C%20I%20have%20a%20question%20about%20your%20store' target='_blank' rel='noopener'>Chat on WhatsApp</a>
2. <style>
3. .wa-float { position: fixed; bottom: 20px; right: 20px; z-index: 999; }
4. .wa-float { background: #25D366; color: #fff; font: 600 15px/1 sans-serif; }
5. .wa-float { padding: 14px 18px; border-radius: 999px; text-decoration: none; }
6. .wa-float { box-shadow: 0 4px 14px rgba(0,0,0,.2); }
7. .wa-float:hover { background: #1ebe5d; color: #fff; }
8. html[dir='rtl'] .wa-float { right: auto; left: 20px; }
9. @media (max-width: 749px) { .wa-float { bottom: 76px; right: 12px; } }
10. @media (max-width: 749px) { html[dir='rtl'] .wa-float { right: auto; left: 12px; } }
11. </style>

• Centre d'aide Shopify : modifier le code d'un thème
• Centre d'aide WhatsApp : utiliser Click to Chat (liens wa.me)

Régler le numéro, le texte prérempli et la position

• Numéro : les chiffres après wa.me/ sont votre numéro WhatsApp au format international. Un mobile jordanien 079 000 0000 devient 962790000000. Supprimez le signe plus, le zéro initial et les espaces.
• Texte prérempli : tout ce qui suit ?text= est le message que le client voit avant d'envoyer. Il doit être encodé pour URL : une espace devient %20 et une virgule %2C. Le générateur de liens gratuit sur /fr/tools/whatsapp-link-generator, sur ce site, construit l'URL complète pour vous, encodage compris.
• Position : bottom et right règlent le décalage sur ordinateur. Si le panier latéral de votre thème ou une barre d'ajout au panier fixe recouvre le bouton, augmentez bottom ou passez le bouton à gauche en remplaçant right par left.
• Mobile : la media query à 749px correspond au point de rupture utilisé par les thèmes de la famille Dawn. Le décalage bottom plus grand maintient le bouton au-dessus d'une barre fixe ou de la barre d'outils du navigateur sur téléphone. Ajustez la valeur après un test sur un vrai appareil.
• Boutiques RTL : lorsque votre thème s'affiche avec dir='rtl', les règles html[dir='rtl'] renvoient le bouton à gauche. Si votre vitrine en arabe ne définit pas cet attribut, supprimez les deux lignes rtl et remplacez directement right par left.
• Sur certaines pages seulement : collez le même extrait dans une section Liquid personnalisé du modèle voulu (par exemple le modèle de page produit) au lieu de theme.liquid. Il n'apparaît alors que là où cette section existe.

Extrait ou application : ce que vous perdez avec chacun

Remarques par thème

• Dawn et Craft : le panier latéral s'ouvre par la droite. Gardez le bouton à gauche, ou relevez-le pour qu'il dégage le bouton de paiement.
• Sense et Refresh : tous deux utilisent un en-tête fixe bien visible et, sur mobile, une barre d'ajout au panier fixe sur les pages produit. Testez une page produit sur téléphone avant d'arrêter le décalage bottom.
• Studio et Ride : les palettes sombres ou très contrastées peuvent rendre le vert par défaut criard. Gardez le vert WhatsApp sur le bouton lui-même et ne changez que la teinte de survol si nécessaire.
• Thèmes Online Store 2.0 payants : le même extrait fonctionne, mais le point de rupture mobile peut différer. Cherchez la largeur de media query propre au thème dans son CSS et alignez-vous dessus.
• Paiement : aucune des deux voies ne peut placer un bouton sur les pages de paiement. Shopify n'y autorise ni code de thème ni intégrations d'applications.

Tester avant de passer à autre chose

1. Ouvrez la vitrine dans un navigateur d'ordinateur et vérifiez que le bouton se trouve à l'endroit attendu sur la page d'accueil, une page produit et le panier.
2. Touchez-le sur un téléphone. WhatsApp doit s'ouvrir avec votre numéro et le texte prérempli ; sinon, vérifiez d'abord les chiffres après wa.me/.
3. Envoyez-vous le message de test et répondez-y, pour vous assurer que le relais fonctionne dans les deux sens.
4. Si vous avez utilisé l'application, ouvrez Statistiques après une journée et vérifiez que les appuis sont comptés. L'extrait ne remonte rien, et c'est la principale raison pour laquelle les boutiques qui veulent des chiffres passent ensuite à l'application.