Comment créer un slider e-commerce ? Dimensions du slider de la page d'accueil, visuel mobile, réglages de transition et vitesse de page : guide pratique, calculateur de la durée de boucle et audit du slider

Quand un visiteur arrive sur votre page d'accueil, la première chose qu'il voit est souvent le slider. Un slider bien conçu présente d'un coup d'œil une campagne, la nouvelle saison ou la catégorie la plus vendue. Un slider mal conçu est rogné sur téléphone, ralentit la page, mène à une page d'erreur au clic et gâche la première impression.

Dans ce guide, vous trouverez les réponses aux questions suivantes : comment créer un slider e-commerce, quelle dimension de visuel prévoir, pourquoi importer des visuels distincts pour ordinateur, tablette et mobile, comment choisir la durée de transition et l'effet, quel est l'impact du slider sur la vitesse de la page et comment gérer pas à pas le slider chez Faprika. Vous y trouverez aussi un outil de calcul de la durée de boucle du slider et une liste de contrôle.

Qu'est-ce qu'un slider e-commerce ?

Le slider est un espace de vitrine dynamique, en haut de la page d'accueil, où plusieurs visuels s'affichent tour à tour ou au fil du balayage de l'utilisateur. Chaque visuel présente une campagne, une catégorie, un produit ou une annonce et, au clic, mène à la page correspondante.

Le slider présente plusieurs messages dans un même espace d'écran. C'est sa force et aussi son risque : chaque diapositive rivalise avec les autres pour attirer l'attention, et le visiteur peut ne pas toutes les voir. Un bon slider se compose de peu de diapositives, claires.

Quelle est la différence entre un slider et une bannière ?

La bannière est un visuel fixe unique ; le slider est une structure qui affiche plusieurs bannières tour à tour. Si vous voulez mettre en avant une seule campagne, utilisez une bannière ; si vous voulez diffuser plusieurs messages différents dans le même espace, utilisez un slider.

Nous vous recommandons de lireConception de la page d'accueil et gestion de la vitrine e-commerce : comment organiser la vitrine de la page d'accueil ? Sections, classement, mobile, rapidité et calendrier des campagnes : guide pratique, calculateur de passage au produit et audit de la page d'accueil

Pourquoi le slider est-il important ?

Le slider occupe la zone la plus visible de la page d'accueil ; la façon dont vous l'utilisez détermine la première impression de la boutique. Il est important pour quatre raisons.

• Il crée la première impression : le visiteur comprend au premier regard ce que vend la boutique et ce qui est mis en avant.
• Il rend la campagne visible : une remise ou une annonce de nouvelle saison s'impose sans qu'on ait à la chercher.
• Il oriente le trafic : chaque diapositive est une porte qui conduit le visiteur vers une page de catégorie ou de produit.
• Il influe sur la vitesse de la page : comme les plus gros visuels s'y trouvent, un slider mal conçu ralentit la page.

Vous pouvez lire l'effet de la vitesse des pages sur les ventes dans l'article Pourquoi la vitesse du site est-elle importante en e-commerce ?.

Combien de diapositives un slider doit-il comporter ?

Pour la plupart des boutiques, trois à cinq diapositives suffisent. Plus il y en a, plus il faut de temps pour atteindre les dernières, la plupart des visiteurs descendent dans la page sans toutes les voir et le poids de la page augmente. Le principe général : le message le plus important doit être sur la première diapositive, et chaque diapositive doit remplir une seule fonction.

Vous pouvez penser vos diapositives dans cet ordre : d'abord la plus grande campagne, puis la catégorie la plus vendue, ensuite les nouveautés et un message de réassurance (comme la livraison gratuite ou le retour facile, uniquement si vous l'offrez réellement). Pour chaque diapositive, la réponse à la question « que trouvera le visiteur en cliquant ici ? » doit être claire.

À lire aussiCalendrier des campagnes e-commerce : comment préparer un plan de campagnes qui génère des ventes toute l'année

Quelle dimension donner au visuel d'un slider ?

La dimension du visuel de slider dépend de l'appareil sur lequel il sera affiché et de la disposition du slider. Chez Faprika, pour un slider plein écran, nous recommandons 1920×400 pixels sur ordinateur, 1200×400 sur tablette et 768×500 sur mobile ; pour un slider aligné au centre de la page, 1100×550 pixels. Un visuel préparé à la bonne dimension n'est ni rogné ni flou.

