Page d'accueil e-commerce : plan section par section

Plan de page d'accueil e-commerce : contenu au-dessus de la ligne de flottaison, ordre des sections, checklist de lancement et conseils mobiles.

Questions fréquentes

Que doit contenir la page d'accueil d'un site e-commerce ?

Au minimum : un en-tête avec recherche, panier et navigation par catégories ; un bandeau d'accueil (hero) qui dit ce que vous vendez et propose une seule action claire ; un accès à vos principales catégories ; quelques meilleures ventes ou nouveautés ; des gages de confiance comme la livraison, les retours et de vrais avis ; et un pied de page avec les conditions et les coordonnées. Tout le reste (blocs éditoriaux, inscription à la newsletter, preuve sociale) est facultatif et doit mériter sa place.

Que placer au-dessus de la ligne de flottaison sur une page d'accueil e-commerce ?

Quatre choses : une navigation qui inclut la recherche et le panier, un titre qui nomme ce que vous vendez, un appel à l'action principal qui mène aux produits, et une raison visible de faire confiance à la boutique, comme une mention de livraison ou de retours. Une image produit forte dans le hero aide les visiteurs à comprendre le catalogue sans rien lire.

Combien de produits afficher sur la page d'accueil ?

Il n'existe pas de chiffre universel. Montrez-en assez pour représenter la gamme, en général une rangée ou une grille fixe (sans carrousel) de meilleures ventes avec des vignettes de catégories, puis renvoyez vers la collection complète. Si vous vendez quelques produits, vous pouvez tous les afficher. Si vous en vendez des milliers, la page d'accueil doit orienter vers les catégories, pas tenter d'exposer tout le catalogue.

Une page d'accueil e-commerce doit-elle avoir un slider ou un carrousel ?

Un hero unique et fixe communique généralement plus clairement qu'un hero rotatif. Les diapositives automatiques cachent le contenu derrière un minuteur, sont plus difficiles à rendre accessibles et alourdissent souvent la page. Si vous devez mettre plusieurs choses en avant, donnez à chacune sa propre vignette sous le hero.

Comment accélérer le chargement de ma page d'accueil e-commerce ?

Compressez et dimensionnez correctement les images, utilisez des formats modernes comme WebP ou AVIF, chargez l'image du hero en priorité et en lazy-load tout ce qui se trouve en dessous, limitez les scripts tiers (widgets de chat, popups, suivi) et réservez l'espace des images pour que la mise en page ne saute pas pendant le chargement. PageSpeed Insights de Google et le rapport Core Web Vitals de la Search Console montrent ce qui est réellement lent sur votre page.

La page d'accueil ou la fiche produit : laquelle est la plus importante ?

Les fiches produit et les pages de collection sont là où se prennent la plupart des décisions d'achat, mais la page d'accueil est souvent la première impression pour les visiteurs directs, ceux qui cherchent votre marque et ceux qui reviennent. Son rôle est l'aiguillage : amener chaque visiteur rapidement vers la bonne catégorie ou le bon produit. Consultez vos propres statistiques pour voir combien de sessions commencent sur la page d'accueil avant de décider où investir.

En bref : une bonne page d'accueil e-commerce a une seule mission : amener chaque visiteur vers les bons produits, vite. Placez un en-tête clair (recherche, panier, catégories), un hero qui dit ce que vous vendez avec un seul bouton principal, des vignettes de catégories, une courte rangée de meilleures ventes, des gages de confiance (livraison, retours, avis) et un pied de page utile, dans cet ordre. Tout ce qui se trouve au-dessus de la ligne de flottaison doit répondre à : « Quelle est cette boutique, et où dois-je cliquer ? »

Le plan en un coup d'œil

Utilisez-le comme ordre de départ. Supprimez les sections que vous ne pouvez pas remplir avec du vrai contenu : un bloc « témoignages » vide fait plus de tort que pas de bloc du tout.

#	Section	Rôle	À limiter à
1	Bandeau d'annonce	Un message d'actualité : seuil de livraison gratuite, fin de promotion, date limite de livraison	Une ligne
2	En-tête et navigation	Recherche, panier, compte, catégories principales	5 à 7 liens de premier niveau
3	Hero	Dire ce que vous vendez, proposer une seule action	Un titre, un bouton
4	Bandeau de confiance	Livraison, retours, paiement, assistance	3 à 4 courts éléments
5	Vignettes de catégories	Orienter les acheteurs selon ce qu'ils veulent	4 à 8 vignettes
6	Meilleures ventes / nouveautés	Prouver que le catalogue existe vraiment	Une rangée ou une grille
7	Bloc de valeurs ou d'histoire	Pourquoi vous plutôt qu'une autre boutique	Un court bloc
8	Preuve sociale	Vrais avis, presse, photos de clients	Seulement si authentique
9	Inscription par e-mail	Capter les visiteurs pas encore prêts à acheter	Un seul champ
10	Pied de page	Conditions, contact, liens secondaires	Colonnes organisées

