Your product photos are big and beautiful on the product page; after all, that's where customers want to see all the details! Full size images on your category pages, however, would be overwhelming to visitors.
This is why Volusion stores each of your uploaded product images at multiple sizes, each one optimized for specific areas of your website. When you upload an image through a product editing page in the Admin Area, the software automatically creates the necessary additional image sizes. If you upload all your product images through the FTP, though, you'll need to know a few things.
Photos in the Admin Area are named with the following format:
Where product [productcode] is the product code in your store's database and [fileextension] is the file type (.jpg, .jpeg, .png, or .gif).
The "X" after the product code represents the numerical extension that tell the software where to display each image on your storefront.
Main Image File Names
Below is a list of the five main product image variations that appear throughout the store for a given product, along with a description of where each one appears.
Photo Name: Displayed on Product Page (medium)
Photo Name Extension: -2T
Full File Name: [productcode]-2T.[fileextension]
Storefront Location: This photo size displays as the main product image when viewing the product page.
Photo Name: High Resolution Zoom Image (large)
Photo Name Extension: -2
Full File Name: [productcode]-2.[fileextension]
Storefront Location: If this photo is at least 20% larger than your -2T (medium) photo, and at least 300px high, it’s used as the Zoom photo when you have the Enable Image Zoom Config Variable enabled. Otherwise, it displays when customers click on the Larger Photo button below the main picture on product pages.
Photo Name: Alternate View Thumbnail (Swatch image for main product image)
Photo Name Extension: -2S
Full File Name: [productcode]-2S.[fileextension]
Storefront Location: This photo size displays right below the main (medium) image on the product page. It is just a small version of your main product image, but if you plan on uploading additional alternative view photos (which will be different images), you should upload this thumbnail version of your main product photo. Customers can click on this thumbnail to return to the main image once they've viewed alternate images.
Photo Name: Displayed on Category Results (small)
Photo Name Extension: -1
Full File Name: [productcode]-1.[fileextension]
Storefront Location: Displays on any category or search results pages that show a grid/list of images for products in that category. It also displays in the homepage sections that use photos (Featured Products and Super Deals). This size also displays in a customer's My Recent History section on each product page (if the Display Product History Config Variable is enabled).
Photo Name: Displayed on View Cart Page (tiny)
Photo Name Extension: -0
Full File Name: [productcode]-0.[fileextension]
Storefront Location: Displays primarily on your shoppingcart.asp page when a product is in the shopping cart. It also displays in the Related Products and Accessories sections of your product pages, and on one-page-checkout.asp when you click Edit items in cart. If any of your store's categories use the Checkboxes display mode, this image size displays for products on that category page.
AIternate Image File Names
When you upload additional ("alternate") product photos after uploading the main image, the naming conventions are similar. Alternate photos never occur in the "small" or "tiny" file versions, since only the main product image is used for category pages and the shopping cart, respectively.
Photo Name Extension: -3S
Photo Name: 1st Alternate View Thumbnail
Storefront Location: This photo size is the swatch image for the first alternate photo you add for a product. It is also small, and displays directly underneath the main photo on the product page, next to the -2S Alternate View Thumbnail (above).
Full File Name: [productcode]-3S.[fileextension]
Photo Name Extension: -3T
Photo Name: 1st Alternate Image (medium)
Storefront Location: This photo is the main alternate image photo and is the same size as the product's main (medium) image. This image appears when customers click on the -3S Swatch (above) underneath the main photo on the product page.
Full File Name: [productcode]-3T.[fileextension]
Photo Name Extension: -3
Photo Name: 1st Alternate Image (large)
Storefront Location: This photo is the larger (zoom) version of the 1st Alternate Image (medium) for a product (above). Like the main High Resolution Zoom Image (large) for the product, this image must be 20% larger than the -3T photo, and must be at least 300px high for the automatic Zoom feature to work. Otherwise, customers can click the Larger Photo button to view the -3 photo.
Full File Name: [productcode]-3.[fileextension]
Each additional alternate image follows the same file naming convention, incremented by the next consecutive number. The second alternate image uses the file names -4S, -4T, and -4; the third alternate image uses the file names -5S, -5T, and -5; and so on.
How can I use this information?
If you have quite a large product catalog to upload into your store, it's nice to have shortcuts. While you can use the Import/Export feature to add product records in bulk, there isn't a spreadsheet column that can accommodate image uploading!
Volusion's answer to that dilemma is the Product Image Generator, a handy application that uses a folder of raw product images, along with a .CSV mapping file, and generates various product image sizes you'll need within your store. For more information, check out our Volusion Product Image Generator article.
Use Same Photos As ProductCode
You can also share photos among products. Under the Advanced Info section, click the Misc tab, and enter a product code in the Use Same Photos As ProductCode field. If a product uses this field, then both the product images and the Option Color Swatch images would use the image names associated with the product code put in that field, rather than the primary product's image names.