Présentation de l’accueil PrestaShop et retour en haut

Ce que nous ferions

Nous conserverions le thème et les blocs natifs qui fonctionnent, donnerions une destination claire au premier écran, puis retirerions ou réordonnerions les blocs qui lui font concurrence. La démarche dépend de votre thème, de votre constructeur de pages, de vos modules, des données du catalogue, des intégrations, des langues et des marchés, ainsi que de la personne chargée des campagnes. Vérifiez ce que vos outils actuels permettent avant d’ajouter un module ou de commander une refonte.

Effectuez les changements de structure, de thème ou de code sur une copie de préproduction dotée des mêmes modules et de produits représentatifs, isolée des e-mails, commandes et exports externes de production. Répétez le parcours de l’accueil jusqu’à l’achat, consignez l’ordre et les réglages initiaux des hooks et conservez des copies des ressources modifiées. Convenez d’un créneau de publication et d’une bascule réversible avec la personne responsable de la boutique. Rétablissez si nécessaire la présentation ou la configuration modifiée, sans écraser les nouvelles commandes de production avec une base de préproduction.

Pour un diagnostic par ordre de priorité, le PrestaShop UX & Conversion Design Audit fournit un plan de correction ; pour configurer un thème que vous possédez déjà, le PrestaShop Theme Installation & Setup Service couvre la configuration convenue plutôt qu’une nouvelle conception.

Quelle présentation choisir pour commencer ?

Trouver les modules et hooks qui composent l’accueil

Le contrôleur index natif rend l’accueil via les templates et hooks du thème. Dans les présentations standard, displayHome fournit la pile principale de modules, entourée des hooks d’en-tête et de pied de page. Un thème tiers ou constructeur de pages peut modifier cette organisation.

1. Identifiez le thème actif et tout constructeur d’accueil.
2. Ouvrez Apparence > Positions, cherchez displayHome et relevez ses modules et leur ordre.
3. Ouvrez la configuration de chaque module pour ses textes, médias ou sélections de produits. Notez la catégorie ou le flux source et la personne qui l’entretient.
4. Réordonnez ou dégreffez les blocs lorsque le thème le permet, puis inspectez le rendu sur ordinateur et mobile.

Les installations Classic utilisent couramment ps_imageslider, ps_customtext, ps_featuredproducts et ps_banner. Les modules installés et leur ordre dans displayHome dépendent du thème et de la distribution ; notez les versions de PrestaShop et du thème avec le plan des blocs. Hummingbird est devenu le thème par défaut des nouvelles installations de PrestaShop 9.1 ; les boutiques mises à niveau peuvent conserver un thème antérieur.

Si une modification enregistrée n’apparaît pas, confirmez la boutique et la langue sélectionnées, la position du module sur les hooks et toute présentation pilotée par un constructeur, puis videz le cache concerné avec les commandes prévues. Comparez le rendu en étant déconnecté ; un aperçu dans le back-office ne suffit pas à prouver ce que voient les clients.

La configuration par défaut de Hummingbird greffe diaporama, texte personnalisé, produits phares, bannière, nouveautés et meilleures ventes sur displayHome. Vérifiez les positions réelles dans votre boutique avant de modifier l’accueil.

Donner un rôle clair au premier écran

Expliquez ce que vous vendez, pourquoi l’offre est pertinente et où le visiteur doit aller ensuite. « Systèmes de douche à l’italienne » ou « Sacs en cuir faits main à Florence » est plus clair que « Des produits de qualité pour la vie moderne ». Vérifiez que l’accueil rendu comporte un H1 non vide et définissez un H1 visible et pertinent via le template d’accueil du thème ou un bloc de contenu pris en charge. Utilisez une action descriptive comme « Découvrir les douches à l’italienne ».

Le premier écran varie selon fenêtre, zoom, commandes du navigateur, messages et taille d’en-tête. Testez les vrais écrans au lieu de supposer une hauteur fixe de ligne de flottaison. Un bref exercice de compréhension avec une personne ne connaissant pas la boutique révèle parfois des formulations floues, mais un test de trois secondes n’est pas une référence de conversion.

Un visuel principal statique garde un message visible et réduit les médias concurrents. Un carrousel peut convenir à plusieurs campagnes, mais il faut des commandes claires, du contenu lisible et le temps d’agir. Les recherches sur l’ergonomie du défilement automatique concernées portent sur des problèmes d’usage précis.

Comparez une seule diapositive ou un visuel statique à votre diaporama existant. Vérifiez les images et scripts réellement téléchargés et identifiez la ressource LCP. Chargez le premier visuel sans différé, réservez son espace et évitez le texte illisible intégré à l’image.

