Add spacing around product images - Collections and Featured Collection

This code customization will add spacing around your product images on collection pages:

Original theme default without customization:

Mobile comparison:

Note: As a result of adding spacing, the product images will become smaller in size to fit the available inside the column. 

HOW TO

To add spacing to your collection product images, choose one of the following CSS code options:

Option 1: Code for both desktop and mobile (for both homepage featured collection and all collection pages)

/* -- Start Broadcast override code for product image spacing for collections -- */
.product-item { padding: 20px; }
/* - end - */

OR

Option 2: Code for desktop spacing only (for both homepage featured collection and all collection pages)

/* -- Start Broadcast snippet to add spacing on collections and product grid  -- */
@media (min-width: 749px) { 
	.product-item { padding: 20px; }
}
/* - end - */  

Save the file:

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Exclude spacing on homepage Featured Collection

The above code snippets will add spacing to both the homepage featured collection and all collection pages.. If you would like to keep the homepage full sized without spacing and only display spacing with collection pages, then use these code versions instead: 

Option 1: Code for both desktop and mobile (spacing on collection pages only, not homepage)

/* -- Start Broadcast override code for product image spacing for collection pages only -- */
.template-collection .product-item { padding: 20px; }
/* - end - */

OR

Option 2: Code for desktop spacing only (spacing on collection pages only, not homepage)

/* -- Start Broadcast override code for product image spacing on desktop for collection pages only -- */
@include media-query($medium-up){ 
	.template-collection .product-item { padding: 20px; }
}
/* - end - */

Additional Modification - Remove border around grid

Result after:

Code to add (in addition of any of the above options):

/* -- Start Broadcast override code hide borders on Featured collection and collection grids -- */
.product-item { border : none; }
/* - end - */