Contact sales now: info@ecommercetemplates.com
Ecommerce Templates > General Help > The Control Panel > Product Images
Product images display on the product and detail pages and are an integral part to showing off what your store has to offer. Images should be of the best quality possible without making the file size so large that download times become an issue.
There is no "correct" size but as a rough guide the product page image would generally display more of a thumbnail image so could be between 150px and 300px wide. The detail page as the name suggests is to provide full information so a larger image width of about 400px to 650px would be ideal. If you choose to show giant images they should probably be a maximum of 1000px width and probably a bit less.
It really helps if your images are uniform, the display is so much tidier if all the types of images are the same width and height. Regarding formats most people would want to stick to png or jpg files - these should be optimized to get the best quality / file size ratio possible.
If you want to upload multiple images, the simplest way is to do that via FTP. We have some help here on FTP file upload - the help there is for Filezilla but the basics correspond to most FTP clients.
If you are uploading individual images that can be done via the built-in image upload feature in the product admin page. For the ASP version that means your host would need to support the component ASPupload and that you have this setting in vsadmin/includes.asp - useaspuploadforimages=TRUE. For the PHP version you may need to change file permissions and we have some troubleshooting available if required.
The image fields can be populated in the individual product admin pages either manually by entering the path or by using the product image csv file.
The Small Image corresponds to the product page, the Large Image corresponds to the product detail page and the Giant Image to the enlarged image linked in a pop-up window or separate page from the detail page. The choice of display is set in vsadmin/includes.asp or vsadmin/includes.php
We also offer integration with Magic Toolbox image effects which will give you zoom, thumbnails, slideshows etc.
The default folder for the product images when using the upload is /prodimages/ but that can be changed in vsadmin/includes.asp or vsadmin/includes.php
You can have as many product images as you need, click on "More Images" to display more fields. Click on the button with three dots for the image upload.
Add the following to your css file
img.prodimage{
border:1px solid #ccc;
padding:4px;
}
This will give you a one pixel solid grey border with a bit of padding to keep the border from touching the image. For the product detail image that would be
img.detailimage{
border:1px solid #ccc;
padding:4px;
}
You can add overlays, these might display a marketing message like "10% Off" or a "New" label for example. You will need a minimum ECT version of 7.01 and then follow the overlay help and examples we have provided on the support forum.
If your images are displaying too wide for mobile screens on the products page, add the following to your css file
img.prodimage{
max-width:100%;
height:auto;
}
For the product detail image that would be
img.detailimage{
max-width:100%;
height:auto;
}
If for example you have the same product in different colors, you can display different images depending on which color the customer has selected from the product options. To achieve this enter the path to the image in the Alt Image and / or Alt Large Image fields in the corresponding product option admin page.
It may be that you want the product image to come before or after the product name or id for example. You will need to be using the detail page parameter and then you can change the order of elements as they are displayed on the page. This is also available for the products page.
ALT Text provides alternative text descriptions to images for visitors who cannot view the image. It may also help search engines to "read" your images. The ALT text is provided automatically for product images and is based on the product name. There is no need to add your own text as this is carried out dynamically for you.