New! Built-in Image Editor for eCommerce

Basic image editing can now be done within Connected Business using the Image Editor form. With this tool, you may now be able to do a very light modification on your images such as resizing images automatically or manually, crop item images with ease or even rotate them at any angle. It’s so simple that you can even adjust images in vertical or horizontal position or click the undo button to revert back the changes made.

However, as you modify item images more, the quality of the image will reduce. I suggest you back up a copy of the original images if ever you have saved the modified one.

Upon loading the image for the item, the Image Editor will pop up displaying the selected image with the tabs for Large, Medium, Icon, Minicart, and Mobile image size options. (You can add the web image for the item from the Item Detail form > Web Option tab > Images tab and either click the Load Web Image button or double click the image preview field. A dialog window will pop up and you can browse for the item image).

If you have an existing image for an item, you may edit or modify the image by right click on the image then click Edit Image.

Click Image to Enlarge

In resizing the images, you have the option to use either the Default or Custom settings (click on the Settings button).

Click Image to Enlarge

In the Default Settings, the system will automatically resize the images according to the values defined for each size option in the Application Configuration. To check for the values, you can refer to the following appconfigs:

Image Size

AppConfig Parameters

Large


DefaultHeight_large

DefaultWidth_large

Medium


DefaultHeight_medium

DefaultWidth_medium

Icon


DefaultHeight_icon

DefaultWidth_icon

MiniCart


MiniCartStyle

Mobile


MobileImageStyle

 

In Custom Settings, you can set your own image dimensions, crop and even change the angle of the image as preferred. If you select this setting, the Image Size and Image Crop section will be enabled allowing you to resize and/or crop the image. Just tick the Resize or Crop checkbox if you want to use the respective sections.

The Image Size and Image Crop section are disabled if Default Setting is used.

Click Image to Enlarge

You can set the width and height for the image in the Resize Image section. Just enter the desired value for the width and height and click the Resize Image button. Clicking the Resize Image button will modify the size of the currently selected image size (i.e. Large, Medium, etc).

Click Image to Enlarge

You can also rotate the image angle when you enter a value in the Rotate by Degree field.

Click Image to Enlarge

If you want the width and height to be proportioned, you can tick the Constrain Proportion checkbox and adjust the vertical scroll to the desired dimension. Doing this will automatically adjust the height of the image in proportion to the width.

Click Image to Enlarge

In the Image Crop section, you can either

  1. Set the values for the x and y coordinates as well as the width and height for the image and click the Crop Image button, or
  2. Select the area to be cropped click the Crop Image button.

Click Image to Enlarge

After making modifications to the image, you can click Save and Close to apply the changes. Any changes made and saved on the item image will be automatically updated in your website.

Click Image to Enlarge

FREE PRODUCT TOUR