top of page

Designing your store

Wix Stores: Setting How Store Images Are Displayed

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.

This article will walk you through the image resizing and ratio options available in your editor.

In this article, learn more about:

Understanding image resizing

Where images are displayed, you'll see two resizing options: Crop and Fit.

Crop

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

Screenshot showing images displayed in a Wix Store with the crop image setting

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.

Screenshot showing images displayed in a Wix Store with the fit image setting

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. When selecting a setting, take into consideration the layout you choose for the Product Page, Category Page, or Product Gallery.

For example, the classic layout in the Product Page supports all image ratios. Other layouts look best with wider images.

Tip:

For viewing on a mobile device, the recommended image ratio is 1:1 (a square picture).

Selecting image settings in a Product Gallery

  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. Select an image ratio.

  6. Choose an option under How's image resized?:Crop: Images are cropped to the same size.
    Fit: Displays the entire image.

Selecting image settings in the Product Page

Make sure your images look great in the Product Page by selecting settings that work with your image's aspect ratios.

Wix Editor

Studio Editor

  1. Go to your editor.

  2. Go to your Product page:Click Pages & Menu  on the left side of the editor.
    Click Store Pages.
    Click Product Page.

  3. Click the Product Page element on your page.

  4. Click Settings.

  5. Click the Layout tab.

  6. Choose an option from the Image ratio drop-down.

  7. Choose an option under How's image resized?:Crop: Images are cropped to the same size.
    Fit: Displays the entire image.

Need A Professional Website?
Contact Us 
Today!

Online Programs: Connecting a Group to Your Program in the Wix App

Online Programs: Managing Your Notification Settings in the Wix App

Online Programs: Managing Your Program in the Wix App

Online Programs: Managing the Participants of Your Program in the Wix App

Online Programs: Sending Notifications to Participants

Online Programs: Showing or Hiding the Number of Program Participants

Online Programs: Creating a Group for Your Program

Online Programs: Managing Your Program Participants

Online Programs: Customizing Your Program Pages

Online Programs: Adding a Members Area

Online Programs: Reordering and Hiding Your Programs from the Program List

Online Programs: Adding a Video Step to a Program

Online Programs: Deleting the Online Programs App

Online Programs: Automatically Sending an Invoice When a Program Is Purchased

Online Programs: Creating a Certificate for Your Program

Online Programs: Importing a Step from an Existing Program

Online Programs: Upgrading Your Site

Online Programs: Adding and Managing Program Collaborators

Online Programs: Managing Coupons

Online Programs: Previewing Your Program

Online Programs: Adding Quizzes and Surveys Throughout Your Program

Online Programs: Creating and Managing Online Program Categories

Online Programs: Embedding Interactive Content in an Article or Section

Online Programs: Managing Your Step Order and Visibility for Your Programs

Online Programs: General Troubleshooting

Online Programs: Connecting a Pricing Plan to Your Program

Online Programs: About Automations for Your Program

Online Programs: Managing a Quiz

Online Programs: Removing a Program

Wix Online Programs: Translating Your Online Programs

wix experts
Graphic2Traffic web design
©
bottom of page