Wix Stores: Setting How Store Images Are Displayed

3 min read
Displaying great product images is one of the most important keys to e-Commerce success.
How images look in your store depends on the images you upload (the resolution, aspect ratio, etc.) and how you set image to be displayed in your store's Product Gallery and Product Page. 
This article will walk you through the image resizing and ratio options available in the Editor. To learn more about images, click here.
In this article, learn more about:

Understanding Image Resizing

The Product Gallery and Product Page come with two resizing options: Crop and Fit.

Crop

Images are cropped so that they are all the same size. If you uploaded images in different sizes and with different aspect ratios, part of the image may be cut off.

Fit

If you select the fit option, the entire image is displayed and keeps it's original aspect ratio. Images in your gallery will not have the same aspect ratio unless the original images had them. 
Tip:
To create a Product Gallery with a clean look featuring same-size images, and to avoid any images being cut off, we recommend uploading images with the same aspect ratio when creating your products. 

Understanding Image Ratio

Image ratio, also known as aspect ratio, is how wide an image is in relation to how tall it is. 
  • The Classic Product Page layout supports all image ratios. Other layouts look best with wider images.
  • For viewing on a mobile device, the recommended image ratio is 1:1 (a square picture). 

  1. Go to the relevant Product Gallery in the Editor.
  2. Click the Product Gallery.
  3. Click the Settings icon .
  4. Click the Layout tab.
  5. Choose an option under How's image resized?:
    • Crop: Images are cropped to the same size.
    • Fit: Displays the entire image.
  6. Select an image ratio.

Setting Image Display in the Product Page

  1. Go to your store's Product Page.
2.  Click the Product Page in the Editor.
3.  Click Settings.
4.  Click the Layout tab.
5.  Choose an option from the Image ratio drop-down.
6.  Choose an option under How's image resized?:
  • Crop: Images are cropped to the same size. 
  • Fit: Displays the entire image.

Did this help?

|