Product Images are too zoomed in and cropped

Technical Q&A
, ,

Topic summary

A Shopify user working with the Minon theme encountered product thumbnail images that were excessively zoomed in and cropped on their collection pages.

Resolution:

  • The user initially discovered a “contain” button that addressed the issue
  • A community helper provided a CSS code solution as an alternative fix

Technical Solution (if needed):

  • Navigate to: Shopify Admin → Online Store → three dots → Edit Code
  • Locate the base.css file
  • Add CSS code at the end to change object-fit property to contain !important
  • This prevents images from being cropped and ensures full visibility within thumbnails

The issue has been resolved through the built-in theme setting, with the CSS workaround available as a backup solution for similar problems.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello, I am using Minon and am fairly new to Shopify. My product images are too zoomed in on the thumbnails. Any help would be appreciated. Thanks!

https://d07b9b-5b.myshopify.com/collections/all

2

Hey @FSC1_1 ,

Welcome to the Shopify community. Would you like to share the store password so that I can take a look and provide you solution code.

3

Please try again. I temporarily removed the password.

4

I found the “contain” button. Thanks!

5

I just found the issue.

In order to fix it you need to paste the following code in the end of base.css file.

Here is how you can find the base.css file.

Go to Shopify Admin >> Click on Online Store >> Click on three dots and then Edit Code.

In the Edit code you need to search for base.css file.

After that paste the following code in the end of that file.

[style*=--aspect-ratio] img, [style*=--aspect-ratio].placeholder__svg--bg svg {
  object-fit: contain !important;
}

Results:

TheScriptFlow_0-1749928089107.png
TheScriptFlow_0-1749928089107.png2383×1018 276 KB

6

I am happy that it could helps. If you need further help then don’t forget to post here.

Thanks