En préparant le visuel à ces dimensions, gardez le texte important et le produit près du centre du visuel. Les visuels plein écran peuvent être légèrement rognés sur les bords selon la largeur de l'écran ; un slogan ou un logo placé près du bord peut disparaître.

Que doit contenir un bon visuel de slider ?

Un bon visuel de slider porte un seul message, est lisible et comporte un appel à l'action. Le visiteur doit pouvoir répondre en une seconde aux questions « que propose-t-on, qu'est-ce que j'y gagne, que dois-je faire ? ».

• Un seul message : une campagne ou une idée par visuel.
• Texte court et grand : quelques mots qui restent lisibles même une fois réduits sur téléphone.
• Fort contraste : le texte doit se détacher nettement de l'arrière-plan.
• Appel à l'action clair : ajoutez une courte formule qui incite au clic, comme « Découvrir maintenant ».
• Visuel produit de qualité : un visuel flou ou étiré réduit la confiance dans la boutique.

À lire aussiComment photographier ses produits ? Guide de la photo produit e-commerce au téléphone

Pourquoi faut-il un visuel distinct pour chaque appareil ?

Un seul visuel horizontal devient soit illisible parce qu'il rétrécit sur téléphone, soit rogné au point de couper le message. Importer un visuel distinct pour chaque appareil garantit qu'il s'affiche sans rognage et à la bonne dimension sur chaque écran. Cela réduit aussi la consommation de données et le temps de chargement, car le téléphone ne télécharge pas un visuel inutilement lourd.

Chez Faprika, vous pouvez choisir ordinateur, tablette ou mobile pour chaque visuel de slider. Un visuel pour lequel vous avez choisi uniquement « Ordinateur » ne s'affiche que sur ordinateur, et un visuel pour lequel vous avez choisi uniquement « Mobile » ne s'affiche que sur les appareils mobiles. Ainsi, le visiteur de chaque appareil voit le visuel préparé spécialement pour lui.

Pourquoi l'affichage sur téléphone est si important E-Ticaret Sitesinde Mobil Uyumun Önemi dans l'article.

Comment renseigner l'adresse de redirection d'un slider ?

L'adresse du slider détermine la page vers laquelle le client est mené quand il clique sur la diapositive. Chez Faprika, dans ce champ, il suffit d'écrire non pas l'adresse complète mais la partie qui suit le nom de domaine (ce qui vient après le signe « / »). Ce champ ne doit pas rester vide : si aucune adresse n'est définie, le client qui clique sur la diapositive est redirigé vers une page d'erreur.

Dirigez la diapositive non vers une page générique, mais vers l'endroit que promet le message. Une diapositive qui annonce « Soldes sur les robes » doit mener directement à la catégorie des robes, et celle qui annonce « Nouvelles chaussures » à la catégorie correspondante. Si le visiteur ne voit pas le produit promis dès le premier clic, le slider peut générer des clics mais pas de ventes.

À quoi sert le nom de la diapositive ?

Chez Faprika, vous pouvez donner un nom facultatif à la diapositive. Ce champ n'est pas obligatoire, mais il aide à distinguer les diapositives dans la liste. Des noms qui décrivent la campagne, comme « Ouverture de la saison d'hiver » ou « Annonce de la livraison gratuite », facilitent le fait de se rappeler, quelques mois plus tard, quelle diapositive correspond à quelle campagne.

Comment régler le défilement automatique, la durée d'attente et l'effet ?

Les paramètres du slider déterminent combien de temps les diapositives restent à l'écran, comment on passe de l'une à l'autre et avec quel effet. Chez Faprika, ces réglages se trouvent dans Configuration, Paramètres, Paramètres du slider, et la modification enregistrée s'applique à tous les sliders.

Quelle durée d'attente choisir ?

La durée d'attente doit être assez longue pour que le message du visuel puisse être lu confortablement. Plus le texte est long, plus la durée doit l'être ; mais plus la durée s'allonge, plus il faut de temps pour atteindre les dernières diapositives. La durée et le nombre de diapositives doivent être pensés ensemble.

L'outil ci-dessous calcule, à partir du nombre de diapositives, des durées d'attente et de transition et de la taille des visuels, la durée d'un tour, le temps écoulé jusqu'à la dernière diapositive et le poids total des visuels. Les durées d'attente et de transition sont en millisecondes, comme chez Faprika (1000 millisecondes font une seconde).

Interprétez le résultat de l'outil en fonction du comportement des visiteurs de votre boutique. Si vous savez combien de temps les visiteurs restent sur la page d'accueil, ne réglez pas une boucle plus longue que cette durée si vous voulez que tout le slider soit vu. Si vous ne le savez pas, placer la campagne la plus importante sur la première diapositive est dans tous les cas la bonne décision.

Quel effet de transition choisir ?

Chez Faprika, vous pouvez choisir l'un des effets Slide, Fade, Cube, Coverflow et Flip. Pour la plupart des boutiques, les effets sobres (glissement ou fondu) sont le meilleur choix : le visiteur se concentre sur le message, pas sur l'effet. Les effets spectaculaires comme le cube ou le retournement peuvent distraire et donner une impression de saccade sur les appareils lents.

Quel est l'impact du slider sur la vitesse de la page ?

Le slider porte les plus gros visuels de la page d'accueil ; s'il est mal conçu, il devient donc le premier élément qui ralentit la page. Deux règles valent pour la vitesse : ne pas importer de visuel plus grand que nécessaire et utiliser pour chaque appareil un visuel de dimension adaptée.

• Gardez des fichiers légers : compressez le visuel avant de l'importer ; une perte de qualité invisible à l'œil réduit souvent fortement le fichier.
• Utilisez un visuel adapté à l'appareil : faire télécharger à un téléphone un visuel de dimension ordinateur consomme des données inutilement ; un visuel propre à l'appareil évite cela.
• Limitez le nombre de diapositives : le visuel de chaque diapositive s'ajoute au poids total de la page.
• Soignez au mieux la première diapositive : le premier visuel qui s'affiche à l'ouverture de la page détermine la perception de la vitesse.

Pour la compression des visuels et le choix du format, consultez le guide Comment optimiser les images produit ? Taille, format (WebP), nom de fichier et texte alternatif en e-commerce : guide pratique.

Quelles erreurs font échouer un slider ?

Les erreurs de slider naissent le plus souvent de petites négligences, mais leurs effets sont importants car il se trouve à l'endroit le plus visible de la page d'accueil. Les erreurs les plus fréquentes sont les suivantes :

• Laisser l'adresse de redirection vide : le client qui clique sur la diapositive tombe sur une page d'erreur.
• Utiliser un seul visuel horizontal sur tous les appareils : sur téléphone, le message est rogné ou illisible.
• Ajouter trop de diapositives : les dernières ne sont jamais vues et la page s'alourdit.
• Laisser en ligne une campagne terminée : cela entame la confiance et déçoit.
• Entasser trop de texte dans le visuel : illisible sur téléphone, il paraît surchargé.
• Éclipser le message par un effet spectaculaire : le visiteur s'intéresse à l'effet, pas à l'offre.

Liste de contrôle du slider

Avant de mettre le slider en ligne, parcourez la liste ci-dessous. Lorsque chaque point est « oui », le slider est prêt, tant pour le visiteur que pour la vitesse de la page.

Comment gérer le slider chez Faprika ?

Chez Faprika, vous gérez le slider depuis le panneau, sans écrire de code. Vous importez les visuels dans Gestion du contenu, Gestion du slider, et vous définissez l'apparence et les transitions dans Configuration, Paramètres, Paramètres du slider.

• Import par glisser-déposer : vous pouvez importer de nombreux visuels d'un seul coup en quelques secondes.
• Visuel propre à l'appareil : pour chaque visuel, vous pouvez choisir ordinateur, tablette ou mobile.
• Disposition plein écran ou centrée : selon vos préférences de design, vous pouvez choisir un slider large ou une structure sobre et centrée.
• Nom de la diapositive et adresse de redirection : vous donnez un nom facultatif à la diapositive et saisissez l'adresse de la page de catégorie ou de produit vers laquelle le clic mène.
• Réglages du défilement automatique : vous définissez la durée d'attente, la durée de transition et l'effet (Slide, Fade, Cube, Coverflow, Flip).
• Largeur et hauteur : vous réglez en pixels l'espace que le slider occupe sur le site.

