In this article
Although all our themes are created to accommodate any image sizes, the optimum dimensions we would recommend to really make your site shine are as follows (we use these dimensions on our very own demo sites):
- Home page Slideshow - 2600 x 1000px
- Products 2000 x 2000px
- Collection 2000 x 175px
- Image gallery - 1250 x 650px (this is dependent on your choice of layout)
- Image with text - 1200 x 800px
- Image with Text Overlay - 2000 x 1350px
- Slideshow - 2600 x 1000px
- Products 2000 x 2000px
- Collection 480 x 320px
- Adverts are dependent on how many are used, but 1000 x 650px is great as a ballpark number for two or more. One advert could be 1700 x 350px.
- Blog posts - 1000 x 350px
Ensuring all product images are the same height
Our themes have an 'auto-height' setting which uses mathematics to provide enhanced visual consistency and continuity across your site. If your storefront looks clean and tidy, with well organised images, it is likely this will translate in the customer’s mind as meaning the store is well run and managed in the areas they can’t see.
Enable this method to boost your customers’ confidence and trust in your store:
- Online Store > Themes > Customise
- Navigate to a collection page in the right-hand-side preview window
- Using the left-hand settings panel, select "Collection Pages"
- Choose "Enable auto-height"
Screenshot of the 'Enable auto-height' box in the 'Collection pages' settings panel
Whilst this setting can tidy up your images and attempt the unify the way they are displayed, the only true way of aligning your images is to keep them consistent in aspect ratio by cropping correctly either before uploading to the Shopify admin or in the Shopify image editor:
How do I adjust my slideshow images?
Slideshow images always take up the full width of the page - this is controlled automatically by the theme to make sure the horizontal length of the image continues edge to edge on your site. If this was not the case, the image would finish before the page does and customers would see a gap where the image ends, revealing the “naked” website behind, which would look strange! To make your Slideshow images less tall, you would need to reduce the height, independently to the width. This is due to aspect ratio, mentioned below.
Aspect ratio can initially seem a bit confusing but it is simply the relationship between one side of an image and the other (height and width).
There is a handy video by Shopify here that explains aspect ratio in more detail:
Aspect Ratios: What You Need to Know About Image Sizes in Shopify
We recommend keeping all of your product images in the same aspect ratio, whether they are square or rectangular.
A square has the same width as it does height. This would be written as 1 : 1 and means for every 1 unit of height, we require 1 unit of width.
If we have an image of 10px height, it must also have a width of 10px width, otherwise it ceases to be a square and will appear stretched and distorted.
Hopefully you are still with us!
Following on from the above description of a square’s aspect ratio, a rectangle has a different width than it does height. For example it could be twice as wide as it is high, which would be written 1 : 2.
It could be 10 times wider than it is high, which would be written as 1 : 10.
Another way of looking at this is like a cookbook recipe. If you made a cake and it had 1 part butter to 2 parts flour, the ratio would be 1 : 2.
For images however, we are talking about pixels and how many we need for our desired result which is an image that is not stretched or compressed, but proportionate.
Regardless of whether it takes up a postage stamp, or a billboard. The ratio must remain the same, or we end up with an image which looks weird!