Back to Theme support

Image sizes and ratios

Themes will always look better when using high resolution images. When viewing a website on a Retina, 4K, or greater screen, the demands for image quality are much greater; low resolution images will suffer.

We recommend that you use JPG images for photography and still images with complex colors due to their greater quality over other image formats.

You should use PNG images for graphics, icons, logos without gradients, and when you need a transparent background.

Where possible, go big on images: the theme will handle loading the correct image for the content required.

It’s also important to note that any time you have text on an image it reduces the quality of the image. Because our images are responsive, it could also cause the text to get cut off on smaller screens if you are not using a mobile-specific image. 

We have the Text with Overlay Section on our themes so that you can upload an image and then have the text and button applied on top of your image.

 

Shopify also has some useful guides on images that we recommend you review:

Image sizes:
Website image size guidelines cheat sheet

Uploading images:

https://help.shopify.com/en/manual/online-store/os/using-themes/change-the-layout/images

Fix the colors of uploaded images:

https://shopify.dev/tutorials/customize-theme-troubleshooting-fix-colors-of-uploaded-images

 

Logo

In our latest themes, you can adjust the logo width. We recommend uploading an image that is larger than the width you select in your theme. So, if your logo is set at 250px in your Theme Editor, we suggest uploading a logo that is 500px.

Suggested ratio Depends on your logo
Suggested size 512px wide x 512px tall*
Minimum size 250px wide x 250px tall

* The suggested size is Shopify’s recommended size. This will vary based on your actual logo design, so don’t worry if you don’t have a square image. That said, it should not exceed this. It’s more important that the width of your uploaded image is not less than the width in your Theme Settings

Tip: If your logo is blurry, look for similar code in your header.liquid or logo liquid file {%- assign image_size = '600x' -%} and change it to: {% assign image_size = section.settings.logo_max_width | append: 'x' %}

 

Slideshow, banner images and parallax

Typically used for slideshow images, image with text overlay and banner images shown at full screen width.

Suggested ratio 16:9
Suggested size 2880px wide x 1620px tall
Minimum size 1600px wide x 900px tall

 

Gallery images, Blog posts

Typically used where you are using the image gallery, editorial content or adding featured images to blog posts

Suggested ratio 4:3
Suggested size 1600px wide x 1200px tall
Minimum size 800px wide x 600px tall

 

Product images

Every effort should be made to ensure that your images are a consistent aspect ratio, this will help to alleviate issues with the layout of your product grid. Although our themes do have tools to help keep an even grid, it pays to take time to ensure your images are good before uploading them.

Stores will have different requirements, some will prefer 1:1 square images and some a 4:3 horizontal landscape orientation. For optimal viewing on a mobile device a 3:4 ratio is preferred but not essential.

Suggested ratio 3:4
Suggested size 1500px wide x 2000px tall
Minimum size 900px wide x 1200px tall