i want to fix this product image size, i had set it to 1:1 but in product recommendation & in collection it showing like this
and its perfect on home page
Topic summary
A user is experiencing inconsistent product image sizing across their Shopify store (driptrove.com). Despite setting images to a 1:1 ratio, they appear distorted in product recommendations and collection pages, while displaying correctly on the homepage.
Proposed Solutions:
Two community members offered CSS fixes:
- niraj_patel suggested adding custom CSS to theme.liquid targeting
.swiper-container imgand.f-img-loadclasses withobject-fit: contain !important - Dan-From-Ryviu recommended adding CSS through the theme customizer targeting
.template-product .productand.ct-recommendations imgwith the same property
Current Status:
The user reported partial success—one solution fixed product recommendations but issues persist on collection pages and recently viewed products sections. A corrected code snippet was subsequently provided by niraj_patel to address the remaining display problems.
The discussion remains ongoing as the complete fix is being implemented and tested.
Hello @rgeafrauuhf
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hi @rgeafrauuhf
You can solve it by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.template-product .product-recommendations img { object-fit: contain !important; }
This Works In product recommendation tab but not on collection page & recently viewed product
Sorry for mistake Add this
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.