Banner Revolution prend en charge médias de bannières, surimpressions, appels à l’action, planification et variantes mobiles de médias et de présentation ; consultez l’aide Banner Revolution.

Choisir catégories et produits pour guider dans le catalogue

Choisissez les entrées de catégories selon votre gamme et les besoins des clients. Utilisez des libellés clairs comme « Bottes femme » plutôt que des codes saisonniers internes. Une petite grille visuelle peut servir de départ ; afficher quatre à huit catégories est un choix éditorial, pas un optimum établi ni une garantie de clics supplémentaires sur les images.

Gardez le menu permanent et la recherche utilisables. La grille de catégories de l’accueil est un raccourci, pas un remplacement de la navigation. Consultez le guide de navigation pour les arborescences de catégories, les titres, le comportement du menu, les filtres et les listes.

Le bloc natif Produits phares puise dans une catégorie configurée, généralement Accueil, et permet de régler le nombre de produits affichés. Affecter un produit à cette catégorie source ne revient pas à activer un indicateur universel « produit phare ». Ouvrez Modules > Gestionnaire de modules et configurez ps_featuredproducts pour définir sa catégorie source et le nombre de produits affichés, puis vérifiez le tri et le rendu du thème.

Proposez une sélection ciblée adaptée à la page : meilleures ventes utiles, nouveautés ou éventail représentatif de prix. Vous pouvez essayer huit à douze produits au départ, puis ajuster selon les résultats. Affichez la vraie disponibilité et une suite logique pour les articles nécessitant une déclinaison. Les produits déstockés conviennent si la campagne porte réellement sur le déstockage.

Si une rangée choisie manuellement n’est plus à jour et qu’il vous faut une source automatisée, Showcase Revolution propose des sélections automatiques, dont des produits tendance fondés sur les vues et les ventes valides de votre boutique. Vérifiez la source choisie avec les données réelles du catalogue et les fiches produit du thème avant de remplacer un bloc natif fonctionnel.

Utilisez les filtres pour affiner les grandes gammes et la recherche pour trouver un article connu. Une page d’accueil plus longue contenant tout le catalogue ne remplace pas ces outils.

Exemple d’accueil pour une boutique de douches

Supposons que votre diaporama présente receveurs, caniveaux et parois sur des diapositives distinctes, tandis que le menu utilise les codes de collection du fournisseur. Centrez le visuel principal sur les systèmes de douche à l’italienne, dirigez son action vers une catégorie existante adaptée et proposez en dessous des entrées clairement nommées pour les receveurs, caniveaux et parois. Placez une campagne particulière plus bas afin qu’elle ne remplace pas l’explication de votre gamme.

En préproduction, demandez à une personne qui ne connaît pas le catalogue de trouver un receveur adapté à son espace. Suivez le parcours depuis la carte de l’accueil, à travers la liste et les filtres, jusqu’à un produit proposant plusieurs dimensions. Confirmez que la carte ouvre la bonne catégorie dans chaque langue et qu’un produit nécessitant une déclinaison mène à une sélection utilisable plutôt qu’à un ajout rapide qui échoue. Si le visiteur arrive sur la mauvaise gamme, corrigez le libellé ou la destination avant d’ajouter des blocs à l’accueil.

Utiliser des affirmations exactes, du texte utile et les bons champs SEO

N’affichez notes d’avis, nombres de commandes, références presse, marques de paiement et garanties que si vous pouvez les justifier et avez le droit d’utiliser les ressources. « 50 000 commandes » exige des traces. Un badge de sécurité ne prouve pas la sécurité du tunnel.

Expliquez les différences pertinentes : seuil réel de livraison gratuite, garantie, heure limite d’expédition ou service. Liez les conditions complètes si nécessaire. Ajoutez une courte présentation de marque et des conseils d’achat s’ils facilitent le choix.

Pour les métadonnées natives de l’accueil, ouvrez Paramètres de la boutique > Trafic et SEO et modifiez l’entrée index. Ne modifiez pas pagenotfound, qui décrit la page d’erreur. Vérifiez le titre et la meta description rendus après enregistrement. Ils sont distincts du H1 visible issu du thème ou du contenu.

HTML Blocks peut placer du contenu personnalisé via hooks, intégration de templates ou sélecteurs ; consultez l’aide HTML Blocks. Maintenez le CSS propre aux appareils dans votre thème ou extension.

