BTS NDRC, épreuve E5B : tutoriel PrestaShop
Configurer le module Carrousel
Le carrousel fait défiler de grandes images en haut de la page d'accueil : c'est la première chose que voit le visiteur. Chaque diapositive porte une image, un titre, un court texte et un lien vers une page de la boutique. Pour l'entreprise, c'est l'affiche de sa vitrine : une saison, une nouveauté, une opération commerciale, à changer aussi souvent que son actualité.
Dans la circulaire
Famille « Module » de la liste PrestaShop : « Activer/désactiver et configurer le module Carrousel » (annexe VI-3 de la circulaire nationale d'organisation, session 2026).
Critères de la grille d'évaluation concernés : 1. « la qualité et la pertinence des contenus publiés » ; 4. « le rythme adapté d'actualisation des contenus » ; 6. « la pertinence des choix et des actions menées pour développer les ventes et créer de la valeur ».
Où le trouver
Activer, désactiver, configurer : Modules › Gestionnaire de modules, ligne « Carrousel » : bouton « Configurer », et flèche voisine pour « Désactiver ».
Diapositives : dans la page « Configurer » du module, partie « Liste des diapositives » : bouton « + » pour en ajouter, « Modifier » pour en reprendre une.
Les étapes
- Ouvrir Modules > Gestionnaire de modules et repérer la ligne Carrousel, parmi les modules du thème, ou la retrouver avec le champ de recherche, au-dessus de la liste. Pour désactiver le module, cliquer sur la flèche à droite de « Configurer », puis sur « Désactiver », et confirmer : le carrousel ne s'affiche plus, mais ses diapositives et ses réglages sont gardés. Un module désactivé présente un bouton « Activer ».
Capture 1. Modules > Gestionnaire de modules : encadrés, le menu, le module Carrousel et ses boutons « Configurer » et flèche :
- Cliquer sur Configurer. La partie « Paramètres » règle le défilement : Vitesse, en millisecondes (5 000 sur le modèle : chaque diapositive reste 5 secondes avant la suivante) ; Pause au survol, qui arrête le défilement « quand le curseur de la souris passe au-dessus du carrousel » ; Répéter les images, pour repartir de la première diapositive après la dernière, ou s'arrêter. Ces réglages ont leur propre bouton Enregistrer.
- La partie « Liste des diapositives » les présente dans leur ordre d'affichage : sur le modèle, #1 Plage du Mourillon, #2 Comptoir élégant et #3 Un coffre sur mesure. Chacune a un bouton vert Activé, qui montre qu'elle est affichée et change son état d'un clic, un bouton Modifier et un bouton Supprimer. Pour changer l'ordre, faire glisser une diapositive par sa poignée, à gauche : le nouvel ordre est enregistré dès qu'on relâche la souris.
Capture 2. La configuration du Carrousel : encadrés, les réglages du défilement et leur bouton « Enregistrer », le bouton « + », la poignée et les boutons de la première diapositive :
- Pour ajouter une diapositive, cliquer sur +, en haut à droite de la liste (infobulle « Ajouter »). Le formulaire « Paramètres de la diapositive » demande :
- l'Image, seul champ obligatoire, choisie sur l'ordinateur avec « Choisissez un fichier » (« Taille maximale de l'image : 2M. ») ;
- le Titre et la Description, écrits sur l'image dans la boutique ;
- l'URL cible, l'adresse de la page qui s'ouvre quand le client clique sur la diapositive ;
- la Légende, qui ne s'affiche pas : elle devient le texte alternatif de l'image, lu au client malvoyant et par les moteurs de recherche ;
- Activé, sur « Non » à l'ouverture du formulaire : le passer sur « Oui » pour que la diapositive s'affiche.
Capture 3. Le formulaire d'une nouvelle diapositive, ouvert par « + » : encadrés, l'image, les champs de texte, l'état et le bouton « Enregistrer » :
- Contrôler la page d'accueil de la boutique, rechargée : le carrousel présente les diapositives activées, dans l'ordre de la liste, avec leur titre et leur description ; les flèches, de part et d'autre, passent d'une diapositive à l'autre. Cliquer sur la diapositive pour vérifier son lien.
Capture 4. Le carrousel de la page d'accueil, arrêté sur la diapositive 2 : encadrés, son titre et sa description, et les deux flèches :
Attention
Le bouton vert « Activé » et la poignée agissent tout de suite, sans « Enregistrer » : un clic sur « Activé » change l'état de la diapositive, un glisser-déposer change l'ordre. « Supprimer » efface la diapositive : pour la retirer le temps d'une opération, mieux vaut la désactiver.
Captures réalisées sur la boutique modèle PaletteWorks (PrestaShop 9.0.0, thème Classic) : selon la version installée le jour de l'épreuve, un libellé peut changer. Le formulaire d'ajout a été ouvert puis quitté sans enregistrer ; sur la boutique, le carrousel a été arrêté sur la deuxième diapositive pour la capture.
Bien préparer une diapositive
Une diapositive se lit en quelques secondes, 5 sur le modèle avant la suivante. Elle dit une seule chose et mène quelque part.
- Préparer des images au format du cadre : sur un écran d'ordinateur, le carrousel du modèle mesure 1 110 pixels sur 340, alors que ses photos font 533 ou 406 pixels de large sur 400 et n'en remplissent que la partie gauche (capture 4).
- Écrire un titre de quelques mots et une description d'une ligne : le texte s'affiche en blanc sur la photo et doit rester lisible.
- Faire pointer l'URL cible vers la page de la boutique dont parle l'image : une catégorie, un produit, la page de contact pour un devis.
- Rédiger une légende qui décrit la photo, sans faute : c'est le texte alternatif de l'image.
- Changer les diapositives au rythme des saisons et des opérations commerciales, et désactiver celles qui sont dépassées.
| Champ | Réussi | À éviter |
|---|---|---|
| Titre | « Comptoir élégant » : court et clair (le modèle) | Une phrase entière, illisible en 5 secondes |
| Description | « Comptoir en palettes, création sur mesure » : une ligne qui dit ce que l'on vend | Un paragraphe qui couvre la photo |
| URL cible | La page de contact de la boutique, pour demander un devis sur mesure | L'adresse du site du projet PrestaShop, laissée sur le modèle : le client quitte la boutique |
| Légende | « Comptoir de bar en bois de palette, avec tabourets » : elle décrit la photo | « Comptoir de luxe » (le modèle), qui ne décrit pas l'image ; « Un bar origninal » (diapositive 1), avec une faute |
| Image | Une photo au format du cadre, qui le remplit | Une photo de 406 pixels de large dans un cadre de 1 110 (le modèle) : le reste du cadre est vide |
Sur le modèle, les trois diapositives renvoient vers le site du projet PrestaShop, une adresse de démonstration jamais changée : un client qui clique quitte la boutique. Leurs photos, trop petites pour le cadre, laissent un grand vide à droite, et la légende de la première contient une faute. C'est l'exemple à reprendre.
À l'épreuve
Exemple de consigne
Pour la fête des pères, PaletteWorks met en avant son mobilier de jardin. Ajoutez au carrousel une diapositive « Fête des pères » (image fournie), avec une description d'une ligne, une légende et un lien vers la catégorie « Le jardin ». Placez-la en premier, désactivez la diapositive « Plage du Mourillon », puis vérifiez le résultat sur la boutique.
Ce que l'examinateur vérifie
- La nouvelle diapositive activée, en tête de liste, avec son image, son titre, une description courte, une légende qui décrit l'image et l'adresse de la catégorie « Le jardin ».
- « Plage du Mourillon » désactivée, et non supprimée.
- Le carrousel contrôlé sur la page d'accueil : la nouvelle diapositive en premier, son lien qui ouvre la bonne page.
Les erreurs fréquentes
- Laisser « Activé » sur « Non » : la diapositive est enregistrée, mais elle ne s'affiche pas.
- Écrire dans « Légende » le texte à afficher : la légende sert de texte alternatif ; le texte visible va dans « Titre » et « Description ».
- Oublier l'URL cible, ou y coller l'adresse d'un autre site.
- Supprimer une diapositive au lieu de la désactiver.
- Cliquer sur l'« Enregistrer » des réglages du défilement en pensant enregistrer une diapositive : chaque formulaire a son bouton.
L'essentiel à retenir
- Modules > Gestionnaire de modules, Carrousel, « Configurer » : les réglages du défilement en haut, la liste des diapositives en dessous ; la flèche de la ligne du module donne « Désactiver ».
- « + » ajoute une diapositive : image obligatoire, titre et description écrits sur l'image, URL cible, légende (texte alternatif), « Activé » sur « Oui », puis « Enregistrer ».
- L'ordre se change avec la poignée, l'état avec le bouton « Activé » : les deux s'enregistrent aussitôt.
- Contrôler la page d'accueil : ordre, textes et lien de chaque diapositive.
Voir aussi
Dans la série des tutoriels PrestaShop :
- Modifier la position des blocs de la page d'accueil
- Configurer le module des produits phares
- Modifier la légende d'une image de produit, l'autre texte alternatif à soigner
- Créer et insérer des liens
Dans le tutoriel PrestaShop complet :
- Page d'accueil, modules et pages de contenu, dont le module Carrousel
- Exemples de consignes d'épreuve, dont l'animation de la page d'accueil
Sur le calendrier des temps forts : Dynamiser un site de e-commerce, construire le plan d'animation annuel. Documentation officielle de PrestaShop, en anglais : les modules installés, à configurer, désactiver ou réinitialiser (version 8).