Product images let your customers know what your products look like. The images you apply to a product in Retail POS (X-Series) are automatically synced to Lightspeed eCom (E-Series) and used in your online storefront. You can arrange images as they appear on the product page in eCom, enhance them using AI, and more.

To set the image size and proportions in your online storefront, use the preset design options in the Lightspeed eCom sitebuilder (Instant Site). If you're not using Instant Site, you can access the gallery layout settings from the Online tab > Webstore > Design in Retail POS.

Choosing which images to apply to a product in eCom

You can choose which images are synced from Retail POS to the product gallery in the eCom storefront.

To choose images for a product in eCom:

1. In Retail POS, navigate to Catalog > Products and open the product for editing.
2. Scroll down to the product gallery and click Choose images. You will see a list of all the images you've uploaded to this product or its variants.
3. Upload more images if needed, then tick the ones you want to use for this product in eCom.

4. Click Apply images at the bottom.

   

5. Save the changes.

All the images you've selected are now applied to the product, both in Retail POS and in eCom. Any of the images you haven't selected are not synced to eCom.

Enhancing product images with AI

With the AI image editor in Retail POS, you can enhance product photos to free up time to focus on other business tasks and edit pictures without the need for design skills or hiring professionals.

To enhance product images with AI, you need to have Lightspeed eCom (E-Series) connected to Retail POS.

To enhance a product image with AI:

1. In Retail POS, navigate to Catalog > Products and open the product for editing.
2. Make sure the photo you want to enhance is added to the gallery.

3. Click Enhance images below the gallery:

   

4. Play around with the settings. Choose the background color and crop the image if you like. Apply filters. Adjust brightness, color balance, saturation, etc.

   

5. Save the changes you like best both in the image editor and on the product page in Retail POS.

Your image is now enhanced with AI. It will be used in the product gallery both in Retail POS and in eCom.

Arranging images as they appear on the product page in eCom

When you add multiple images to a product in Retail POS, the first uploaded image is considered the main. In your eCom storefront, it shows as a product thumbnail on a category page and is the first image displayed on the product page. To change the main image, you need to drag a different picture to the first place. 

You can also sort other product images by dragging them into the desired order.

To arrange images on the product page in eCom:

1. In Retail POS, navigate to Catalog > Products and open the product for editing.
2. Make sure all the images are added to the gallery.

3. Hover over images in the gallery and drag and drop them to reorder:

   

4. Save the changes.

In your eCom storefront, customers will now see product images in the order you've set.

Optionally, you can arrange images in your eCom admin panel, in Catalog > Products.  The recommended option is to rearrange images in Retail POS, as it is the system of record.

Hiding images from the product grid in eCom

When you add a product to your Retail POS catalog and do not upload any image for it, your eCom online catalog automatically shows a gradient image as the product’s thumbnail in the grid:

You may want to remove or hide product thumbnail images from the product list in eCom for a more compact look. For example, if you know that uploading images will take you some time. In this case, you can show just product names without images:

To hide images from the product grid in eCom:

1. In Retail POS, navigate to Online > Webstore (or Website) and click Edit Site.
2. In the Page dropdown at the top, select Catalog > Categories & Product Grid > Product card settings.
3. Switch the Show main product image toggle.
4. Publish the changes.

If you're not using the Lightspeed eCom sitebuilder (Instant Site), go to Online > Webstore (or Website) > Design > Product Card details and layout and select Do not show for the Main product image setting.