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.
Where you have the option to upload a separate image for mobile, we always recommend portrait orientation: generally, 800 px wide, 1200 px tall.
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 |
