Page status: Up to date | Application version: From

Product image

To add product images edit the Basic details of that product.

Each product can have multiple images (up to 10 images).
However, each variant of that product can have its image to highlight the specifics of that variant. So, use the product image to showcase characteristics of the product itself not of its variants.

More than 10 images for one product, will become useless. Therefore, is you consider you need to show your customers more than 10 images for a product, you may create a gallery tab for it. (see Description section - Custom tab)

When you first create a product, this will have no image assigned to it. An no image icon will appear as its thumbnail. This no image icon will propagate in FRONEND product list and product details.
It is important to add images to your products because it is the only way to show to your customers what you are offering. Short said: the image makes the sale.

The right half of the Basic detail section is reserved to adding images to the current product.

Add image button

At the left of no image icon, is a light blue Add image button. Click this button to add an image and replace the no image icon.

When you click on Add image button, a pop-up window will give you two options:

  • To Upload image from your device
  • To Browse images existing on server

Upload image

Most likely that you need to upload the image of the product from your device. The image manager prompt you this option.

You have two ways to upload the image from your device:

  • Click Upload from local device red button and choose the image you want to upload: an explorer will open to assist in find the image on you device. When you find the image on your device, click on it and then click open button from your explorer.
  • Drag and drop the image into this section: Find the image on your device and drag it over the upload rectangle (where the red Upload from your local device button and surrounding area marked with a rectangle)

The system will do following operations at once if there are no uploading errors:

  • upload the image
  • will close the image manager window
  • will assign the image uploaded to current product
  • if you are working on first image of the product, it will make it automatically main image

Uploading errors

There are some restrictions for images uploaded as mentioned under the Upload from your local device button

  • File extensions allowed: jpeg,jpg,png
  • File size allowed up to: 20Mb

This extensions file are cleaner and safer (website security concern). The file size will more than enough for big nice images and will protect you against wasting the space on your server.

Browse image

If you already uploaded the image of the current product before, then you want to find it on server and assign it to this product.

Click the Browse image tab in image manager.

In Browse image tab you will find following:

  • The page title appears on top left and includes the page title Add / change image for Products: followed by the product name and its ID.

  • Showing Images only (Files are not included, see File section for files).
    Top left on Browse image tab

  • The areas where the images was uploaded. Default is showing the Product images as your current area now. You can choose another area from dropdown menu.
    Top left second position on Browse image tab

  • The Search area where you can search the image based on its name.
    Top right on Browse image tab

  • The Images listing will be displayed under this tab, showing the first 10 images in chronological order (first image shown is the last image uploaded).

  • Show more button will display a bunch of 10 images each time you click it.
    Show more button appears on the bottom left. It appears only the Image listing has more than 10 images.

  • Show all button will display all images.
    In case you have many images (hundreds or thousands), the list may be too long and may take a while to be displayed. You may be happier with the results of Show more button.
    Show all button on the bottom left. It appears only the Image listing has more than 10 images.

  • Close button will close the image manager canceling the add image process.
    Close button is a cross on right top opposite to the page title.

Search image

Enter into the search box what you are looking for and press Enter key or click on green magnifier icon.
The system will look to match your search string in name of the images. It is an autocomplete search box, it means:
- once you start typing will be automatically shown in a drop down all available options
- you can select one of available options and click green button or press Enter key; The selected option only will be shown in listing as search result.
- or you can anytime press Enter key or click on green button and you will get in search results all images that match your search string.

Images listing

In Images listing you can sort the images by clicking one of the following headings:

  • File name alphabetical sort
  • Size ascending sort
  • Date chronological sort
  • # ascending sort

You can sort listings ascending and descending for all fields that has headers in blue with underlined text when click on it once and after that once again.

Edit file

If the thumbnail or the name of the image is not enough clear, you can edit the image to view it before deciding if it is the correct image to be assigned to the current product.

If you click on image thumbnail, image name or the edit icon in image list you will Edit image (view) that particular image.
A new pop-up window will display you the image with all three images that the system creates every time you upload an image to optimize the image display in FRONTEND (optimizing the time to load a page).
The light blue download icon button (at right side of the images) will open a new tab on your browser displaying the original image you uploaded on server. Here you can save the image on your device.
You can close the Edit file from one of the close buttons: a cross on top right of the window or the Close white button on the right bottom.

Assign image to product from Browse images

At he right of each image row in Images list is an green + button> Click on it in chosen image row to assign that image to the current product.

In case that image was already assigned to the current product you will get on screen an error massage: Image is already assigned. Click the blue OK button or close the window from the cross top right. Choose another image by clicking the green plus symbol button.

After you click on the green plus symbol on Brows images tab, three things happen:

  • the Browse images tab closes
  • the image is assigned to the product
  • the image thumbnail is replacing the no image icon

Set main button

Set main button makes the current image as main image of the product.
The main image is the product image which appears in product listing and is the first image in zoom area of the product details page (FRONTEND).
The main image is the thumbnail of the product in Products list (BACKEND).

Change image button

If you need to change an existing image with a new one, click the light blue Change image button from the right of the image you want to change.

When you click on Add image button, a pop-up window will give you two options:

  • to Upload image from your device
  • to Browse images existing on server

After you uploaded the image or you click the plus symbol in browse images tab of an image, the following will happen:

  • upload the image if applicable
  • the image manager will close
  • the image will be assigned to current product and will replace the changed image
  • the initial image will lose its assignment to the current product

Delete image from product button

Delete button from each image will have as effect unassigned that image from the product, but will not delete the image from the server.

Order box

If you want your product images to appear in a certain order in product details page (FRONEND) the Order box helps you with this.
Write in field provided a number for each image. The images will be displayed ascending based on their Order number (the lower number will be displayed first).
It is recommended to use sequences of 10s, 100s and so on, because in future you may need to insert a new image between two existent ones. In this way, you do not need to reorder the products, just assign to the new category a number in between the two existent categories numbers.

If no order will be set for your images, they will be displayed in chronological order based of their uploading date/time (first added first displayed).

For your convenience, the order you set for images will affect the order displayed in Basic details (BACKEND) as well. Next time you open the Basic detail they will arrange themselves based on this Order field.

On this page

Snapshots / images

Product listing - edit product

Product listing - edit product

The first product Edit product button drop down showing the product sections. Click on the section you need to edit.

Basic details

Edit product - Basic details

Basic details are the first section of edit product.
Here you add details at the product level: product name, category, brand, model, other promotions that are not linked with prices, the product access level etc.

Add images to product

Add images to product

Click on Add image blue button. A pop-up window will appear to assist you.

New product - no image

New product - no image

The new product has not yet an image add to it.

Empty new product - Product details

Empty new product - Product details (FRONTEND)

This is how looks a product new created before editing it. The very empty shell.

Browse images tab

Browse images tab

Look for the image already uploaded earlier.

Edit file

Edit file

View of edit the file.

Image is already assigned

Image is already assigned

Image is already assigned error appears when you try to assign to the product an image already assigned to same product.

Delete image warning message

Delete image warning message

After you click on Delete image from product, it will pop-up a warning box asking you to confirm the deletion.