Images in Shopp are handled differently from WordPress media. Unlike WordPress, Shopp stored images can be assigned to custom categories as well as to products.
When adding images to a product or category, you only need to upload full size images. Full size images should be of a reasonable resolution to reduce bandwidth needs and load full-size images faster. Super high resolution images will be scaled down to fit the shopper’s browser window size where most of the high-resolution detail would be lost, unnecessarily wasting bandwidth and causing the image to download much more slowly. It is best to reduce full-size images to approximately 1-2 MB (megabytes) in file size before uploading.
A cache is a fast storage system where recently or frequently used information is kept to avoid having to reload or recreate it, a much slower operation.
Images are used in many different places and appear in different dimensions throughout the storefront. Shopp uses a specialized image server that automatically creates resized copies of the original full-size image for each use of an image on the website. Resized image copies are stored as a cached version in the same image storage system as used for uploaded images. The cached images will be used any time that image size is used to speed up the site considerably so that the costly resizing operation only happens as needed.
To upload an image:
- While editing a product (or category), locate the Product Images panel.
- Click the Add New Image button and select an image from your computer to upload.
- When the upload is successful, the image will appear.
- Remember to click the Save Product button to save the new images to the product.
By default, Shopp implements a Flash-based upload system that uses Adobe© Flash© technologies to provide upload progress while uploading. It can sometimes be problematic on systems where a recent version of Flash is not installed or not available. If there are problems uploading, you can try disabling Flash-based uploads to use browser-based uploading instead.
To disable Flash-based uploads:
- Navigate to Shopp’s system settings using the WordPress admin menus: Shopp → Setup → System.
- Find the Upload System setting.
- Toggle the Enable Flash-based uploading setting off to use browser-based uploads instead.
Product Image Gallery
Images assigned to products are automatically arranged into a product gallery. The gallery of product images features a larger preview image along with selectable thumbnail-sized images. Clicking a thumbnail image will load it into the larger preview image.
Clicking the larger preview image will load the full-size image in a pop-up that can be dismissed by clicking the (X) or pressing the ␛ button.
By default, the gallery image sizes can be adjusted using the preset image settings. Be aware that radical changes of the image settings can throw off the layout of product pages causing elements of the page to be placed in odd locations. Also, developers may lock out image settings for gallery images in the product page template to prevent accidents that might break the layout of the page.
To delete an image:
- Move your mouse cursor over the image
- Click the red delete button that appears
- Confirm deleting the image by clicking the OK button.
- If you delete an image by accident, do not click the Save Product button and instead, reload the page. Deleted images will be restored.
- To fully delete images click the Save Product button.
Using Shopp’s default setting, the order of images in the image panel will determine the order of the images in the gallery on the product page. The first image in the set will be treated as a cover image for the product and will be featured wherever a single product image is shown such as in category listings or in the shopping cart (if the cart is setup to show product images).
To arrange the order of images:
- Simply click and hold (do not release the mouse button) to drag the image.
- Release the mouse button when you are finished moving it.
The image management features of Shopp also include a detail editor for adding HTML-specific properties for SEO and accessibility including the
title attributes. The
alt attribute is used as “alternative text” to describe the contents of an image and provides readable text content for screen readers used by those with sight-impairments. The
title attribute is used as the proper name or caption for the image. Often web crawlers for search engines will capture the text in either the
title attributes (or both).
To edit image details:
- Double-click an image to load the detail editor pop-up.
- Enter the details for the image.
- Remember to click the Save Product button to save changes to the details assigned to each image.