Cacher is the code snippet organizer for pro developers

What you want

You want to go from this:

... to that:

How to get there

1. On your Customize theme page, in the Collection page section, set the Grid style to 'Grid':

   

2. Still on your Customize theme page, in the Colors section, set the Product background to transparent:

   

   You are off to a good start! Time to make images fill their alloted column.

3. Copy+paste the below CSS at the very bottom of your theme.scss.liquid stylesheet.

   .template-collection,
   .template-index {
     .grid-product {
       margin-bottom: $gutter;
     }
   
     .grid-product__image-link {
       height: auto !important;
     }
   
     .grid-product__image {
       padding: 0;
       @include prefix('transform', 'translate(0, 0)');
       position: static;
     }
   }
   
   .template-search {
     .grid-search__product-link {
       height: auto !important;
     }
   
     .grid-search__image {
       padding: 0;
       @include prefix('transform', 'translate(0, 0)');
       position: static;
     }  
   }
   

4. If your product images are blurry as a result, edit the image size inside product-grid-item.liquid from large to grande. That's around line 35.

5. In search.liquid, replace this code around line 61:

<img src="{{ item.featured_image.src | img_url: 'medium' }}" alt="{{ item.featured_image.alt }}" class="grid-search__image">                    

with:

<img src="{{ item.featured_image.src | img_url: 'grande' }}" alt="{{ item.featured_image.alt }}" class="grid-search__image">                    

... to get larger product images.