A note about images Your product images are the among the most utilized content on your site. They are essential for helping your visitors to convert into buyers. It is important therefore, that you configure your image sizes correctly.
The most important thing to realize is that most of the preparation for your images should be done prior to upload.
We recommend choosing and sticking with an aspect ratio for your images. For instance, for the vast majority of stores using our theme we would recommend either 1:1 (square), 4:3 (landscape) or 3:4 (portrait) product image ratios.
The image size options in this panel refer to maximum sizes for large screens. As screens reduce in size, the images will automatically scale.
If you stick to the our recommendations about image ratios, there should be no reason to change the image sizes from “Optimized for theme”.
Recommended Image Ratios
Logo Size
4:3 or 1:1
Blog Image Size
1:1 or 4:3
Main Product Images
1:1, 4:3 or 3:4
Examples of actual image sizes in the above aspect ratios are: 1200 x 1200px (1:1), 1000 x 750px (4:3), 750 x 1000px (3:4)
Thumbnail image in product page
1:1, 4:3 or 3:4
Thumbnail image in cart and other pages
1:1, 4:3 or 3:4
Zoomed image
1:1, 4:3 or 3:4
Image in gallery view
1:1, 4:3 or 3:4
Brand image in gallery view
Place the logo on a 1:1 or 4:3 canvas
Hero Banners
We recommend using the Heading, Text and Button Text fields in Storefront > Home Page Carousel for any text you want to appear over each image.
If you do use images that have text embedded in them, bear in mind:
depending on the size of the browser window/device your store is being viewed on, hero images may be cropped, so text that's close to the edge of the image may no longer be visible or readable.
although Google seems to be making progress interpreting text embedded in images, at time of writing, their advice is still "don’t embed important text inside images".
Storyboard images
For best results…
- images 1 & 2: use a landcape image with the focus in the centre of the image, a suggested ratio is 16:9.
- images 3, 4 & 5: use a landscape image with blank space on the left and the focus to the right of the image, a suggested ratio is 17:6.
Carousel images
For best results, use landcape images, and make sure that all of the images you use have the same aspect ratio. A suggested aspect ratio is 16:9.
Examples of 16:9 image sizes: 800 x 450px, 1200 x 675px, 1920 x 1080px.
Examples of 17:6 image sizes: 850 x 300px, 495 x 175px.
Image size calculators
4:3 (landscape)
3:4 (portrait)
16:9 (landscape)
17:6 (landscape)