Ce qui se place au-dessus de la ligne de flottaison

La « ligne de flottaison » correspond à ce que le visiteur voit avant de faire défiler la page, et cela varie selon l'appareil. Concevez séparément pour un écran d'ordinateur portable et pour un téléphone, plutôt que de tracer une seule ligne sur une maquette. Quel que soit l'appareil, ces quatre éléments doivent être visibles sans défilement :

Une navigation avec recherche et panier. Les acheteurs qui savent ce qu'ils veulent utilisent d'abord la recherche. Ne la cachez pas derrière une icône sur ordinateur.
Un titre qui nomme le produit. « Mugs en céramique faits main, expédiés depuis Lyon » vaut mieux que « Bienvenue dans notre boutique ». Dites la catégorie avec des mots simples.
Un appel à l'action principal. « Voir les mugs » ou « Découvrir les nouveautés ». Un second lien plus discret est acceptable ; trois boutons de même poids, non.
Une raison de vous faire confiance. Un seuil de livraison gratuite, un délai de retour ou un nombre d'avis que vous pouvez réellement justifier. N'utilisez que des affirmations que vous pouvez prouver.

Utilisez dans le hero une vraie photo de produit ou de mise en situation, pas une image de banque d'images qui pourrait appartenir à n'importe quelle boutique. L'image est le moyen le plus rapide pour un visiteur de confirmer qu'il est au bon endroit.

Notes section par section

En-tête et navigation

Limitez les catégories de premier niveau à ce qu'un nouveau visiteur chercherait, avec les mots qu'il emploie. Mettez la recherche dans un champ visible, tenez le compteur du panier à jour et faites pointer le logo vers l'accueil. Si votre catalogue est vaste, un méga-menu peut fonctionner, mais vérifiez qu'il est utilisable au pavé tactile et au clavier. Pour aller plus loin sur le reste de la boutique, consultez nos bonnes pratiques de conception de site e-commerce.

Hero

Le hero doit porter un seul message. Si vous menez une promotion saisonnière, faites-en le hero pendant sa durée, puis revenez à votre message permanent. Évitez les diapositives à défilement automatique : elles cachent le contenu derrière un minuteur et sont plus difficiles à rendre accessibles. Si vous avez plusieurs campagnes, donnez à chacune sa propre vignette plus bas sur la page.

Vignettes de catégories

C'est la section qui fait le gros du travail. Chaque vignette a besoin d'une photo claire et d'un libellé simple (« Chaussures de running femme », pas « Collection Foulée »). Classez-les selon ce que vous voulez vendre en priorité ou ce que les visiteurs demandent le plus, pas par ordre alphabétique.

Meilleures ventes et nouveautés

Montrez de vrais produits avec de vrais prix, pas une grille générique. Chaque fiche a besoin d'une image, d'un nom, d'un prix et d'un lien ; n'ajoutez des notes que si vous avez de vrais avis. Gardez des proportions d'image cohérentes pour que la grille reste propre. Terminez la rangée par un lien « Tout voir » vers la page de collection.

Confiance et preuve sociale

Les acheteurs hésitent à cause des frais de livraison, des retours et de la fiabilité de la boutique. Répondez-y sur la page d'accueil par des lignes courtes et précises : délais de livraison, délai de retour, moyens de paiement acceptés et moyen de vous contacter. Pour les avis, affichez de vrais avis avec des noms ou des mentions « vérifié » si votre plateforme le permet. N'inventez jamais de témoignages ou de notes : c'est contraire à l'éthique et, dans de nombreux pays, contraire aux règles de protection des consommateurs.

Pied de page

Le pied de page est l'endroit où les acheteurs attentifs cherchent les conditions. Incluez livraison, retours, confidentialité, conditions générales, contact, et un lien vers votre guide des tailles ou votre FAQ si vous en avez un. Nous traitons ces mises en page dans nos exemples de design de pied de page.

Notes pour le mobile

La plupart des boutiques reçoivent une grande part de leurs visites sur téléphone ; consultez vos propres statistiques pour connaître la répartition. Concevez la page d'accueil mobile comme une mise en page à part entière, pas comme une page de bureau écrasée.

Gardez le hero court. Le titre, l'image et le bouton doivent tous être visibles sur un écran de téléphone standard sans dépasser l'en-tête.
Prévoyez de grandes zones tactiles. Boutons, filtres et éléments de menu ont besoin d'une taille et d'un espacement adaptés aux pouces. Testez sur un vrai appareil.
Réduisez la navigation intelligemment. Une icône de menu convient, mais gardez la recherche et le panier visibles dans la barre d'en-tête.
Utilisez le défilement horizontal avec parcimonie. Une rangée de produits qui défile sur le côté est acceptable si elle laisse visiblement deviner la suite ; une grille empilée est plus sûre.
Évitez les popups plein écran à l'arrivée. Ils bloquent la page et peuvent nuire à la fois à l'utilisabilité et à la visibilité dans les moteurs de recherche. Retardez-les ou remplacez-les par un bloc d'inscription intégré à la page.
Surveillez le clavier. Vérifiez que le champ d'inscription par e-mail n'est pas masqué à l'ouverture du clavier à l'écran.

Bases de vitesse et d'accessibilité

Une belle page d'accueil qui charge lentement perd des visiteurs avant même qu'ils la voient. Les principaux leviers sont presque toujours les images et les scripts tiers.

Compressez les images et utilisez des formats modernes comme WebP ou AVIF.
Donnez aux images une largeur et une hauteur explicites pour que la mise en page ne bouge pas pendant le chargement.
Chargez d'abord l'image du hero ; chargez les images situées en dessous en lazy-load.
Passez en revue chaque script tiers (chat, popups, traceurs) et supprimez ceux que vous n'utilisez pas.
Rédigez un vrai texte alternatif pour les images de produits et de catégories.
Vérifiez que le texte a un contraste suffisant avec son arrière-plan et que chaque élément interactif fonctionne au clavier.

Utilisez PageSpeed Insights de Google sur votre URL en ligne pour voir quels fichiers précis vous ralentissent.

Checklist de la page d'accueil

Copiez-la dans vos notes de lancement :

[ ] L'en-tête contient une recherche visible, le panier et 5 à 7 liens de catégories clairs
[ ] Le titre du hero nomme ce que nous vendons avec des mots simples
[ ] Un seul bouton principal ; il mène aux produits, pas à une page « À propos »
[ ] L'image du hero montre un vrai produit ou un vrai usage
[ ] Livraison et retours résumés au-dessus ou juste sous la ligne de flottaison
[ ] Les vignettes de catégories emploient le vocabulaire des clients et couvrent les principales gammes
[ ] Les meilleures ventes affichent de vrais prix et renvoient vers les fiches produit
[ ] Avis et presse affichés seulement s'ils sont authentiques
[ ] L'inscription par e-mail tient en un seul champ avec un bénéfice clair
[ ] Le pied de page inclut les conditions, les coordonnées et les moyens de paiement
[ ] Aucun carrousel automatique ne cache du contenu clé
[ ] Mise en page mobile vérifiée sur un vrai téléphone
[ ] Images compressées, dimensionnées et dotées d'un texte alternatif
[ ] Balise title et meta description rédigées spécifiquement pour la page d'accueil

Erreurs courantes

Vouloir tout montrer. La page d'accueil est un aiguillage, pas un catalogue.
Un texte de hero vague. Si un inconnu ne comprend pas ce que vous vendez en cinq secondes, réécrivez le titre.
Promouvoir cinq choses à égalité. Quand tout est mis en avant, rien ne l'est.
Fausse urgence. Les comptes à rebours qui se remettent à zéro à chaque visite font perdre la confiance.
Ignorer les visiteurs qui reviennent. Envisagez un bloc « Reprendre mes achats » ou « Récemment consultés » si votre plateforme le permet.

Pour des principes plus généraux sur les pages d'accueil au-delà du e-commerce, nos guides comment concevoir une page d'accueil et concevoir la page d'accueil d'un site web vont plus loin, et si vous hésitez encore sur la plateforme, consultez les meilleurs créateurs de site pour l'e-commerce.

Passer à la pratique

Commencez par rédiger le contenu avant de concevoir : votre titre, vos noms de catégories, vos lignes de livraison et de retours, et vos six meilleurs produits. Placez-les ensuite dans l'ordre ci-dessus. Pour prendre de l'avance sur la mise en page, l'offre gratuite de We.Inc permet de publier jusqu'à trois sites à partir de modèles prêts à l'emploi ; le créateur IA qui rédige un site à partir d'une description démarre avec l'offre Starter à $20 par mois. Vous pouvez vous inscrire ici. Quel que soit l'outil utilisé, passez en revue chaque section avec la checklist avant de lancer.

Commencer gratuitement · Sans carte bancaire

Umair Ali Sadaqat

Fondateur de We.Inc

Umair est le fondateur de We.Inc. Il écrit sur la création de sites web avec l’IA, les agences et la gestion d’un studio web.

Prêt à créer quelque chose de grand ?

Rejoignez les 15,000+ entreprises qui utilisent We.Inc pour lancer, développer et automatiser, le tout depuis une seule plateforme.