Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback

Displaying product images provides buyers with a clear view of what they are purchasing.

## About images

Optimizely <<product-name>> provides three different product image sizes: Small, Medium, and Large.

  • **Small** - The small image is displayed on a variety of pages: Cart, Order Details, Review and Pay, Request for Quote, Quote Details, and Wishlists. The recommended size is 160x160.

  • **Medium** - The medium image is displayed on the Product Detail page, Category page, within the Carousel widget, and in the search box. The recommended size is 300x300.

  • **Large** - The large image is displayed when a user selects an image to view it larger. The recommended size is 900x900.


If only one image is uploaded, the generic image is then used in places where an image size has not been provided. For example, if only a small image has been uploaded, when a user clicks on the image to view it larger, the large image will display the generic image.


The **Medium** image is required. It is used if the **Small** and **Large** image paths are not identified. However, <<product-name>> highly recommends adding an appropriately-sized/scaled image to each field for performance reasons. Greatly oversized medium images that must be scaled to fit small/large image paths may affect performance.

## Image considerations

In most circumstances, using the same image for all three sizes provides a consistent user experience. For example, if a user selects the Product image on the **Product Detail** page, a larger version of the image is displayed. However, using a different Large image will display an entirely different image, not providing the expected user experience. This is because the **Product Detail** page uses the Medium image and the bigger, "zoomed in" image uses the Large image.

A different scenario, where using different images could be advantageous, would be to use the **Medium** image to show the product on a model and then use the **Large** image to show a close up the product- not including the model.

Regardless of what images are used, it is important to thoughtfully plan out images and how they will be displayed on the website. Be sure to use the image sizes and locations listed above as a reference point when making Product image decisions.

## Add images to products

Displaying multiple images to a Product provides buyers with a comprehensive view of what they are purchasing. To add images to Products, the image path for the Small, Medium, and Large images needs to be identified. This path is set at the Product level within the Admin Console. All images are stored either within the **Media** library, which is physically on the <<product-name>> web server, or within a Content Delivery Network. The steps below are only applicable to images stored within the Media library. To identify the path to the images, follow the steps below:

️ Important

If no image is uploaded, the default "image not found" image is used. Use the **Small Default Product Image**, **Medium Default Product Image**, and **Large Default Product Image** Settings to control which file is used for the "image not found" image.


When upgrading a 4.x site to 4.3.1, the Small, Medium, and Large image paths for each product are migrated into a single new product image on a given product.

To add multiple images to a product:

  1. Go to **Admin Console** \> **Catalog** \> **Products**.

  2. Select **Edit** for the desired Product.

  3. Select the **Images** finger tab.

  4. Click **Add Product Image**.

  5. Give the image a **Name**, and determine its **Sort Order**.

    The image with the lowest sort order (1) is assigned as the **Primary Image**. It appears throughout the site and by default on the product detail page.

  6. Click **Browse** to browse for a Small, Medium, or Large image.


    The Medium image is required. If Large and Small images are not uploaded, the Medium image is resized automatically and used across the site where the Small and Large images normally appear.

  7. Double-click the desired image or select **Choose** in the upper left corner.

  8. Click **Save**.

Once images have been uploaded, reorder them to ensure the buyer sees the most dynamic image first. To reorder product images:

  1. Go to **Admin Console** \> **Catalog** \> **Products**.

  2. Select **Edit** for the desired Product.

  3. Select the **Images** finger tab.

  4. Select **More Options**, and select **Reorder Images**.

  1. Select an image, then drag and drop it to a new location in the list.


    The image in the upper left corner (with the Sort Order of **1**) is the **Primary Image**, and is the image shown across the site and by default on the **Product Detail** page.

  2. Select **Save**.

This is how multiple images appear on the **Product Details** page:

Select the thumbnails under the primary image to change the displayed image and select the primary image to zoom in and view the **Large** image.

### Add and assign images using product import

Before proceeding with this method, all images need to exist either locally in the **Media** library, physically on the <<product-name>> web server, or a CDN. From there it is then necessary to add the file path or URL for each product and image size (small, medium, large) into the import spreadsheet. As you can imagine, this could be a very laborious task and is not recommended for large scale product/image assignments. This would likely be used as a one-off for small updates. Refer to the documentation on importing/exporting for more information on how to perform an import and how to use the import template.