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...

28 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,
Peut être pouvez vous m’aider… Je souhaite retirer l’affichage de l’image default lorsque je ne mets pas d’image produit. De plus j’ai mon affichage description qui ne se fait pas et qui en plus me decale mes icones cf page boudin vs page darne ? Avez vous une idée ??
Merci, bien cordialement,
Vanessa

Duhil Vanessa le 1 septembre 2015 à 16 h 13 min

Savez vous comment placer une petite image à coté d’une catégorie? quel est la taille dans photoshop?

merci

sophie le 31 janvier 2014 à 17 h 28 min

Bonjour
Par contre comment faites vous pour que les photos des fiches produits soit en slide moi quand je clique sur les miennes sa m’ouvre une autre fenêtre
je vous laisse testé http://www.cadoriginaux.com/index.php?id_product=5&controller=product#/quantites_lots-1
dans l’attente de vous lire une débutante
cordialement
BONNE ANNEE 2014

cadoriginaux le 4 janvier 2014 à 18 h 05 min

bonjour
Savez-vous ce qu’il faut faire pour ajouter un article sur le back office puis le transférer sur le site en ligne. j’ai beau chercher sur le net j’ai pas trouver.
je suis sous prestasho 1.5
Si Quelqu’un pourrait me sortir de ça.

Merci
Cordialement

andré le 22 avril 2013 à 15 h 46 min

[...] http://www.magavenue.com/blog/ecommerce/gestion-photos-prestashop [...]

Gestion des photos | binaire le 14 novembre 2012 à 20 h 22 min

Ecrire un commentaire