Setup

Product Images

This chapter is a walkthrough on how to prepare product images and add them to the products in your catalog. The entire process of preparing product images consists of the following steps:

1. Create product images of the size not less than 1024 x 1024px.
2. Give the correct names to the product images.
3. Upload the product images to the correct directory on the Web server.
4. Link the images to the products, by running the Product image import task.
5. Check that the product images are shown in the web store.

For more information about product images in ERP, see:

• Item Images in Microsoft Dynamics NAV
• Product Images in Microsoft Dynamics AX
• Item Images in Microsoft Dynamics 365 Business Central
• Product Images in Microsoft Dynamics 365 for Finance and Operations
• Item Images in SAP Business One
• Product Images in SAP ECC
  

Prepare product images and link them to the products

Step 1: You must create one image for each product and product variant. All images must be of a size not less than: width - 1024 px and height - 1024 px.

Step 2: Give the correct names to the images. The image file name format must be exactly as described below:

[Item No] [Separator] [Variant Code] [Separator] [Order number].[Extension]

Image file name parts	Description
Item No.	This is a required value and must match the item number used in your ERP system.
Separator	This is a character which is used to separate the product image name values in the image file name. You must use the same separator in the product image file name as the one specified in the Product image import task settings.  Default value: "_"
Variant Code	This is an optional value and must be specified for images of the product variants, if such are present. If this is an image for a product variant, you must also specify the item variant code in the image file name used in your ERP system. In Microsoft Dynamics NAV item variant code can be seen in the Item Variants table. If you use Microsoft Dynamics NAV with the Fashion add-on, the item variant code must match the vertical item variant code in NAV. In Microsoft Dynamics AX product variant ID cannot be seen directly in the AX table but only in the system table in the Application Object Tree. For more information on where the product variants IDs are stored in AX, see "Product Variants IDs".
Order number	This is a required value which is used to add multiple images to the product. When you need to add only one image you must still use "1" as an order number in the product image file name. If more images should be added to the product, the second image must have the order number "2", and so on.
Extension	This is the extension of a product image file. Supported extensions are: JPG, JPEG, PNG, BMP and GIF.

The examples of the product image file names:

• 1001_1.jpg (with a separator "_")
• 1001_M_1.jpg (with a product variant code "M")

Step 3: When the images (not less than 1024 x 1024) for each product and product variant are ready with the correct file names, they must be uploaded to the Web server. All product images must be added to the following location of the Sana Commerce frontend directory:

/content/files/images/ProductImages

Step 4: Now you must run the Product image import task to resize the images and link them to the products. In Sana Admin click: Tools > Scheduled tasks, and run the Product image import task.

For more information, see "Product Image Import".

When the Product image import task is finished you should see the product images in your web store. Open the web store and check that the product images are shown. The product images must be also shown on the product pages in Sana Admin.

If you need to replace the existing product image, you must put the new image with the correct product image file name to the "ProductImages" folder, and run the "Product image import" task. The image will be resized and will replace the appropriate image with the same name in the "Small", "Medium" and "Large" folders.

Product images can be also added directly on the product pages in Sana Admin. To manage product pages, in Sana Admin click: Web pages > Product pages. You can change the order of product images simply by dragging and dropping them. On the product details page, in the image carousel, the product images are shown in the order they are placed in Sana Admin. For more information, see "Product Pages".

Below you can read more detailed information about the product image import process and conversions which happen with the product images when the Product image import task is running.

How does the resizing of product images work?

When you run the Product image import task, three folders will be automatically created in the Sana Commerce frontend directory on the Web server (/content/files/images/ProductImages/): "Small", "Medium" and "Large". The Product image import task automatically resizes all your product images from the "ProductImages" folder and puts them according to the size to the "Small", "Medium" and "Large" folders. This is done because product images of three different sizes are used in the Sana web store:

• Small images are shown in the image carousel on the product details pages and on all other pages where the product thumbnails are present (product list pages, search results page, shopping cart).
• Medium images are shown on the product details pages.
• Large images are shown when you zoom the product image on the product details page.

The product images are automatically resized to the sizes which do not exceed:

	Width	Height
Small	84 px	84 px
Medium	400 px	400 px
Large	1024 px	1024 px

Therefore, when you prepare the product images, you must create only one image of a large size (can be any size not less than 1024 x 1024px) for every single product and product variant. The images should be square-shaped, since they fit the web store design well. When the images are ready, put them to the "ProductImages" folder.

When you run the Product image import task the product images are retrieved from the "ProductImages" folder, resized and distributed according to their sizes among three folders. When the images are resized and placed to the appropriate folders according to their size, the images in the "ProductImages" folder will be automatically deleted, if the Product image import task has been successfully finished.

In case the image size is larger than 1024 x 1024px, Sana downscales the image size to 1024 x 1024px and puts the resized image to the "Large" folder. Then Sana creates medium and small images and puts them to the relevant folders.

If you create an image of the size less than 1024 x 1024px, the large image will not be available. Sana will downscale the size of an image to 400 x 400px and put it to the "Medium" folder. Then, Sana will create a small image and put it to the "Small" folder.

The same logic is used, if you create an image smaller than 400 x 400px. The large and medium images will not be created. Sana will downscale the size of an image to 84 x 84px and put it to the "Small" folder.

If you create the image which is not square-shaped, and its longer side is more than 1024px, then Sana will downscale the image by the longest side, keeping its proportions.

If you redesign your web store, the default image sizes can be redefined, or if needed, you can add other image sizes. This can be done in the "Web.config" file of the Sana Commerce frontend. In the "Web.config" file locate the <image-sizes> section, and add a line in the following format, where you should specify the image size name ("small", "medium", or "large", or any new image size name, if you customize the web store design), width and height of the images:

<size name="name" width="" height="">