What's the image width & height for Theme Brooklyn

3 0 2

Hi there,

I am using Brooklyn theme, I am confused by the dimensions of Home page slider & product images.

I uploaded very high resolution picture, but still it's cropped and some contents are missing.

So for Slider & Product images, is there a recommended ratio of width and height?

Thank you all

Shopify Staff
Shopify Staff
509 0 99

Hey there, 

I'm Ann, from the team here at Shopify :)

So when it comes to the Brooklyn theme, it uses a full-screen or "hero" slideshow, so the best size for your slideshow image is 1200px wide. Brooklyn is a responsive theme, which means that it automatically adjusts the image size to fit computer and mobile screens, which is why you might see some cropping depending on the size or shape of the screen you view things on.

When it comes to a responsive theme like Brooklyn, it is recommended that you avoid having text in the slideshow image, because, as you've seen, things like text can get cropped when the image is resized. 

Also, as you've seen, larger images can become more cropped in responsive themes. If your image slideshow contains large images, then some parts of the image might not be visible on smaller screens. Click here to learn more about best practices for using images. 

I hope this helps! If you have any more questions or concerns feel free to reach out to us here :) 

Have a great one,

Ann | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

3 0 2

Thank you @Ann, it's very helpful.

I checked the css file and its min height is 550px, so I designed one with 1200 x 550 and it works very well.

Then how about product images? is it square? any suggested dimensions?

Shopify Expert
366 6 82

Hey Mr. Teahacker,

For your product images, I would recommend 400x400 or 480x480. In theory though, it doesn't matter what the size is (within reason) as long as all images are the same size -- so that your collection pages remain uniform/aligned. Square images definitely work the best for most stores, especially if you're using the Facebook sales channel. 


★ Did my post help? If yes, then please like and accept solution. ★

→ Have me build your Shopify store @ stephens.world
→ Get your FREE 30-Step Setup Guide @ stephens.world/guide
→ View My Official Expert Profile @ stephens.world/expert
→ Want to buy me lunch? stephens.world/lunch

3 0 2

Thank you Stephen, very valuable experience. Thanks again.

New Member
1 0 1

Hi, product images using Square ratio work well, but I am confused when it comes to Collection image, it's not a square ratio and also not standard 3:4 anyone knows the optimal ratio for it please?

New Member
1 0 1

I need the answer to this as well.  My collection images are distorted.  

25 0 5

any luck?

The my images are square - but the bounding box or image area when using gallery appears to be dynamic. not always the same shape.

ideally, there will be cropping, but it is better than the image fit to width and crop top and bottom rather than appearing misalgned and fitting to the hieght.


is it possible to do this?

New Member
2 0 0

Hi Ann,

I'm using the Brooklyn theme and have the same problem with cropped out picture & text when viewed in mobile, desktop & fullscreen

I designed my own banner photo using Canva with a dimension of 1200x550 px. I don't need to show any moving slides, just a fixed banner photo will do for me.

However, to my dismay, the photo is still cropped out.

Viewing on Mobile & Desktop mode - cropped right & left

Viewing on Fullscreen - cropped top & bottom.

Is there any way I can solve this problem?

I was recommended the Mr Parker theme by my peers. Does it have the same problem as the Brooklyn theme?