IMAGES

In this article you will find helpful recommendations, how to navigate our image related sections on our back end and steps on how to add images.

Skip ahead to 

Images & Using Watermarks

Images are an important aspect of your website. Web Shop Manager (WSM) makes it easy for you to control the size of your images within the CatalogGallery, and Survey sections without uploading new images.

🔎Note: When preparing your images, keep in mind, WSM will not resize the image beyond the original size uploaded, this is to prevent any image distortion. 

The Images tab allows you to modify how your images are displayed throughout your site. Each image setting displays the default value; which is used unless a value is entered into the field(s). It is typical that these settings are entered during the site building process but you can change them at any time. It is always a best practice after you change a setting to view your site to confirm the layout is displaying properly. WSM will not resize your images to a larger size than the original image you uploaded.

Image Sizes

  • Full: This is the largest size of the image that can be displayed. In the fields below if a medium image is not present than the Full size image will be displayed on the page. If a medium image is present then the Full Image Size will open in a lytebox/zoom.
  • Medium: This image size displayed on the main page, for example the actual Product page.
  • Thumbnail: The thumbnail image is used in areas of the site that display multiple items, for example a Category page with sub-categories and/or products.

Steps to complete the following to access this tab in Web Shop Manager.

  1. Log into Web Shop Manager.
  2. Hover over System.
  3. Click on Configuration.
  4. Click on the Images tab.

Form Fields Defined

Below is a list of each field in the Images tab.

Configuration
Catalog Watermark Text

These fields offer you the ability to add text that will be displayed as a semi-transparent image on top of your Product images. The watermark is dynamically generated when a customer views your site, allowing you to change the watermark at any time.  You can set a different watermark for each Image Size. It is common for business to use an acronym for the thumbnail image. Maximum number of characters for each field is 32. 

Gallery Watermark Text These fields offer you the ability to add text that will be displayed as semi-transparent image on top of your Gallery images, including Slideshows. The watermark is dynamically generated when a customer views your site, allowing you to change the watermark at any time.  You can set a different watermark for each Image Size. It is common for business to use an acronym for the thumbnail image. Maximum number of characters for each field is 32.
Product Images This section offers you the ability to specify the size you want for each individual Image Size for your site's Products. If no size is entered than the default value, displayed to the right of the field, is used.
Category Images This section offers you the ability to specify the size you want for each individual Image Size for your site's Category. If no size is entered than the default value, displayed to the right of the field, is used. 
Gallery Images This section offers you the ability to specify the size you want for each individual Image Size for your site's Gallery. If no size is entered than the default value, displayed to the right of the field, is used.
Survey Images This section offers you the ability to specify the size you want for the thumbnail Image Size for your site's Survey. The image will appear below the value of a multiple choice survey question. If no size is entered than the default value, displayed to the right of the field, is used.
Option Images This section offers you the ability to specify the size you want for the thumbnail Image Size for your site's Option Sets. The image will appear when your customer hovers over the option value. If no size is entered than the default value, displayed to the right of the field, is used.
Order Images This section offers you the ability to specify the size you want for each individual Image Size for your site's Cart and Checkout screens. If no size is entered than the default value, displayed to the right of the field, is used.

Purpose of Watermarks

Watermarks are commonly used in very competitive industries where high quality images are scarce. The purpose of watermarks are to discourage competitors from stealing images from your website. If you do not foresee this being a problem for your type of business we recommend not using watermarks. Keep in mind that it is very easy to add and remove watermarks in WSM.

Saving

Each time you edit the information on your Site's Configuration, it is important that you click the Save Changes button before navigation to another menu option in Web Shop Manager. Note: you can be on any tab on the System's Configuration screen when you click Save Changes and it will save the changes on all tabs.

🔎Note: Typically once your image sizes are set this tab is rarely revisited. It is always a best practice after you change a setting to view your site to confirm the layout is displaying properly

Image/picture file types

Web Shop Manager will permit the use of JPG,GIF, and PNG files. If you wish to attach a file of another type you may Attach a File (create link)

Image resolution

We suggest optimizing your images to the best of your ability (possibly lowering the quality to withhold less pixels) to fit the site page you are going to be displaying it on and the purpose the image will be serving.

🔎Note: When utilizing a software package such as Adobe save the file in the format of "save for web" and upload at 80%. 

Adding images to categories

    1. Log into the back end of your website.
    2. Hover over Catalog.
    3. Click on Categories.
    4. Click on the pencil/paper icon next to the category you want to add an image to.
    5. Scroll to the bottom to the section marked Thumbnail. 
    6. Click Choose File. 
    7. Find your image on your desk top.
    8. Once you have it, go to the bottom right and click Save Changes.