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, 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 the Stencil Theme Editor usually under the product menu.


Stencil themes menu names vary. Depending on the Stencil theme the Theme Editor menu may be named differently than what is mentioned in this article. If the theme does not include this feature in the theme editor, reach out to the theme's developer or Ask a Design Partner.

  • 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.

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

Was this article helpful?