Un bloc d’articles récents nécessite un système de contenu ou un module installé ; les pages CMS natives ne constituent pas un processus complet de publication de blog. Gardez les informations utiles accessibles dans le HTML mobile, même si vous les organisez en accordéons. Évitez de masquer du contenu essentiel simplement pour imiter une page plus épurée.

Tester la présentation mobile et son coût

Examinez vos sessions par type d’appareil, actions suivantes et achats. Ne supposez pas que le mobile domine le trafic de chaque boutique. Hummingbird et Classic sont responsive, mais modules, textes longs et CSS personnalisé peuvent encore déborder.

• Utilisez un recadrage ou une variante mobile lisible du visuel principal.
• Donnez aux cartes de catégories et de produits une taille suffisante pour être reconnues et utilisées.
• Comparez une grille à une rangée défilante accessible plutôt que de déclarer l’une toujours supérieure.
• Gardez navigation, recherche et panier accessibles.
• Regroupez les éléments de réassurance répétés et retirez les intégrations tierces inutiles.
• Permettez de fermer les boîtes de dialogue et évitez de masquer immédiatement le premier contenu utile à l’arrivée.

Vidéos automatiques, diaporamas et flux sociaux peuvent ajouter requêtes et traitements. Inspectez la cascade réseau avant de décider quoi retirer. Adaptez dimensions et fichiers responsive des images ; utilisez le guide des images pour le dimensionnement et le chargement différé.

Relevez les clics d’accueil vers catégories et produits, recherches réussies, sorties et achats ultérieurs. Comparez sources d’acquisition et groupes clients similaires. Une longue visite peut indiquer intérêt ou confusion, et les visiteurs arrivant à l’accueil n’ont pas nécessairement la même conversion que ceux arrivant directement sur un produit.

Décider de l’utilité d’un bouton de retour en haut

Parcourez les longues pages d’accueil, catégories, produits et contenus sur ordinateur et téléphone. Vérifiez d’abord si thème, constructeur ou module fournit déjà une commande fonctionnelle. Cherchez des éléments comme back-to-top ou scroll-to-top et retrouvez leur source. Certains thèmes proposent une option ; ne le supposez pas pour tous les thèmes payants.

Les observations propres à Classic ne décrivent pas toutes les nouvelles boutiques PrestaShop 9. Vérifiez le thème installé avant d’ajouter un second bouton. Si une commande existante ne fonctionne pas, examinez son réglage, les erreurs de console et la superposition des éléments avant de la remplacer.

Les modifications apportées dans le thème parent actif à footer.tpl, theme.js, custom.js ou custom.css peuvent être écrasées. Un fichier nommé « custom » n’est pas automatiquement protégé. Confirmez que le thème charge vos ressources externes. L’injection en pied de page ne fonctionne que si le module prend en charge un hook et le thème le rend, par exemple displayFooter ou displayBeforeBodyClosingTag.

Si aucune commande adaptée n’existe et que votre équipe a besoin de réglages qu’elle peut gérer, Back to Top Button propose la distance de déclenchement, le côté, la taille, les espacements et une visibilité distincte sur ordinateur et téléphone. Désactivez toute commande concurrente et testez le résultat avec vos véritables widgets flottants.

Un en-tête fixe rend peut-être déjà recherche et panier accessibles. Testez si un bouton vers le haut aide les clients sur vos pages longues.

Implémenter et tester une commande de défilement accessible

Utilisez un vrai bouton doté d’un nom accessible. Gardez un focus visible, un contraste suffisant et une cible tactile confortable. Placez le balisage via le module ou thème enfant choisi et le CSS et JavaScript dans des ressources externes. Le code suivant est un exemple source, pas du contenu de page exécutable.

<button type="button" id="back-to-top" aria-label="Back to top" hidden>↑</button>

#back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 48px;
  height: 48px;
}
#back-to-top:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

const topButton = document.getElementById('back-to-top');
if (topButton) {
  const updateTopButton = () => {
    const shouldHide = window.scrollY <= window.innerHeight;
    if (shouldHide && document.activeElement === topButton) return;
    topButton.hidden = shouldHide;
  };
  window.addEventListener('scroll', updateTopButton, { passive: true });
  updateTopButton();
  topButton.addEventListener('click', () => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    window.scrollTo({ top: 0, behavior: reduce ? 'instant' : 'smooth' });
  });
}

Chargez ce code après le balisage ou via l’initialisation prise en charge par votre thème. Le seuil d’une hauteur de fenêtre est un choix de conception ; testez-le. Ce petit rappel de défilement s’exécute toujours sur le thread principal. Un écouteur passif ne le déplace pas ailleurs, et requestAnimationFrame coordonne le rendu sans garantir une fréquence d’événements plus faible. Limitez la fréquence selon des mesures si le coût réel du gestionnaire le justifie. Consultez les recommandations de MDN sur l’événement scroll.

