Image Sizes

Learn how to configure your store image sizes correctly here. In your control panel, go to Storefront > My Themes, and click the blue "Customize" button to launch Theme Editor. In the left hand column of the Theme Editor, click the panel labelled 'Image Sizes'

Typography Colors

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

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

1:1, 4:3 or 3:4

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.

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)

Enter Width:  Height =

3:4 (portrait)

Enter Width:  Height =

16:9 (landscape)

Enter Width:  Height =

17:6 (landscape)

Enter Width:  Height =