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. When choosing product images to use as a thumbnail image, it is best if they are all the same aspect ratio

Product Cards

The thumbnail version of products that display on category pages or in areas like Featured Products 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. The theme platforms handle how they fit images into product cards differently.

Resizing Stencil Images

Product image size adjustments are handled in the Stencil Theme Editor usually under the product menu.

  • 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 will result often 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.
 

Was this article helpful?