Enhanced Products Images - Help

Once installed and setup, the Enhanced Product Images app will allow you to:

  1. Avoid the 12 image limit in Lightspeed eCom for product's details page; upload unlimited images (within reason) for each product in our app (larger image catalogs may incur additional hosting costs)
  2. Upload larger, higher quality images so your customers can see more detailed representations of the product
  3. Present image galleries with the MagicZoom Plus interactive gallery
  4. Works per Lightspeed eCom variant option selections
  5. Can work in conjunction with our Color Swatches app

Product images uploaded into this app are hosted externally from eCom, so we can bypass the limits eCom has for the number of images you can upload per product AND maximum size of those images.  Using eCom’s standard product image feature, you’re currently limited to 12 images per product, with max size of each image being about 1000px. We don’t have any hard set limit for images per product (though large image catalogs may incur additional hosting costs - please contact us if you need to host more than 5000 images) and our maximum image size is 2000 pixels wide (with unlimited height).  

Even though the images are hosted externally, the app will load its images IN the eCom website’s product details page.  The app simply replaces the standard eCom image gallery with the app’s own gallery (created by images you upload for the product in the app) and display them using the dynamic MagicZoom Plus plugin for a more interactive, polished image display and zoom functionality.

If you have products with color options like Red, Blue, or Leopard Print, you can upload images to create a specific gallery for each color.  When the user selects a specific color, that color’s image gallery will load from the app and replace the existing image gallery. This works with either the standard eCom color variant selection or with our Color Swatch app’s swatch display.

This app only handles the images for the main product on the product details page in your eCom website.  Product images for thumbnails displayed on category pages, the related items section, in the cart or anywhere else must be managed through eCom’s catalog.

INSTALLATION: Follow instructions in Lightspeed eCom to purchase the Enhanced Product Images app from the App Marketplace.  During install, you'll be forwarded to our app management site to either login to an existing account (if you've purchased a Lightspeed eCom app from us before) OR create a new account with us to install and manage this and any future apps you may purchase from us for Lightspeed eCom.

Once you've created an AdVision App account or logged into your existing account, the app installs automatically, after which you'll be forwarded to the shops list, which displays a list of Lightspeed eCom shops registered with your account and any apps installed with those shops.  

NOTE: For the Enhanced Product Images app to function, the Catalog Clone app is installed at the same time.  The Catalog Clone app is needed to clone (and keep in sync with) your eCom catalog into our app framework (so your catalog can be available to the Enhanced Product Images app in the app admin).  We discuss cloning your catalog below.

To manage this app, click on its name "Enhanced Product Images" under the appropriate shop.  This will take you to the products listing view showing any products the Catalog Clone app has imported from eCom.

Before you start dealing with your catalog and uploading images, you’ll first want to define the apps settings, some which affect image uploads. Click on the Settings tab to see the fields you can adjust.  Under settings, you can control the following:

  1. Detail Image Width (required) - The zoom image you upload will be resized to this width for the detail image display.  The detail image is the main image that displays on the product's details page, which users can click on to see the enlarged, zoom version.
  2. Detail Image Height (optional) - Leave empty or set to 0 for unlimited/variable height. The zoom image you upload will be resized to this height for the detail image display.
  3. Zoom Image Width (required) - This determines the width the zoom image should be sized to; this is also the width the images you upload should be sized to (i.e. you upload your zoom image into the app, the app resizes this zoom image for the detail and alternate image displays). Maximum width is 2000 pixels.  The zoom image displays, using the MagicZoom Plus plugin, when clicking/hovering on a detail image.
  4. Zoom Image Height (optional) - If set, app will resize any images you upload to be this height.  Leave empty or set to 0 for unlimited/variable height.
  5. Alternate Image Width (required) - The zoom image you upload will be resized to this width for the alternate images display.  The alternate images are the small thumbnail/swatch images that display below the main image in the image gallery. When a user clicks on an alternate image thumbnail, the main image will be updated to display the alternate image (but at the detail image’s size).
  6. Alternate Image Height (optional) - If set, the zoom image you upload will be resized to this height for the alternate images.  Leave empty or set to 0 for unlimited/variable height.

If you make any changes to any of these fields, be sure to click "Save Settings" button to save those changes.

Now that you’ve defined the app’s image settings, you'll want to perform the initial sync in the Catalog Clone app to pull your current catalog of products into your AdVision app account.  To do this, either go to the Products tab and click the Sync Catalog button, or go to your main apps page, find, and click on the "Catalog Clone" app link, and then click the button "Import/Full Sync Catalog".  Be sure to leave your browser window open and computer on while the import runs.

Once you've imported your catalog into your AdVision App account, you can now begin working in the Enhance Product Images app.  Go back to the Enhanced Products Images app and go to the Products tab.

