Automatically Resize Images in Collection Lists To Fit Properly (Zooming Out & Adding White Space)

17 0 3



Is there a way to code so that in collection view images of products are resizes automatically so not to cut anything off? Can it be coded so that when an image is too big so that it has to be trimmed at the edges, the code would automatically zoom the image out to fit and add white space where the image would be lacking from the frame?


I'm using the Dawn Theme.


Many thanks in advance.

Reply 1 (1)

Shopify Partner
7532 1454 1451

Hi @woodpaz_books 

You can add this code to your theme.liquid file after <head>, in Online store > Themes > Edit code, and check if it works

.card__media .media img {
    object-fit: contain !important;


- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now