Adding padding on the product grid

Highlighted
New Member
1 0 0

Hi,

New to Shopify and the community, so pardon if this is a common issue. I've searched before posting.

I can't figure out how to add some space on the product grid; it's fine on the homepage for collections, but it's too close for products. 

To clarify, I'm referring to the blocks that contain the product image when one clicks on a Collection. They're glued together.

I'm trying to set up using the ventura theme, thank you.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1066 101 247

Hey there, Gabru!

Bo here from Shopify support. 

It's always great to see somebody new reach out, welcome to the community! That is a really great question. Changes like this require a little bit of coding. If you are comfortable making these changes yourself you can do so by doing the following. 

  • From the Shopify Admin got to Online Store > Actions > Edit Code.
  • From here click on Assets > theme.scss.liquid
  • Scroll all the way down to the bottom of this file to add the new style rule. The reason I recommend adding new code to the end of this file as opposed to editing the code that is already there is that altering the pre-existing code can sometimes damage the site elsewhere while adding new code to the bottom overwrites the previous code and does not affect anything else. 
  • At the bottom of this file paste the following code:
@include media-query($medium-up) {
  .product-card {    
    margin-left: 5px;
    margin-right: 5px;
  }
}
  • If you want the spacing between products to be greater/lesser you can do so by adjusting the numbers in the code. 
  • Click Save.

I'd recommend taking a look at our Shopify webinars for sure. These short tutorials take you through all the basics of creating a store such as adding products, variants, collections, theme changes and pointing a domain to your store. You should be able to sign up here http://bit.ly/2SVZC6w if you would like. We also have a free business course with our Shopify Academy that I would really encourage you to look at if you get a chance: http://bit.ly/2Qt6Ay6

Let me know how this goes and if there is anything else I can help you with, I'm happy to help! If you are not comfortable with making these changes yourself you can always reach out to our support team here and we will be able to assist you.

All the Best,

Bo

 

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
9 0 0

That doesn't work. My whole collection page breaks down, after I applied this.

Any other solutions?

0 Likes