Définissez décalages et empilement selon la page réelle, pas un z-index arbitrairement énorme. Testez avec consentement, chat, ajout au panier fixe, barres mobiles de validation et zones sûres du navigateur. Une commande visible peut rester impossible à cliquer sous une surimpression.

1. Vérifiez l’absence de bouton en double.
2. Utilisez Tab puis Entrée/Espace et confirmez que le focus reste visible.
3. Testez la réduction des animations et une page restaurée en position défilée.
4. Vérifiez l’utilisation des commandes d’achat lorsque tous les widgets flottants sont présents.
5. Testez longues catégories, avis, pages CMS et accueil sur les téléphones pris en charge.
6. Si utile, enregistrez un événement de clic respectant le consentement et examinez l’usage par page. Les clics ne prouvent pas seuls une hausse de conversion.

Publier la présentation et passer le relais

1. Faites valider la version de préproduction par la personne réellement responsable du contenu. Vérifiez les liens de campagne, les libellés traduits, les conditions des offres et la disponibilité des produits, y compris après la fin d’une offre programmée.
2. Suivez les parcours de menu, de recherche, de catégorie et de produit en visiteur déconnecté sur les téléphones et navigateurs de bureau pris en charge. Ajoutez un produit avec options, puis passez par le panier jusqu’à l’entrée du tunnel de commande ; une modification de l’accueil ne doit pas casser les commandes partagées.
3. Publiez les ressources et la configuration convenues sans remplacer les données des clients ou des commandes de production. Rafraîchissez les caches concernés et vérifiez la page publique, y compris avec le consentement accepté et refusé lorsque du contenu externe en dépend.
4. Comparez les mesures de l’accueil décrites ci-dessus sur une période et avec une répartition du trafic comparables. Si les actions suivantes diminuent, recherchez des destinations cassées, des produits indisponibles et des problèmes de chargement avant d’attribuer le changement à la conception.
5. Transmettez le plan des blocs, les réglages, l’emplacement des ressources et la procédure de retour arrière. Désignez la personne qui actualise chaque campagne et vérifie la présentation après les mises à jour du thème ou des modules.

Questions à poser à votre développeur ou agence

• Quels blocs proviennent du thème, du constructeur ou des modules, et quels réglages notre équipe peut-elle modifier ?
• À quel besoin nos outils actuels ne répondent-ils pas, et quels éléments justifient l’ajout proposé ?
• Où se trouvent les ressources personnalisées et comment les vérifierez-vous lors d’un changement du thème parent ?
• Quels appareils, langues et parcours d’achat ont passé les tests, et qui peut rétablir la présentation précédente ?

Questions des commerçants

Masquer un bloc de produits de l’accueil supprime-t-il ses produits ?

Dégreffer un bloc d’affichage supprime cet emplacement, pas les fiches du catalogue. Évitez de supprimer une catégorie source ou de modifier les affectations de produits simplement pour masquer une rangée. Vérifiez aussi les autres emplacements avant de désinstaller un module qui ne sert pas uniquement à l’accueil.

Retirer une bannière promotionnelle met-il fin à l’offre ?

Non. La visibilité de la bannière et le prix du produit ou la règle panier se règlent séparément. Alignez leurs conditions de début et de fin prévues, puis vérifiez l’offre et sa destination après la disparition de la bannière.

Chaque boutique du multiboutique peut-elle avoir un accueil différent ?

Vérifiez si le thème, le constructeur et les modules concernés enregistrent le contenu par boutique. Sélectionnez le contexte de la boutique visée avant toute modification, puis inspectez les autres boutiques. Une configuration partagée peut modifier davantage de vitrines que celle dont vous avez vu l’aperçu.

Faut-il jQuery pour le bouton d’exemple ?

Non. L’exemple utilise les API du navigateur et ne nécessite pas cette bibliothèque. Si un constructeur effectue de nouveau le rendu de la commande, assurez-vous que son initialisation ne duplique pas les gestionnaires d’événements.

Pourquoi l’exemple ne fait-il pas défiler un panneau indépendant ?

Il surveille et fait défiler la fenêtre. Une fenêtre modale ou un panneau de constructeur doté de sa propre zone de défilement nécessite une logique ciblant cet élément. Demandez à votre développeur d’identifier l’élément qui défile réellement et de le tester séparément du document.