How to set up and use images in slscart

Apr 17, 2017 by Doug DePrenger

Images are a core part of an e-store. There are many image settings in slscart to accommodate.

Optimizing images

The first task is to optimize an image, which means making the image look like the original but reducing its file size. File size is how much room the image takes up on the server. The larger the file size the longer it takes to download it to a customer's computer.

tinypng.com is a helpful website for image optimization. Just drag and drop the image(s) to optimize in size into the site's target area and it will optimize them and provide a download link for each one. Note the image's dimensions (width and height) are not changed.

This task is important because search engines, notably Google, penalize websites that load slow. Reducing the file size of images will help tremendously to speed up a website.

Store Administration

Site Settings

The following settings determine where specific images are kept. It is best to use the default locations so all images do not end up in one location. Too many images in a directory can slow down a site as the server has to search for a requested image.

Thumbnail Dir: - default: images/thumbs. This is where thumbnail images are kept.

Large image dir: - default: images/items. This is where the large product images are kept.

Blog Image dir: - default: images/blog. This is where blog images are kept.

Category img dir: - default: images/categories. This is where category images are kept.

General img dir: - default: images. Catalog images, ... are kept here. In very old versions of slscart, all images were kept here.

Catalog Setup

Item images: - default: 3. This setting determines how many large images are available for a product (up to 5).

Related images: - default: 'no'. If 'yes' then up to five related images (with links to related products) can be specified for a product. The product's thumbnail image is used. If 'no' then links to related products are used.

Max upload size: - default: 400 KB. This determines the maximum size of an image that can be uploaded to the server. 400 KB is quite a large image. The range is 100 KB to 2048 KB.

Use Alt Keywords: default: no.

Upload Width: - default: 200px. This is the width of an auto created thumbnail.

Upload Height: - default: 200px. This is the height of an auto created thumbnail.

Max image width: default: blank. If blank, the actual width of thumbnail is used. Enter the maximum pixel width at which your thumbnail images should display, or leave blank to use the actual width of the thumbnail.

It is best, performance-wise, to have the thumbnails the same size and not enter a max image width or height.

Max image height: default: actual height of thumbnail (i.e. leave blank). Enter the maximum pixel height at which your thumbnail images should display, or leave blank to use the actual height of the thumbnail

Item Thumbs: When uploading item images, choose between the default setting for thumbnails offer to create an auto thumbnail, use the large image, or show a blank thumbnail field?

Thumb Defaults: When uploading item images, should the aforementioned setting apply only when no thumbnail image exists, or always (adding or replacing thumbnails)?

Thumbnail Crop: When uploading item images, if the 'Automatic thumbnails' choice is selected, should the 'crop image' button be checked by default? (Store admin can still choose to crop or not; this only affects the initial default setting.)

Web Site

Images

Image list

Uploaded images are managed from this.

Catalog images

Images can replace links in the store's catalog. The images are stored in the general image directory.

Included are:

• Logo
• Mobile Logo
• Order button
• Search button
• View cart button
• Registry button
• New header
• Featured header
• Sale header
• All header
• New navigation image
• Featured navigation
• Sale navigation
• All navigation image

Favicon images

A favicon, many years ago, was a simple file called favicon.ico and placed in the home (root) directory. That was before mobile devices. Now, there can be literally dozens of images. Apple uses touch icons, Windows 8,10 uses tiles, Android uses ?, and safari uses svg graphics. They have different dimensions and requirements.

slscart can create nearly all the favicons. Click here more information on creating favicons in slscart.

Layouts

There are several ways images can be shown on the product detail page. The default is stacking the large images.

Under 'Detail Image' is a dropdown list of the different ways to display the large image(s) on the product detail page.

Important notes: A mouseover zoom is replaced with a regular pinch zoom in iOS devices. Zoom and Lightbox options are only available with plugins. Using slideshow, gallery, lightbox or zoom options add some load time to the site, especially if they are utilized on a single, double, triple or multi layout; use in detail product layout only is recommended.

• Default General product image, default for that layout. Detail item layout displays all large images stacked on top of each other, multi item layout displays first small image that links to the detail item layout, and others display all small images which pop up to a larger image.
• First Image Detail item layout displays first large image, and others display first small image which pops up to a larger image.
• All Images Detail item layout displays all large images, and others display all thumbnail images which each pop up to a larger image.
• Gallery Detail item layout displays first large image, and others display first small image. Smaller thumbnails for all images show underneath, creating a gallery that changes the main image on click.
• Slideshow Detail item layout displays first large image, and others display first small image. A left and right arrow scrolls to the next image.
• Slideshow Gallery Detail item layout displays first large image, and others display first small image. Smaller thumbnails for all images show underneath, creating a gallery that changes the main image on click. Initial image includes a left and right arrow that scrolls to the next image.
• Zoom Detail item layout displays all large images, multi item layout displays all small images which link to the detail item layout, and others display all small images. All images contain an inner zoom on mouseover (replaced with a pinch zoom in iOS). Requires Elevate Image Zoom plugin.
• Zoom First Detail item layout displays first large image, multi item layout displays first small image which links to the detail item layout, and others display first small image. Image contains an inner zoom on mouseover (replaced with a pinch zoom in iOS).
• Zoom Gallery Detail item layout displays first large image, multi item layout displays first small image which links to the detail item layout, and others display first small image. Smaller thumbnails for all images show underneath, creating a gallery. Main image contains an inner zoom on mouseover (replaced with a pinch zoom in iOS).
• Lightbox Detail item layout displays first large image, and all others display first small image. When clicked, a pop up displays a slideshow.
• Lightbox Gallery Detail item layout displays first large image, and all others display first small image. When clicked, a pop up displays a slideshow. Smaller thumbnails for all images show underneath, creating a gallery that changes the main image on click.

Pages

Nav Image: If you want to display a button image instead of a text link (if you are using text link navigation types), click the Upload link to load an image. You can also add a second image for a mouseover effect, if desired.

Header Image: If you want to display an image at the top of the page, in place of the page title, click the Upload link to load an image. This image will only display if the "Show Title" field is set to "Yes".

Template

How to specify an image in a template

update logo/images (overrides current image setting)

specifying images in a template

E-store

Category

Nav Image: If you wish to display a button in the navigation area in place of the text link (for site designs with text navigation areas), enter the URL of that button here. You may also click the image to load a new image to your site.

Header Image: If you wish to display an image at the top of the category place, in place of the category title, enter the URL of that image here. You may also click the image to load a new image to your site.

List Image: If you display a category list when a customer first views the catalog or index page, you can enter a list image to show an image in place of the category name in the list. The list image also displays in place of the category name for any sub category listing. Enter the URL of the list image here. You may also click the image to load a new image to your site.

Products

In the Description: field images can be inserted.

Up to five large images can be specified for a product.

Large image - If you wish to display a larger image in the catalog for detail view, enter the URL of that image here. You may also click the image to load a new image to your site.

Large image alt text - Alternate text (aka alt attribute) for large image. Enter a good description of the large image. If nothing is entered, the product name is used.

Thumbnail image - If you wish to display a thumbnail image in the catalog when products are listed in multiples, enter the URL of that small image here. You may also click the image to load a new image to your site.

Related items - If enabled to use images, the product's thumbnail image is used.

Mals e-cart

Mals has the capability to display a small image on checkout page for each product. The product's thumbnail image is used. Click here for instructions on how to set up slscart and Mals to display an image on the Mals checkout screen.

Orders

Packing Slip Details

The packing slip logo image is kept in the general image directory. To see what the logo looks like on the pack, click on an order then the Pack Slip link.

***