Setup

Product Images

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

Step 1: Prepare product images.
Step 2: Give the correct names to the product images.
Step 3: Put the images to the Web server in the correct directory.
Step 4: Link the images to the products by running the Product image import task.
Step 5: Check that the product images are shown in the webstore.

To prepare product images and link them to your products catalog:

Step 1: Prepare product images which will be used in your products catalog. You should create one image for each product and product variant. All images should have a size not less than: width - 1024 px and height - 1024 px.

Step 2: Give the correct names to the images. The image name format should 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 should match the item number used in your ERP system.
Separator	This a character which is used to separate the product image name values in the image file name. You should 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 should be specified for product variant images if such are present. If this is an image for a product variant, in the image file name you should also specify the item variant code used in your ERP system. In Microsoft Dynamics NAV item variant code can be seen in the Item Variants table. If you use NAV Connector with the Fashion add-on, the item variant code must match the vertical item variant code in Microsoft Dynamics 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 should still use '1' as an order number in the product image name. If more images should be added the second image should have the order number '2', and so on.
Extension	This is the extension of a product image file. Supported extensions are: JPG, JPEG and GIF.

The examples of the product image names: 1001_1.jpg (with a separator '_') 1001_M_1.jpg (with a variant code 'M')

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

/content/files/images/ProductImages

Step 4: Now you should 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.

When the Product image import task is finished you should see the product images in your webstore.

For more information, see 'Product Image Import'.

Step 5: Open the webstore and check that the product images are shown. The product images should be also shown on the product pages in Sana Admin.

Now the product images are linked to the products catalog and should be available in your webshop.

Product images can be also added directly from 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.

When you run the Product image import task, in the Sana Commerce frontend directory (/content/files/images/ProductImages/), where you put the product images, three more folders are automatically created: 'Small', 'Medium' and 'Large'. The Product image import task automatically resizes all your product images from the 'PruductImages' folder and put 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 Commerce webstore:

• Small images are shown in the image carousel on the product details pages and on all other pages where the product thumbnails are present.
• 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 should create only one image of a large size (can be any size not less than 1024 x 1024) for every single product and product variant and 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 sizes, the images in the 'ProductImages' folder are automatically deleted, if the Product image import task has been successfully finished.

If you need to change already existing product image, you should put the new image with the correct product image file name to the 'ProductImages' folder and run the 'Image link' task. The image will be resized and replace the appropriate image with the same name in the 'Small', 'Medium' and 'Large' folders.

If you redesign your webstore 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/ large or any new), width and height of the images:

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