What's the image width & height for Theme Brooklyn

Highlighted
Tourist
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

0 Likes
Highlighted
Shopify Staff
Shopify Staff
510 0 79

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

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

1 Like
Highlighted
Tourist
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?

2 Likes
Highlighted
Shopify Expert
365 6 79

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. 

Cheers,

★ 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

2 Likes
Highlighted
Tourist
3 0 2

Thank you Stephen, very valuable experience. Thanks again.

0 Likes
Highlighted
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?

1 Like
Highlighted
New Member
1 0 1

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

1 Like
Highlighted
Excursionist
22 0 4

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?

0 Likes