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
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.
Hi @Whynot102
To complete your requests, please follow these steps:
- Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
- 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
- Go to Online Store → Theme → Edit code.
- 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!