Debut theme - making rectangular images fill square thumbnails on collection page

Highlighted
New Member
1 0 1

My product images are rectangular format on my debut theme Shopify site. When people view my collection page I would like the square thumbnail frames filled with the product image (thus cropping the bottom of the image). I have attached an example, the top row is how I'd like the images to fill the frame, the bottom is how they currently display.

 

Can anyone help?products example.jpeg

 

 

1 Like
Highlighted
Shopify Staff
Shopify Staff
576 77 106

Hi, @aboutpattern,

Hank here from Shopify.

Thank you for sharing your screenshot, it really assisted me with how you want the collection images to look.

 

Basically, with any image, they appear in the format they are in before they are uploaded. If they’re naturally square, they will appear as such. If they’re naturally rectangular, they will appear as such and so on. So this would be something to take into consideration, as editing the code for specific images, can be a difficult task. You could use the likes of an image editor before you upload the image to Shopify as one way to ensure they will be a square image.

As your screenshot has your URL, hopefully, someone with more technical skills in the community will come across this and be able to add some value to you here, but if not, your best bet might be to reach out to one of our Shopify Experts, who you can hire to do almost any custom work on your store. If you were to reach out to them about this query, they may be able to resolve this issue for you without the need to edit the images yourself.

Do let me know how you get on, or if you have any other questions!

 

All the best, -Hank

Hank | 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

0 Likes
Highlighted
Shopify Partner
18 0 1

Hey @aboutpattern,

 

If you edit image-style.liquid you can get it working.

 

See my edits to that file here: https://share.getcloudapp.com/jkuloeBK

 

Do some testing after, lots of cross browser testing.

 

I hope that helps.

David

0 Likes
Highlighted
New Member
2 0 1

Hi @DavidF1 

Are you able to share that file with me? I'm trying to do that same thing and tried to look into that liquid file, but have done nothing but break it haha

I'm having the exact same issue with thumbnails

1 Like
Highlighted
Tourist
7 0 1

Hi! Would you mind sharing that file? It will be very helpful!

 

Thanks, 

0 Likes