Enhanced Variant Images - Help

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

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

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's display 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 Variant 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 Variant 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 Variant Images app in the app admin). We discuss cloning your catalog below.

To manage this app, click on its name "Enhanced Variant 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 Variants 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 Variant Images app. Go back to the Enhanced Variant 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.

What's the difference between this and the Enhanced Product Images app?

The Product Images app allows you to build image galleries based on a product's first option's values - e.g. Color - so you could have a gallery for each Color, but any other options would not affect the gallery.  With this app, you can build a gallery for each individual variant in a product.  The variant to be loaded is determined by ALL the options selected, not just one.