Follow

Product Images

 

Product Images

Using images of consistent quality, size, and proportion gives your product catalog a professional look with commercial appeal. If you have a large catalog with several images per product, you can easily have hundreds, if not thousands of product images to manage. Before you get started, it’s a good idea to establish a naming convention for your image files, and organize them so you can find the originals if you ever need them.

The Images tab in the Product Information panel is used to upload and manage individual images for the current product. You can upload multiple images for each product, with different images for each website or store view. However, if you have a large quantity of images to manage, it is more efficient to import, rather than upload each one individually. To learn more, see: Importing Product Images.

image116.gif

Product Images

 

Thumbnail Gallery

 

The thumbnail gallery on the product page can be used to display multiple images of the product. Although the position of the gallery varies by theme, it is usually just below the main image on the product page. Click each image to browse through the thumbnail gallery.

 

image118.jpg image120.jpg

Image Zoom

Light Boxes and Sliders

Many stores use a third-party light box or slider to display product images in a more elegant fashion. Typically with a light box, whenever a thumbnail image is clicked, it replaces the main image on the page. You can use the left and right arrows in the light box to browse through the images, or click a thumbnail to view a specific image. When zoom is activated, you can click the main image and move the cursor around to magnify different parts of the image. The magnified selection appears to the right of the image. You can find a variety of light box and slider extensions available in Magento Connect.

 

Image Zoom

Magento displays a magnified portion of the image on mouseover, provided that you have uploaded a larger image that can be used to zoom in for a closer look. When zoom is activated, you can click the main image and move the cursor around to magnify different parts of the image. The magnified selection appears to the right of the image.

 

Image Size and Type

As a best practice, you should standardize the size of your images so they appear at the highest possible resolution. A single product image can be displayed in several different sizes throughout your catalog. In addition to the main image on the product page, there are smaller images and thumbnails.

Image types are used in different places in your catalog. If you have only one product image, you can use the same image for each type. If you do not assign an image to each type, a placeholder image is used to mark its place in the catalog.

 

To configure product images:

On the Admin menu, select System > Configuration. Then in the panel on the left under Catalog, select Catalog.

Click to expand the Product Image section, and do the following:

image121.jpg

Product Image

  • In the Base Image Width field, enter the maximum width that the base image is to be rendered. 
  • In the Small Image Width field, enter the maximum width that the small image is to be rendered.

When complete, click the Save Config button.

 

Image Types

IMAGE TYPE

DESCRIPTION

Thumbnail

Thumbnail images appear in the thumbnail gallery, shopping cart, and

 

in some blocks such as Related Items. Example size:

 

50 x 50 pixels

   

Small Image

The small image is used for the product images in listings on

 

category and search results pages, and to display the product images

 

needed for sections such as for Up-sells, Cross-sells, and the New

 

Products List. Example size:

 

470 x 470 pixels

   

Base Image

The base image is the main image on the product detail page. Image

 

zoom is activated if you upload an image that is larger image than the

 

image container. Example sizes:

 

470 x 470 pixels (without Zoom)

 

1100 x 1100 pixels (with Zoom)

   

Media Image

(Optional) A media image gives you the ability to associate additional

 

images with a product, that are other than a product image. For

 

example, you might include the product logo, care instructions, or an

 

image of the ingredients from a food label.

 

If you add a media image attribute to the attribute set of a product, it

 

is listed as an additional image type, along with Base, Small, and

 

Thumbnail. You can set it to "Exclude" so it doesn't appear in the

 

gallery.



Adding Product Images

The Images tab is used to upload and manage images for a single product. You can upload multiple images for the product, and maintain different images for each website or store view. However, if you have many images to manage, you might prefer to import them, rather than upload product images individually.

image126.gif

Adding Product Images

 

To add product images:

 

If the images are to be used for only a specific store view, set Choose Store View in the upper-left corner to identify the view where the images will be used.

 

In the panel on the left, click Images.

Click the Browse Files button, and select the product images files you want to upload to your store.

Click the Upload Files button to upload the selected images to your store. Then, for each image, do the following:

  • Enter a descriptive Label for the image. This text appears on mouseover and can improve indexing by search engines.
  • If using multiple images, enter a numeric value in the Sort Order field to determine the sequence in which they appear in the thumbnail gallery.
  • To prevent an image from being included in the thumbnail gallery, click the Exclude checkbox. For example, if the product has only one image, there’s no reason to include it in the gallery.
  • To delete any image, select the Remove checkbox.

When complete, click the Save and Continue Edit button.


To add images to the gallery:

Follow the same process to add a new product image. For best results, gallery image files should be the same size and proportion as the main product image.

 

Field Descriptions

FIELD

SCOPE

DESCRIPTION

Image

 

On mouseover, a thumbnail of each uploaded image

   

appears.

     

Label

 

The label is the descriptive “Alt” text that appears on

   

mouseover. Including a label for each image improves

   

indexing by search engines, and accessibility for

   

people who use screen readers.

     

Sort Order

 

Determines the order in which images are displayed in

   

the gallery.

     

Thumbnail

Store View

The Thumbnail image is used in the shopping cart and

   

in some blocks, such as Related Items.

     

Small Image

Store View

The Small Image is used in product listings on the

   

category and search results pages, and to display

   

product images in additional sections such as Up-

   

sells, Cross-sells, and the New Products List.

     

Base Image

Store View

The Base Image is the main image on the product

   

page, and is also used to produce the magnified area

   

displayed during image zoom.

     

Media Image

Store View

(Optional) The Media Image appears only if an

   

attribute of the Media Image type is included in the

   

attribute set.

     

Exclude

 

Select the Exclude checkbox to prevent the image

   

from being listed in the thumbnail gallery.

     

Remove

 

Select the Remove checkbox to delete the image.

   

Selected images are deleted when the product record

   

is saved.

 

Placeholders

Magento uses a temporary image as a placeholder until permanent product images are available. The initial placeholder image is the Magento logo, which you can replace with placeholder images of your own design.

image130.jpg image131.jpg

Placeholder

 

To upload placeholder images:

On the Admin menu, select System > Configuration. Then in the Configuration panel on the left under Catalog, select Catalog.

Click to expand the Product Image Placeholders section. Then, do the following:

`image134.gif

Product Image Placeholders 

For each image type, click the Choose File button to navigate to, and upload the placeholder image you want to use for the Base Image, Small Image, and Thumbnail images. You can use the same image, or upload a different image for each type.

When complete, click the Save Config button.

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments