image_gallery

 

The new product image gallery now allow drag and drop – so, you will just have to drag and drop your images here and the system will automatically resize your images. But before you upload the images,  you will have to set the image sizes. Enter your webShaper store control panel > Products > Your Product > Edit > Gallery. After that:

1. Click on Image Settings.

2. If you are using a responsive design, you can follow this image size guide:

 

image_settings

 

3. Once you have set the image sizes, you will only have to upload large images (600px or more for width).

The system will auto resize the the images to small, normal and large according to your image settings.

4. Click Save.

 

If you would like to edit your product images:

 

1. Click on the product item (eg: Collegiate Tee) that you would like to change its image.

2. Click on Edit.

3. Click on Gallery.

 

edit_image

 

4. Drag and drop your images into the image gallery.

5. Click Upload Files.

 

Note:

  • It is advisable that all product images share the same height for small images and same width for all normal and large images.
  • To get a better picture of what a small, normal and large image is, refer to the images below.
    (Based on Dusk template):

 

small_image

Small Image

 

 

normal_image

Normal Image

 

 

large_image
Large Image

To adjust your Zoom function:

1. Click Image Settings.

 

 

2. On the Zoom Option section, select Outer Zoom if you want your product image on your webShaper store to have zoom function outside of the image box.

3. Click Save.

 

 

4. Go to your store and you will see that if you hover your mouse to the image, the zoom will function from the outside of the image box.

 

 

5. If you want your product image on your webShaper store to have zoom function inside of the image box, on the Zoom Option section, select Inner Zoom.

 

 

6. Go to your store and you will see that if you hover your mouse to the image, the zoom will function from the inside of the image box.