We have seen in a previous post how to optimize your photos with XnView or Gimp soon to be displayed in your site e-commerce .
We shall now see how to integrate them into a product of Prestashop .

Integration of images in the data sheets of PrestaShop

There is no need to rename your photos. Prestashop use names to him, composed of the id of the product, no increment and the name of one of five types of images needed to display the product in Prestashop (which may be a minor inconvenience for SEO in Google images, but which is handy because it only handles all the different sizes and different names for photos).

5 types and sizes of images are used in standard Prestashop for photos of a data sheet:

  • Small: 45 x 45 pixels
  • Medium: 80 x 80 pixels (used to select the photo in the product, new product in the area, already seen or reductions)
  • Large: 300 x 300 pixels (used to display a large product)
  • Thickbox: 600 x 600 pixels (used for detailed display of the product)
  • Home: 129 x 129 pixels (used to display the details of a category for products first flagship store page, or search for a product)

The image with the original size of the photo, copy it as a photo reference, but that is not used by Prestashop.

When you enter information about the product, click the Images tab. Fill in the fields according to your photo:

  • File: Click Browse to select the photo you've resized
  • Key: Enter the caption associated with this picture, it is important for SEO in Google images, consider using one or two keywords.
  • Cover: check to indicate that this picture will be the first to be displayed for this object in your online store .
  • Resize method. Thumbnail: I advise you to let automatic, and define itself Prestashop the 5 different sizes of photos.
Prestashop - Add image catalog

You just have to click the Save button on the image. Prestashop will automatically create the six types of images needed for its operation (you can find in ... prestashopimgp).

You must repeat the above steps for all the pictures you want to insert for that product.

It is also highly recommended to use several photos for the same product (taken from different angles, with possible extensions, details, in a situation ...). In fact your client can not actually see your product. So it will have more pictures of the product, the less it will have questions, it will be more inclined to buy your product.

Integration of images in the categories of products Prestashop

As a picture of a product, does not need to rename your photos, Prestashop will use its own name.

4 types and sizes of images are used in standard Prestashop for categories of product:

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

The image with the original size of the photo, copy it as a photo reference, but that is not used by Prestashop.

Enter the name and description of the category and click the Browse button in the Image field, fill in other fields.

Prestashop - Add product category
You just have to click the Save button. Prestashop will automatically create the 5 types of images needed for its operation (you can find in ... prestashopimgc).

Setting the size of the images used by Prestashop

The sizes of the images above, can be changed in the Preferences tab, choose images:

Prestashop - Preset Sizes images

If you change a size for one or more format, remember to click on the button: Refresh thumbnails at the bottom of page.

Conclusion

Well, this concludes our series of articles on optimizing images in Prestashop, we will propose soon to download a PDF file comprising the steps.

The integration of photos in Prestashop is very simple lightbox effect (enhancing photos, posting them on a black background) is integrated by default with the option to review the various pictures inserted for the same product.

All we need a system to grow some of the details of a photo of a product and management of photos in Prestashop will complete a small online store.

    Articles on this topic:

  1. Optimizations photos with Xnview to integrate them into your online store Please sign up for RSS feeds do not miss article.1ère Step: Preparation of photos to incorporate into your ecommerce store we saw in our previous Ticket: How to optimize photos product sheets ...
  2. How to optimize the pictures of your ecommerce product info One of the tedious work when designing an ecommerce site is that for the same photo of a product you need to resize it and decline in different sizes. The software will then use this size of picture to display thumbnail ...
  3. Optimization of photos of items in your shop with Gimp Please sign up for RSS feeds do not miss article.Nous have seen in our previous post, it was necessary to rework your photographs to get a quick loading of pages of your ecommerce site and so ...

19 comments why not leave yours?

We will not support for comments for a technical problem with one of our modules. Thank you contact us directly with our contact form !

You say: "The integration of photos in Prestashop is very simple lightbox effect (enhancing photos, posting them on a black background) is integrated by default with the option to review the various pictures inserted for the same product. "
I have not found how to implement the lightbox effect. Can you help me?
Thank you in advance for your help.

feizel 20 January 2012 to 16 h 06 min

Hello,

thank you for the valuable advice.
I have a problem with the color of my photos.
Unlike my original photos on prestashop, the colors are too bright, so the result is not very nice.
How?
Thank you to

Celine December 13, 2011 to 18 H 58 min

Hello,
And how, if one does not display images and ensure that the default message "no image available" is displayed.
Thank you

Philippe November 7, 2011 at 8 h 18 min

@ Loran is not a parameter of the BO, it will necessarily change the code.
@ Videogratuites: I can not really advise you on a model, sorry!

Magavenue 3 November 2011 to 15 h 35 min

Hello,
Thank you for this tutorial. When the photo is not the right format, it is not automatically resized Presta, it automatically adds a white background on the sides if the original format is not square. Where can I change the color?

In advance thank you

Loran 20 October 2011 to 22 h 44 min

Write a review