One of the first things you must know about image dimensions in Online Store is that the theme, and the default Online Store CSS, specify product image widths to ensure consistent layouts across multiple devices.
Dimensions you specify on the Products tab of the Online Store settings screen affect the size of the thumbnails that the theme uses when displaying product images.
Before starting, make sure that the graphics you upload are large enough in size. Anything from 800×800 and higher would work.
The terms we use are:
- Single Product Image: This is the largest thumbnail on the product details page.
- Catalog Images: This is the medium sized thumbnail used in product loops (e.g., categories, related products, up-sells, cross-sells, etc.).
- Product Thumbnails: This is the smallest thumbnail used in product galleries on the single product pages, the cart and widgets.
If you’re using Chrome, you can right click the image and select Inspect Element. The same can be done in Firefox using Firebug. This gives you the image dimensions. Make a note of this.
In Storefront, the largest catalog thumbs are rendered at 213 x 213 pixels.
Repeat the process for the single thumb — large image on product details page.
In Storefront, the largest Single Thumbnail is rendered at 298 x 298 pixels.
The smallest is likely the thumbnail in the product gallery. Repeat the inspection process to get the dimensions.
In Storefront, it renders at 43 x 43 pixels.
Input the data and regenerate the thumbnails
Now that all thumbnail image sizes for the theme are known, we can add new dimensions to ensure that future thumbnails will be this size or larger.
In Settings > Products > Display, be sure that the maximum image sizes are at least as big as the dimensions the theme is rendering for those thumbnails. Then Save Changes.
Any new product images that are uploaded will now have thumbnails in these settings, and should appear without distortion or blurriness.