See attached photo, this is not regarding product cards, I already fixed that. This is regarding the thumbnails that are below the main photo on a Product listing. How can I make these not try to force themselves into a square ratio. Just let them display in their original ratio (rectangular). Or if the CSS MUST force into a square, then how can I get white bars on the top and bottom?
Theme is Refresh
Hey @031999
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
@031999 please open this page in customize settings to check if you have an option to set image dimensions for thumbnail, if no then we have to use css to make it like you want
Add this code into “Custom CSS” setting of the product info section:
.thumbnail img {
object-fit: contain;
}
Before/After:
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
Hi @031999,
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.
.thumbnail img {
object-fit: contain !important;
background-color: #ffffff !important;
aspect-ratio: 1/1 !important;
}
Thanks!