product page

Topic summary

A Shopify store owner reported that product images in the “You May Also Like” section are being cropped incorrectly on their product pages.

Problem Identified:
Images in the recommended products section appear cropped rather than displaying fully.

Solutions Provided:
Two community members offered CSS fixes to resolve the issue:

  • Solution 1: Add CSS code via Shopify Admin → Online Store → Theme → Customize → Theme Settings → Custom CSS
  • Solution 2: Add CSS code directly to theme.css or base.css file via Edit Code

Both solutions use object-fit: contain !important; to prevent image cropping and display products properly.

Status: Multiple working solutions provided with visual examples showing corrected image display. Issue appears resolved pending implementation by the store owner.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

hi , my website whynotcity.com , pass : lahyoo

in product page under the products u may also like the images are cropped can somebody fix it , thx u for reply

Hi @Whynot102

Are you talking about this section

Hi @Whynot102

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.card__media img {
    object-fit: contain !important;
}

Here is the result:

I hope this helps

Best,

Daisy

Hi @Whynot102

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.card__media .media img {
    object-fit: contain !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!