Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 et 1.7

Aujourd’hui, nous allons voir comment configurer le diaporama de votre page d’accueil sur votre boutique en ligne sur Prestashop 1.6 &Prestashop 1.7

————————————————————————————————————————

Tutorial pour Prestashop 1.6

A noter la taille de l’image pour le diaporama est de 779px de large pour 448px de haut.

Etape 1: Tout d’abord, connectez-vous au back-office de votre site Prestashop puis, allez dans Modules & Services >  Modules & Services

Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 & 1.7


Etape 2: 
Dans le champ recherche, tapez “diaporama” (le module s’appelle “Diaporama pour votre page d’accueil”) puis cliquez sur “configurer”

Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 & 1.7


Etape 3:
Configurer les paramètres du diaporama

Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 & 1.7

  • Largeur maximale de l’image: correspond à la largeur maximum de vos images à l’intérieur du diaparoma
  • Vitesse: correspond à la vitesse à laquelle vous désirez que vos images défilent.
  • Pause: correspond au temps d’arrêt entre chaque image.
  • Lecture automatique: si vous activez cette option, les images défileront automatiquement, sinon le client devra cliquer sur les flèches pour visualiser les autres images de votre diaporama.


Etape 4:
Ajouter ou modifier les images sur votre diaporama

– pour ajouter une image: cliquez sur le bouton + en haut à droite
– pour modifier une image:  cliquez sur le bouton “modifier” à côte de l’image que vous désirez modifier

Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 & 1.7

Puis insérez les informations de votre image

Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 & 1.7

  • Sélectionner le fichier: permet d’uploader votre image.
  • Le titre de la diapositive: correspond au nom donné à votre image (n’apparaît pas sur le front-office de votre boutique).
  • URL cible: permet d’insérer un lien sur votre image. Ainsi lorsque le client clique sur l’image il sera renvoyé sur la page du lien.  Si vous ne désirez pas insérer un lien, il suffit de mettre #.
  • Légende: si votre image ne se charge pas, le texte de légende apparaitra. Ce champ est important pour l’accessibilité et permet aussi le référencement de votre image.
  • Description: permet de mettre une description sur votre image, attention le texte apparaît pas sur le front-office de votre boutique.
  • Actif. permet d’activer ou de désactiver l’image.

—————————————————————————————-

Tutorial pour Prestashop 1.7

A noter la taille de l’image pour le diaporama est de 1110px de large pour 340px de haut.

Etape 1: Tout d’abord, connectez-vous au back-office de votre site Prestashop puis, allez dans Modules  >  Modules & Services

Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 et 1.7


Etape 2: 
Dans le champ recherche, tapez “carrousel” (le module s’appelle “Carrousel”) puis cliquez sur “configurer”

Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 et 1.7


Etape 3:
Configurer les paramètres du diaporama

Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 et 1.7

  • Vitesse: correspond à la vitesse à laquelle vous désirez que vos images défilent.
  • Pause au survol: si vous activez cette option les images arrêteront de défiler lorsque la souris passe au dessus du carrousel
  • Répéter les images: si vous activez cette option, les images se répéteront à l’infini, sinon le carrousel s’arrêtera à la fin de la dernière image.


Etape 4:
Ajouter ou modifier les images sur votre diaporama

– pour ajouter une image: cliquez sur le bouton + en haut à droite
– pour modifier une image:  cliquez sur le bouton “modifier” à côte de l’image que vous désirez modifier

5-prestashop1_7-diaporama

Puis insérez les informations de votre image

4-prestashop1_7-diaporama

  • Image: permet d’uploader votre image.
  • Titre: correspond au nom donné à votre image (n’apparaît pas sur le front-office de votre boutique).
  • URL cible: permet d’insérer un lien sur votre image. Ainsi lorsque le client clique sur l’image il sera renvoyé sur la page du lien.  Si vous ne désirez pas insérer un lien, il suffit de mettre #.
  • Légende: si votre image ne se charge pas, le texte de légende apparaitra. Ce champ est important pour l’accessibilité et permet aussi le référencement de votre image.
  • Description: permet de mettre une description sur votre image, attention le texte apparaît pas sur le front-office de votre boutique.
  • Activé. permet d’activer ou de désactiver l’image.

Articles similaires

Supprimer redirection Home après s’être connecté lors du tunnel d’achat en 5 ...
views 897
Après avoir installé le tunnel de commande en 5 étapes sur le site e-commerce d'un client, j'ai rencontré un problème lors de l'étape inscription. ...
Supprimer “Imprimer” sur la fiche produit | Astuce Prestashop 1.6
views 1868
Personnellement, je n'arrive plus à me souvenir la dernière fois où j'ai imprimé une fiche produit depuis le site d"une boutique en ligne. Je suppose ...
Ajouter le drapeau du pays dans le bloc langues | Astuce Prestashop 1.6
views 3071
Vous désirez insérer le drapeau du pays des langues que vous avez choisies pour votre site e-commerce. L'astuce est simple et rapide. Valable pour ...
Gratuit : Template Mails | Astuce Prestashop 1.6
views 3023
Je vous propose une nouvelle mise en page plus minimaliste pour les mails. Le fichier comprend la version anglaise et française. Vous pouvez télécharg...
Greffer le menu haut horizontal dans displayNav | Astuce Prestashop 1.6
views 3919
Ce tutoriel va vous permettre de greffer le module "menu haut horizontal" dans displayNav Cette astuce Prestashop est valable pour la version 1.6 ...
Modifier la police d’écriture avec Google Fonts – PrestaShop 1.7
views 3612
Dans ce tuto nous allons voir comment modifier la police d'écriture avec Google Fonts pour votre site PrestaShop 1.7 A noter: actuellement la polic...
Configurer le moteur de recherche – Prestashop 1.7
views 3688
Le tutoriel d'aujourd'hui va vous permettre de configurer le moteur de recherche internet de votre boutique Prestashop 1.7 et ainsi de rendre visible ...
Configurer le mode multi-boutique dans PrestaShop 1.6 & 1.7
views 19292
A NOTER : malheureusement à ce jour, il existe encore pas mal de bugs avec la version 1.7 (la dernière 1.7.6 ne régle pas tous les problèmes) Qu’est ...
Liste des variables smarty : Prestashop 1.7
views 6219
Je vais énumérer dans ce tutoriel, les variables utlisées dans Prestashop 1.7, Pour les découvrir, vous avez deux methodes. Pour les deux méthodes,...
Comment activer SSL dans PrestaShop 1.6 & 1.7 ?
views 2000
Dans ce tuto nous allons voir comment activer le SSL sur votre boutique, c'est tout simple Qu'est- ce que le SSL ? Lorsque vous regardez l'url des s...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *