How to make the images in a collection same size

Highlighted
Excursionist
18 0 3

I am using the Debut theme.


How do I make a collection where the product images are the same size? 
E.g. square sized

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
908 85 161

Hey, @jp-jp!

 

Lulu here from the Shopify Support team. Thanks for reaching out here, and I'll be more than happy to help you out.

 

Your product and collection images can be any size up to 4472 x 4472 px, or 20 megapixels. Product and collection images need to have a file size smaller than 20 MB to be added to Shopify.

High-resolution photos look more polished and professional to your customers. For square product images, a size of 2048 x 2048 px usually looks best so you will need to resize your photos so that they are all this size or the same size to look more uniform on your store. When product images are shown side by side on collection pages, they have different sizes. To make your images appear to be the same size, you need to use a consistent aspect ratio, or height-to-width ratio, for all the images that you add as your featured, or main, images.

 

We have a helpful guide here all about the Debut theme and everything you should know about it. I hope this helps but please let me know if you need anything else at all. I am always happy to help!

 

Kind regards,

Lulu

Lulu | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Excursionist
18 0 3

Thanks for your reply.

 

But then you need to edit it manually right?
Is it possible to do it using code, so it is square sized images in the collection even if it is rectangular images on the product page?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
908 85 161

Hi, @jp-jp!

 

Thanks for getting back to me. I had a word with our themes team and they have advised that if you use the code to force those images to be square then they will either be cropped off or they will be distorted (stretched/compressed). They have advised that you ensure you upload square images and that you follow the ratios I have listed above. You can find some image editor apps here or you can use a third-party website from Google. Once they are all edited, you could use an app like this one to bulk upload the images once you have them completed. That would be the fastest workaround at the moment. I hope this helps! 

 

Kind regards,

Lulu

Lulu | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Excursionist
18 0 3

Hi @Lulu 

 

It doesn't matter if the images are cropped off, because then it is like the images on an Instagram profile. Where the thumbnails are square sized but an image can still be rectangular or another size than square sized.

It is a lot of work to do with the images if I have to use the apps you recommend.

1 Like
Highlighted
Excursionist
14 0 3

@jp-jp 

Hello, I recently started using the debut theme and found it to very bothersome to upload every image to be the exact same, especially when you have 100's of images. Fortunately, my images were all quite similar in style and are slightly cropped in the collection view didn't bother (99% of them didn't even get cropped, maybe one or two ever so slightly). 

Here as the changes, I did within the code to make this work. 

Create a backup of your theme first in case this breaks something for you. 

Edit your theme code. 

Find 'product-card-grid' under the snippets folder. Find this line: 

<div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">

replace all the logical gibberish after padding-top to:

<div style="padding-top:200px;">

(take note of the '200px') 

That part is done. Now find the file called 'theme.scss.liquid' under assets. Go to the very bottom of the file and add this:

@media only screen and (max-width:490px) {
.grid-view-item__image-wrapper, .grid-view-item__image-wrapper .grid-view- 
  item__image {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

(again, take note of the 'height: 200px;')

Please Note
: That should be a good solution for the mobile view (99.95% of my traffic is mobile). Least it solved it for my specific needs. There will be more work to be done on the home page if you use collection lists in there. This isn't an all in one solution for a perfectly square image for example, as my thumbnails are more rectangular. This solution can easily be adjusted to be more specific to your desired result in the sizing of the image. You can play around with the 'padding:200px' & 'height:200px' values to adjust the sizing of the image. Perhaps 100px instead of 200px to make them more square-like (the values have to be the same). If you need a better solution, let me know, it's actually quite easy to solve. @Lulu  I'm surprised the theme developers couldn't offer a simple bandaid fix rather than suggesting hours upon hours of mind-numbing tedious work cropping and re-uploading every single photo, even with apps. 

Robert Out. 

 

2 Likes
Highlighted
New Member
3 0 0

@robstao 

I would love a hand implementing this on the Venture theme.

0 Likes
Highlighted
New Member
3 0 0

@robstao Do you possibly have a coding solution for getting the images to show in the same aspect ratio for the Symmetry Theme? The developers didn't have a solution aside from resizing them all. Thank you so much for any help!

0 Likes