Nous avons vu dans un précédent billet comment optimiser vos photos avec XnView ou avec Gimp pour qu’elles s’affichent rapidement dans votre site de e-commerce.
Nous allons voir maintenant comment les intégrer dans une fiche produit de Prestashop.

Intégration des images dans les fiches produits de Prestashop

Il n’est pas nécessaire de renommer vos photos. Prestashop utilisera des noms à  lui, composés de l’id du produit, d’un n° d’incrément et du nom d’un des 5 types d’images nécessaire à  l’affichage du produit dans Prestashop (ce qui peut être un petit inconvénient pour le référencement naturel dans Google images, mais qui est bien pratique car il gère tous seul les différentes tailles et différents noms des photos).

5 types et tailles d’images sont utilisé en standard par Prestashop pour les photos d’une fiche produit :

  • Small : 45 x 45 pixels
  • Medium : 80 x 80 pixels (utilisé pour la sélection de la photo dans la fiche produit, dans la zone nouveau produit, déjà  vus ou réductions)
  • Large : 300 x 300 pixels (utilisé pour l’affichage en grand du produit)
  • Thickbox : 600 x 600 pixels (utilisé pour l’affichage détaillé du produit)
  • Home : 129 x 129 pixels (utilisé pour afficher le détail d’une catégorie, pour les produits phare en 1ère page de la boutique, ou pour la recherche d’un produit)

L’image avec la taille d’origine de la photo, qu’il recopie comme photo de référence, mais qui n’est pas utilisé par Prestashop.

Lorsque vous avez saisie les informations concernant la fiche produit, cliquez sur l’onglet Images. Remplissez les champs en fonction de votre photo :

  • Fichier : Cliquez sur Parcourir pour choisir la photo que vous avez déjà  redimensionné
  • Légende : Saisissez la légende associé à  cette photo, celle-ci est importante pour le référencement dans Google images, pensez à  utiliser 1 ou 2 mots clés.
  • Couverture : à  cocher pour indiquer que cette photo sera celle qui sera affiché en premier pour cet objet, dans votre boutique en ligne.
  • Méthode de redim. des miniatures : je vous conseille de laisser automatique, ainsi Prestashop définira tout seul les 5 différentes dimensions des photos.
Prestashop - Ajouter image dans catalogue

Il ne vous reste plus qu’à  cliquer sur le bouton Enregistrer l’image. Prestashop va automatiquement créer les 6 types d’images nécessaires à  son fonctionnement (que vous pouvez retrouver dans …prestashopimgp).

Vous devez répéter les étapes précédentes pour toutes les photos que vous souhaitez insérer pour ce même produit.

Il est d’ailleurs fortement recommandé d’utiliser plusieurs photos pour un même produit (prises sous différents angles, avec éventuellement des agrandissements, des détails, en situation…). En effet votre client ne peut pas voir réellement votre produit. Donc plus il aura de photos du produit, moins il aura d’interrogations, il sera alors plus enclin à  vous acheter votre produit.

Intégration des images dans les catégories des produits de Prestashop

Comme pour une photo d’une fiche produit, Il n’est pas nécessaire de renommer vos photos, Prestashop utilisera ses noms propres.

4 types et tailles d’images sont utilisé en standard par Prestashop pour les catégories d’une fiche produit :

  • Small : 45 x 45 pixels
  • Medium : 80 x 80 pixels
  • Large : 300 x 300 pixels
  • Category : 500 x 150 pixels

L’image avec la taille d’origine de la photo, qu’il recopie comme photo de référence, mais qui n’est pas utilisé par Prestashop.

Saisissez le nom et la description de la catégorie et cliquez sur le bouton Parcourir du champ Image, complétez les autres champs.

Prestashop - Ajouter catégorie produit
Il ne vous reste plus qu’à  cliquer sur le bouton Enregistrer. Prestashop va automatiquement créer les 5 types d’images nécessaires à  son fonctionnement (que vous pouvez retrouver dans …prestashopimgc).

Paramétrage des tailles des images utilisées par Prestashop

Les différentes tailles des images indiquées ci-dessus, peuvent être modifiées dans l’onglet Préférences, choix images :

Prestashop - Tailles predefinies des images

Si vous modifier une taille pour un ou plusieurs format, pensez bien à  cliquer ensuite sur le bouton : Régénérer des miniatures en bas de page.

Conclusion

Voilà , ainsi s’achève notre série d’article sur l’optimisation des photos dans Prestashop, nous vous proposerons bientôt un dossier pdf à  télécharger regroupant les différentes étapes.

L’intégration des photos dans Prestashop est très simple, un effet lightbox (mettant en valeur les photos, en les affichant sur fond noir) est intégré par défaut avec la possibilité de passer en revu les différentes photos insérés pour un même produit.

Il ne manque plus qu’un système permettant de grossir certains détails d’une photo d’un produit et la gestion des photos, dans Prestashop sera complète pour une petite boutique en ligne.

    Articles sur le même sujet :

  1. Optimisations des photos avec Xnview pour les intégrer dans votre boutique en ligne N'hésitez pas à vous inscrire au flux RSS pour ne rater aucun article.1ère Etape : Préparation des photos pour les intégrer dans votre boutique d’ecommerce Nous avons vu dans notre précédent billet : Comment optimiser les photos des fiches produits...
  2. Comment optimiser les photos des fiches produits de votre ecommerce Un des travaux fastidieux lorsque vous concevez un site d'ecommerce est que pour une même photo d'un produit vous devez retailler celle-ci et la décliner dans différentes tailles. Le logiciel utilisera ensuite telle taille de photo pour l'affichage en vignette,...
  3. Optimisation des photos des articles de votre boutique avec Gimp N'hésitez pas à vous inscrire au flux RSS pour ne rater aucun article.Nous avons vu dans notre précédent billet, qu’il était nécessaire de retravailler vos photographies, pour obtenir un chargement rapide des pages de votre site de ecommerce et qu’ainsi...

21 commentaires pourquoi ne pas laisser le vôtre ?

Nous n'apporterons pas de support par commentaire pour un problème technique avec l'un de nos modules. Merci de nous contacter directement avec notre formulaire de contact!

Bonjour,
Je rencontre un problème : Mes photos sont floue.
Toutes les photos du thème prestashop d’origine sont floue. Je n’ai pas touché aux réglages des photos car je suis au début de l’expérience prestashop.
J’ai acheté un thème plus complet mais pareil : les photos d’origine sont floues. Evidement quand je met les mienne à la place, c’est floue aussi.

Quelqu’un pourrait-il me sorti de cette impasse ??
Merci
Cordialement

JULIEN le 7 février 2012 à 23 h 11 min

@feizel normalement le template de Prestashop l’intégre de base.

Magavenue le 25 janvier 2012 à 23 h 52 min

Vous dites : “L’intégration des photos dans Prestashop est très simple, un effet lightbox (mettant en valeur les photos, en les affichant sur fond noir) est intégré par défaut avec la possibilité de passer en revu les différentes photos insérés pour un même produit.”
Je n’ai pas trouvé comment mettre en oeuvre l’effet lightbox. Pouvez-vous m’éclairer ?
Merci d’avance de votre aide.

feizel le 20 janvier 2012 à 16 h 06 min

Bonjour,

merci beaucoup pour ces conseils précieux.
Je rencontre un problème avec la couleur de mes photos.
A la différence de mes photos d’origine, sur prestashop, les couleurs sont beaucoup trop vives, donc le rendu n’est pas très beau.
Comment faire?
Merci à vous

Céline le 13 décembre 2011 à 18 h 58 min

Bonjour,
ET comment faire, si l’on ne veut pas afficher d’images et faire en sorte que le message par défaut “aucune image disponible” se s’affiche pas.
Merci

Philippe le 7 novembre 2011 à 8 h 18 min

Ecrire un commentaire