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

11 commentaires pourquoi ne pas laisser le vôtre ?

Tout baigne. C’est en effet “image_type” qu’il fallait modifier. J’ai réinscrit les données manuellement et tout refonctionne parfaitement. Merci encore.

Marc le 2 avril 2010 à 13 h 26 min

Cela signifie que la table contient des données donc vous ne pouvez pas changer ce numéro.

D’ailleurs c’est la table image_type qu’il faut modifier et non la table image.
Sinon c’est étrange que vous ayez besoin de faire cela pour voir vos photos… Avez-vous essayer de régénérer les miniatures ?

Magavenue le 2 avril 2010 à 13 h 11 min

Rebonjour,

Voilà, j’ai essayé de changer le nombre de valeur de l’AUTO_INCREMENT mais ça ne marche pas. Dans la case il est écrit 56, j’efface ce chiffre pour mettre 1 puis je clique sur le bouton “exécuter”, mais c’est le chiffre 56 qui se remet.

Marc le 2 avril 2010 à 13 h 03 min

Merci mille fois pour votre réponse rapide.

Marc le 2 avril 2010 à 8 h 42 min

L’id possède une propriété d’auto incrémentation. Ce qui veut dire, que vous ne le choisissez pas.
Néanmoins, vous pouvez le réinitialiser, en vous rendant dans l’administration de votre base de donnée (ex : phpMyAdmin). Puis dans la table concernée (ici : image), et enfin dans l’onglet opération.
Vous trouverez alors un champ AUTO_INCREMENT, que vous mettrez à 1.

Magavenue le 2 avril 2010 à 8 h 37 min

Ecrire un commentaire