Browse by Topic

Adjusting Store Image Sizes

Themes automatically create thumbnail images for products, brands and category images, so the layout of the theme can remain consistent and easy to navigate. The theme controls the general dimensions and number of images shown, but you can change these options. 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. 

 
 

Product Cards

The thumbnail image of products that display on category pages or in panels, like the Featured Product Panel, is set inside a Product Card. Think of this product card like a frame for a picture. When adjusting dimensions, what is actually changing is the "frame" or product card, and not the image itself. 

 
 

Resizing Stencil Images

Product image size adjustments are handled in Store Design, usually under the product menu.

 

Stencil themes menu names vary. Depending on the Stencil theme, the Store Design menu may be named differently than what is mentioned in this article. If the theme does not include this feature in the Store Design editor, reach out to the theme's developer or post in the Community Q&A Themes & Design group.

  • Main Product Images — adjusts the size of the primary product image shown on the product page
  • Thumbnail Image — adjusts the size of the thumbnail images that show under the primary product image on the product page
  • Zoomed Image — the size of the image when the mouse over or click to zoom function is triggered
  • Image in Gallery View — the size of the product image when viewed in a grid, such as on the category page or home page
  • Brand Image in Gallery View — the size of brand logos when viewed on the See All Brands page

It's worth noting that when Stencil resizes images, it takes aspect ratio into account when scaling images. The image will adjust until its largest dimension meets the set product card dimensions.

Stencil Image Resize

 
 

Resizing Blueprint Images

Legacy Blueprint themes handle image thumbnails differently. The theme will preserve the grid, but distort the image until it fits in the predefined box. This often results with pages having uniform grids, but distorted images.

Blueprint Image Distortion

Image sizes can be changed in Store Setup › Store Settings under the Images tab. See Image Settings (Blueprint) for more information about adjusting these settings.

This should help you manage how your images appear on your storefront. 

 
 

FAQ

What is Aspect Ratio?

Aspect Ratio refers to the relationship between the width and height dimensions of an image. It can be considered the general shape of the image. For example, an image with a 16:9 aspect ratio is wider than it is tall, but a 1:1 image has equal width and height.  

Why do my product rows look uneven? (Stencil Themes)

If images are not aligning with the grid, it's likely because one product image is taller than the rest of the row. Reduce the height on Specify Image Dimensions in the Store Design editor until the row aligns again. Stencil themes are set up to work best when all product images have the same aspect ratio. See Fixing Distorted Images for information on how to adjust an image.

Aligning uneven rows

Was this article helpful?