Brooklyn theme: spacing between products in grid on collection pages

Solved
ALKN
Tourist
7 0 3

Hi!

I am wondering how I can increase the spacing between my products in the product grid on my collection pages. Currently I've got 3 products per row which is great but I'd like to spread each row of products out a bit to increase the space between each product... if that makes sense? So in theory I just want to move the product on the left a bit further to the left and the product on the right slightly further to the right.

I've attached a screenshot for reference. I have been able to edit other bits of code within this theme with step by step guides so I'm hoping I won't have too much trouble changing it with some help!

All responses greatly appreciated.

 

Screenshot 2021-02-16 114959.jpg

0 Likes
ALKN
Tourist
7 0 3

Sorry another note. If it's not possible because that is the full width of the page (as in the products are already in line with the logo at the top left and icons at top right) then is there a way I can reduce the size of the product pics and names in the grid to therefore increase spacing between each one?

0 Likes
dmwwebartisan
Shopify Partner
4491 1009 1290

@ALKN 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ALKN
Tourist
7 0 3

@dmwwebartisan thanks for the reply! The domain is boomhub.co and the temporary password is shop1234.

dmwwebartisan
Shopify Partner
4491 1009 1290

@ALKN 

Please add the following code at the bottom of your assets/theme.scss.liquid file,

@media screen and (min-width: 591px){
#shopify-section-collection-template .grid__item {padding-left: 40px !important;}
}

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ALKN
Tourist
7 0 3

@dmwwebartisan I have pasted that code at the bottom but it doesn't seem to have changed anything unfortunately. Please let me know if you have any other suggestions. Thanks!

0 Likes
dmwwebartisan
Shopify Partner
4491 1009 1290

@ALKN 

Did you put that code on the correct file? Please put that code on at the bottom of assets/timber.scss.liquid file.

Let you know when you put please do not remove it message me when done so I will check again.

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ALKN
Tourist
7 0 3

@dmwwebartisan ah apologies, the first time I put it in the theme file, not the timber file. I have placed it in the correct place now but it still doesn't seem to have spaced them further out. I have left the code there for you to check out

0 Likes
dmwwebartisan
Shopify Partner
4491 1009 1290

@ALKN 

Can you give me a screenshot that how much gap you need?

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ALKN
Tourist
7 0 3

@dmwwebartisan I have attached it here, for reference of how different it is you can see the top of the 3 products below the first row that I haven't adjusted compared to the top row that I have adjusted. I hope that makes sense!

spacing example.jpg