WARNING: Be sure to assign your image files unique filenames before uploading.  If you use duplicate filenames, those files will overwrite each other.  For example: If you upload "image-1.jpg" to Product A, and then a different file with the same filename of "image-1.jpg" to Product B, the second upload will overwrite the file from the first upload, which will cause Product A and Product B to use the same image file.

Check Out the Video Tutorial for Working in the Product Images App

Each product that was imported from your eCom catalog will show in this view, and with each product you can see the following info:

  1. ID - in AdVision app system
  2. eCom ID - the product's ID in eCom
  3. Title
  4. URL - path to the product in your eCom webstore
  5. Visibility - whether or not the product is set to show in your eCom webstore
  6. Has Images - indicates if you've uploaded any images for the product in the app yet

To start setting up image galleries for products, you must first find a product that you have images prepared for.  You can do this by either browsing through the list of products or by using the keyword search at the top. Once you locate the product you want to work with, click on its title to manage its image galleries.

If the product you've selected has any variants (e.g. Color, Size) setup for it in eCom, you'll see them listed on the page that loads; if the product doesn’t have any variants, you’ll see a single area called “Default”.  With each variant, you'll see its title (e.g. Color), under which will be listed any options within that variant. For example, variant options for Color might Red, Blue, and Green. For each variant option there will be an area available for setting up an image gallery.  The app will only override the eCom product image gallery if you’ve setup an image gallery in the app for the specific product/variant that’s selected when the product page loads in your eCom website.

To build out the image gallery for a variant option, you can either:

  1. Upload a new image into the app’s image catalog by clicking on the “Upload Images” icon within the gallery’s area
  2. Search for an image you’ve already uploaded into the app’s image catalog using the keyword search box within the gallery’s area.  This will list any images found, and you can add any results to the gallery simply by clicking on the image result.

Uploading a New Image

Before uploading an image, you must first prepare it.

At the top of the page you’ll see a message titled “Please remember to optimize your images before upload”.  This outlines the requirements for a product image. Each image you plan to use should be:

  1. A maximum of 2000 pixels wide, unless you set the app’s Zoom Image Width setting to less than 2000, then the maximum is whatever you set the app’s Zoom Image Width to.  The app will still function if you need to upload an image that’s smaller than the Zoom Image Width size, but it will not be enlarged by the app (images cannot be enlarged without losing quality), so it show smaller when displayed to your customers.  This is why it’s best to upload an image that matches the Zoom Width you set, whenever possible.
  2. 72 DPI
  3. Optimized for the web.  If you’re unfamiliar with optimizing images for the web, please check out https://www.abetterlemonadestand.com/optimizing-images-for-web/  Failure to optimize an image before upload may result in the image failing to upload into the app, and will result in slower load times for your customers when loading the images.
  4. If you set a Zoom Image Height in the app’s settings, be sure the height of the image you’re uploading matches that.  If you upload an image that is taller than the Zoom Height, the app will crop it, which may cause the image to look different then you intended.  If you want to upload images of differing heights, make sure to set the Zoom Image Height setting to 0, which will allow you to upload images of any height, and the app will not crop it.

Once you’ve prepared your images as necessary, click on the Upload Image icon in the gallery area you want to upload it to.  This will produce the file selection dialog box from your operating system so you can locate the file you’ve prepared. Once you find the file, select it (double click or click on it and then click “Open” or “Select”).  The app will attempt to upload the image immediately, and if successful, you see a thumbnail of the image show up in the gallery area.

Under each image thumbnail showing in an image gallery’s area, you’ll see:

  1. A text box to set the “Rank” of the image.  This will determine the order images in this gallery will display.  An image with a lower Rank number (e.g. 1) will display before an image with a higher Rank number (e.g. 2).  The first image to show in a gallery will be used as the Main image display when the gallery first loads.
  1. Below the Rank text box is a “Remove” button.  Use this to remove an image from a gallery. This does not delete the image from the app’s image catalog, it just removes the image for that particular gallery.

Once you’re done setting up image galleries for a product, click on the Products tab and move on to the next product that needs images.

How a Gallery Displays in your eCom Website

Once you’ve completed setting all the images for a product, you can visit the product’s page in your eCom webstore.  If you’ve setup images in the app for the default variant that loads when your product page loads, the app will override the standard eCom image gallery display and show the app’s image gallery in its place.  If you did not set images for the default variant, the product image gallery will load whatever you have set in eCom. As a user, if you select a variant option that has images setup in its gallery in the app, the eCom gallery will be hidden and the app image gallery will be displayed.  

In case you missed it above, we have a video tutorial that goes over the basic admin work within the app: Check Out the Video Tutorial for Working in the Product Images App

Follow
Reply