PrestaShop n’a pas de champ pour du code personnalisé dans le back-office. Pour ajouter Wawsome, utilisez un module de code de PrestaShop Addons, ou ajoutez un court script au fichier custom.js de votre thème. Videz ensuite le cache.
Avant de commencer
- Un compte Wawsome avec votre boutique ajoutée. Votre code se trouve dans le tableau de bord : ouvrez Websites, choisissez votre site, cliquez sur Install Widget, puis sur Copy code dans la fenêtre Connect Widget.
- Un accès au back-office et, pour l’option 2, aux fichiers de votre thème.
Option 1 : un module de code personnalisé
Plusieurs modules de PrestaShop Addons permettent d’ajouter votre propre code sur chaque page depuis le back-office. Installez-en un, collez votre code Wawsome dans son champ head ou footer, puis enregistrez. C’est la solution la plus simple si vous ne modifiez pas les fichiers du thème.
Option 2 : le fichier custom.js de votre thème
Les thèmes PrestaShop chargent un fichier appelé custom.js à la fin de chaque page. Il est vide par défaut et prévu pour vos propres scripts. Il accepte du JavaScript, pas de balises HTML : utilisez donc cette version du code. Remplacez YOUR_API_KEY par la valeur après data-api-key= dans le code copié.
(function () {
var s = document.createElement('script');
s.src = 'https://loader.wawsome.com';
s.setAttribute('data-api-key', 'YOUR_API_KEY');
s.defer = true;
document.body.appendChild(s);
})();
- Ouvrez le fichier
assets/js/custom.jsde votre thème. - Collez le code et enregistrez le fichier.
Utilisez un thème enfant si possible. Une mise à jour du thème remplace les fichiers du thème d’origine, et votre code avec.
Vérifier que tout fonctionne
Allez dans Advanced Parameters > Performance et cliquez sur Clear cache. Dans le back-office en français, les menus portent un nom un peu différent, au même endroit. Ouvrez ensuite votre boutique dans une fenêtre de navigation privée et cherchez le bouton Wawsome.
Ce que le widget corrige, et ce qu’il ne corrige pas
- Vos clients adaptent le texte, les couleurs et la navigation, et utilisent des outils de lecture.
- L’IA ajoute un texte alternatif aux images produits qui n’en ont pas. Vous pouvez modifier chaque description.
- Votre thème, vos fiches produits et les étapes de commande comptent toujours. Un scan trouve les problèmes, comme des étiquettes de formulaire manquantes, pour que vous les corrigiez dans PrestaShop.
En savoir plus : Lancer un scan gratuit · Audit d’accessibilité · Guide Magento
FAQ sur l’accessibilité PrestaShop
PrestaShop a-t-il un champ pour du code personnalisé ?
Non, pas dans le back-office. Utilisez un module de PrestaShop Addons ou le fichier custom.js de votre thème.
Une mise à jour du thème supprime-t-elle le widget ?
C’est possible si vous avez modifié le thème d’origine. Placez le code dans un thème enfant ou utilisez un module, et les mises à jour n’y toucheront pas.
Pourquoi je ne vois pas le widget après l’ajout ?
PrestaShop garde les fichiers du thème en cache. Videz le cache dans Advanced Parameters > Performance et rechargez votre boutique.
Lancez-vous avec Wawsome
Rendez votre boutique plus simple à utiliser pour tous vos clients. Commencez votre essai gratuit, ou réservez une démo et nous vous montrons comment Wawsome fonctionne.
Commencer l’essai gratuit ou réserver une démo (s’ouvre dans un nouvel onglet).
Autres guides : Ajouter Wawsome à n’importe quel site · Installer avec Google Tag Manager