Product image cards being resized in Page Builder.

Themes automatically create thumbnail images for products, brands, and categories to ensure that the layout of the theme can remain consistent and easy to navigate. While the theme controls the general dimensions and number of images shown, you can adjust these settings.

If most of your images’ dimensions do not match your theme’s presets, it is easier to customize the default image dimensions in Page Builder than to edit each image individually.

 

This information is written for the Cornerstone theme. Check your theme’s documentation if you are unable to find the settings referenced below. If you are using a legacy Blueprint theme, see Blueprint Themes for more information.

When choosing product images to use as a thumbnail image, it is best if they are all the same aspect ratio, so when products are arranged in a grid or line, they appear even.

 

Before You Start

When preparing to change your image settings, you will want to know the dimensions and general aspect ratio of the images themselves. For example, if your product images are typically taller than they are wide, then you would not want to enter proportionally wider dimensions in the theme presets.

It's also worth noting that when Stencil resizes images, it takes aspect ratio into account. The image will adjust until its largest dimension meets the set product card dimensions. In the example below, the image’s height was resized to match the height of the product card, leaving a black border to fill the width.

Stencil Image Resize

Lastly, it is important to check for any affected images in Page Builder before publishing, after any image adjustments. This way, you can identify and resolve any image distortion issues before shoppers can see them.

 

Resizing Product Images

Generally, the recommended dimensions for product images are 1280 x 1280 px, though this may differ depending on your theme. Your theme’s product image settings are handled in Page Builder, under Theme StylesProductsImage sizes.

Product image settings in Cornerstone

From here, you can control the dimensions for the primary product image shown on the product page, the thumbnail that appears below the main product image or on the cart page, and the zoomed image that appears when hovering your cursor over the main product image. You can choose to use the dimensions optimized for the theme or specify your own dimensions.

When changing one image dimension (width or height), the other will automatically adjust to maintain the preset aspect ratio. If you wish to change the image proportions, you can click the toggle between the Max width and Max height fields.

Click the toggle to change an image's aspect ratio

 

Resizing Product Cards

The thumbnail image of products that displays on category pages or in panels, like the Featured Product Panel, is set inside of a product card. Think of this product card like a frame for a picture. It defines how much room exists between multiple pictures hanging on a wall, as well as defining the absolute maximum space that a single picture can occupy.

When you adjust image dimensions in Page Builder, what is actually changing is the "frame" or product card, not the image itself. Product cards can be resized from the Image sizes menu in Page Builder. Use the Image in gallery view dropdown to apply the preset dimensions or to add your own.

The Image in gallery view setting

 

Other Image Types

If you have added images to your product brands, you can resize them using the Brand Image in Gallery View dropdown in Theme StylesProductsImage sizes. As with other image settings, you can choose to use the recommended dimensions or specify your own.

The Brand image in gallery view setting in Cornerstone

To resize swatch images that display color and pattern options for your products, select Specify dimensions in the Product swatch images dropdown, under Theme StylesProductsImage sizes.

The Product swatch images setting in Cornerstone

You can also modify the thumbnail images included in your blog posts. Go to Theme StylesGlobalBlog and select Specify dimensions from the Size of images dropdown to enter your desired dimensions.

The Blog Size of images setting in Cornerstone

 

Need to change other image settings? Other images in the store, such as category images, do not have built-in settings within Cornerstone. You can edit your theme files to change image presets, or opt to use a theme in the Theme Marketplace that offers advanced image options.

 

Conclusion

Blurry or distorted images can negatively impact the customer experience in your store, so it’s important to know what causes different image display issues and how to fix them. Reviewing the optimized image dimensions and aspect ratios in your theme’s documentation can help you to select and format images so that they will enhance your storefront and encourage conversions.