We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Product Images are too zoomed in and cropped

Solved

Product Images are too zoomed in and cropped

FSC1
Tourist
4 0 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 

Accepted Solution (1)

TheScriptFlow_
Shopify Partner
848 63 106

This is an accepted solution.

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

 

- Need a Shopify Specialist? Chat on WhatsApp +923036471248 Or Email at info@thescriptflow.com

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button!

View solution in original post

Replies 5 (5)

TheScriptFlow_
Shopify Partner
848 63 106

Hey @FSC1,

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.

- Need a Shopify Specialist? Chat on WhatsApp +923036471248 Or Email at info@thescriptflow.com

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button!

FSC1
Tourist
4 0 1

Please try again. I temporarily removed the password. 

FSC1
Tourist
4 0 1

I found the "contain" button. Thanks!

TheScriptFlow_
Shopify Partner
848 63 106

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

Thanks

- Need a Shopify Specialist? Chat on WhatsApp +923036471248 Or Email at info@thescriptflow.com

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button!

TheScriptFlow_
Shopify Partner
848 63 106

This is an accepted solution.

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

 

- Need a Shopify Specialist? Chat on WhatsApp +923036471248 Or Email at info@thescriptflow.com

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button!