Les paramètres du slider s'appliquent à tous les sliders ; autrement dit, la durée d'attente ou l'effet se définit pour l'ensemble du slider, pas diapositive par diapositive. Après avoir modifié un réglage, il est donc bon d'ouvrir la page d'accueil sur ordinateur et sur téléphone pour l'essayer. Pour tous les détails du panneau, consultez les pages de formation Gestion du slider et Gestion des paramètres du slider.

Nous vous recommandons de lireQu'est-ce que la gestion des annonces ? Comment diffuser des annonces et des campagnes sur un site e-commerce

Comment gérer les vitrines de la page d'accueil avec Faprika ?

Faprika vous permet de gérer la vitrine de la page d'accueil depuis le panneau. Le slider n'en est qu'une partie ; il faut le penser avec le menu, les annonces, les catégories et les zones de produits. Voici les principales options :

• Gestion du slider : vous importez par glisser-déposer les visuels de slider propres à chaque appareil et saisissez leurs adresses.
• Paramètres du slider : vous définissez au même endroit la transition, la durée d'attente, l'effet et la taille.
• Gestion du menu : vous modifiez les intitulés du menu et les visuels de campagne.
• Gestion des annonces : vous affichez en haut de la page de courtes annonces programmées.
• Gestion des médias et du contenu : vous gérez les visuels et les pages de contenu depuis le panneau.

Vous pouvez voir quelles fonctionnalités figurent dans quelle offre dans la comparaison des offres e-commerce.

Nous vous recommandons de lireQuelle structure de menu pour un site e-commerce ? Guide du menu principal, du méga-menu et de l'organisation des catégories

Questions fréquentes

Qu'est-ce qu'un slider e-commerce ?

Le slider est un espace de vitrine dynamique, en haut de la page d'accueil, où plusieurs visuels défilent tour à tour. Chaque visuel présente une campagne, une catégorie ou une annonce et, au clic, mène à la page correspondante.

Quelle dimension pour le visuel d'un slider ?

Chez Faprika, pour un slider plein écran, nous recommandons 1920×400 pixels sur ordinateur, 1200×400 sur tablette et 768×500 sur mobile ; pour un slider centré, 1100×550 pixels. La bonne dimension évite que le visuel soit rogné ou flou.

Pourquoi faut-il un visuel mobile distinct pour le slider ?

Un visuel horizontal rétrécit ou se fait rogner sur téléphone. Importer un visuel distinct pour le mobile permet de lire le message sur un petit écran et évite de faire télécharger un fichier inutilement lourd, ce qui réduit la consommation de données.

Que se passe-t-il si l'adresse du slider reste vide ?

Chez Faprika, l'adresse du slider doit absolument être renseignée. Sans adresse, le client qui clique sur la diapositive est redirigé vers une page d'erreur. Pour saisir l'adresse, il suffit d'indiquer la partie qui suit le nom de domaine (après le « / »).

Combien de diapositives un slider doit-il comporter ?

Pour la plupart des boutiques, trois à cinq diapositives suffisent. Plus il y en a, moins les dernières sont vues et plus la page s'alourdit. Placez le message le plus important sur la première diapositive et réduisez chaque diapositive à un seul message.

Comment choisir l'effet de transition du slider chez Faprika ?

Dans Configuration, Paramètres, Paramètres du slider, vous pouvez choisir l'un des effets Slide, Fade, Cube, Coverflow ou Flip. Vous définissez aussi, au même endroit, la durée d'attente et de transition en millisecondes ; la modification s'applique à tous les sliders.

Articles qui peuvent vous intéresser

• Conception de la page d'accueil e-commerce et gestion de la vitrine : comment organiser la vitrine de la page d'accueil ? Sections, classement, mobile, vitesse et calendrier des campagnes, guide pratique, calculateur de passage vers le produit et audit de la page d'accueil
• Calendrier des campagnes e-commerce : comment préparer un plan de campagnes qui génère des ventes toute l'année
• Comment optimiser les images produits ? Guide pratique de la taille, du format (WebP), du nom de fichier et du texte alternatif en e-commerce
• E-Ticaret Sitesinde Mobil Uyumun Önemi