When uploading images to your storefront, they can sometimes appear too large or stretched, or the image’s colors may look different. These display issues can be resolved by editing your images to conform to your theme’s image preferences, or by adjusting your theme’s image settings.
In this guide, we'll go over common image issues, finding your theme's recommended image dimensions, and adjusting or resizing images.
Common image issues include:
What Causes Image Distortion?
Image distortion occurs when the aspect ratio of the uploaded image does not match the ratio in your theme's settings. The theme then resizes the image to fit its pre-determined aspect ratio, stretching or shrinking the image as a result.
For example, if your theme’s product card dimensions are 150 x 300 px, and you upload an image that is 100 x 100 px, it will stretch the image out to its aspect ratio.
On the other hand, if the default dimensions are 300 x 150 px, the image would be compressed to fit the preset dimensions.
To fix image distortion, you can either edit the image you are uploading or adjust your store’s image settings. If there are only a handful of images being distorted, it’s better to edit the images themselves. Changing your store image settings is useful if you want to adjust the dimensions for all images in a given group, such as all product thumbnails or brand images.
Why is My Image Too Big?
When uploading images to different areas of your store, some can appear disproportionately large.
This can happen when the store uses an image’s original dimensions instead of formatting it to an optimized size. This occurs most often when uploading your store’s logo.
You can review your theme’s settings to ensure that the images in your store are adjusted to their recommended dimensions. Certain images, such as your logo in the printable invoice and packing slip, will only use the image’s original dimensions. Because of this, you will likely need to adjust and re-upload these images to resize them.
Why Did My Image Change Colors?
When uploading an image, you may find that it doesn't quite look the same as the original. These color shifts are the result of mismatching color profiles, also known as ICC profiles. These profiles translate the image data into colors that your monitor or printer can read. Web browsers display images in sRGB.
Image profiles are stripped from your product images when they are uploaded to the control panel to ensure that they are consistent across different devices. If possible, save all images without a color profile in your image editing program. This process will vary, depending on which editing program you are using. Check your image editing program's documentation for more details on color profiles.
If you must use a color profile, use the “Save for Web” tool or its equivalent in your image editor to optimize the image’s colors when uploaded to your store.
While you cannot prevent stripping when uploading product images, images uploaded to the Image Manager maintain their color profiles. You can insert these images into product descriptions, web pages, and anywhere else with access to the WYSIWYG editor by using the Image from gallery list.
Why are My Product Images Uneven?
As you select product images to use as the thumbnail in a grid or line, such as the product lists found on category pages or in panels, you may notice that they appear uneven.
This usually occurs when one product image is taller than other images in the row. To fix this, you can edit the images so that they share the same aspect ratio, or you can change the maximum product card image height in your theme’s settings.
Finding Your Theme’s Recommended Dimensions
Themes have preset image dimension requirements for different types of images in your store, such as the logo or product thumbnails. Knowing what these dimensions are before uploading your images will help you in identifying which images already meet these requirements and determining which images need to be edited in order to display correctly on the storefront.
You can find your theme’s recommended dimensions by clicking on the theme in Storefront › Themes and scrolling down to the documentation link under Support and Documentation. If you still have questions on the specifications for your store images, get in touch with the theme developer.
Using Multi-Storefront? Each storefront's themes are located in the storefront-specific settings within Channel Manager. See Single-Storefront vs. Multi-Storefront for more information.
Some image types share recommended dimensions across multiple themes. For example, the minimum dimensions for the home page carousel are generally 1200 x 600 px.
Once you have located your theme’s recommendations, you can alter your images to match the optimized dimensions, or you can customize your theme to fit your desired appearance.
