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

aboutpattern
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

 

 

Hank
Shopify Staff
Shopify Staff
1081 121 170

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
DavidF1
Shopify Partner
19 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
stellathai
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

elena_gr
Excursionist
21 1 2

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

 

Thanks, 

0 Likes
jorisw
New Member
2 0 0

@DavidF1 Please share your code again but inline so the URL doesn't expire again. Thanks.

0 Likes

Dear @aboutpattern 

Hope this will help you

  • From your Shopify admin, go to Online Store > themes
  • Locate your current theme and then click Actions > Edit code
  • After that in the Assets folder, click to open your theme.scss.liquid file
  • Go to the very bottom of this file and paste the following code:

 

/* Start */
.grid-view-item__image-wrapper, .grid-view-item__image-wrapper .grid-view-item__image { max-width: 100% !important; max-height: 100% !important; }
/* End*/

 

  • Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  • Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes