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,
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?
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.
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?
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?
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?