How to get rid of the gray product image frame, when the collage treatment is disabled. For those who want a more conventional grid when using the #Brooklyn theme. This isn't a customization I support. If you have questions, please post them in this community forum: https://ecommerce.shopify.com/c/ecommerce-design

1-remove-gray-frame-in-Brooklyn.md

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.

product-grid-item.liquid

<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}" class="grid-product__image">

search.liquid

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

theme.scss.liquid

.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;
  }  
}

can I do the same effect for featured products on home page?

@harshtayal That guide will also take care of featured products on the home page, and search results on search page.

Thanks!! It works like a charm.

hi,

In the Brooklyn theme In search.liquid (line 61), i don't have the above code:

I would like to make the images larger on the collection page.

Thank you!

hi,

How can I reduce the space between images more?

Hi!

Need help with this.

The product page stacks the photos in a list which is not user friendly, and it does not have an option to display one main product image with thumbnails below it. Is there any way to fix this?

Also, the images which i have are of different sizes, so is there any way to display them on the collection page at same dimensions.

Thanks!