how to add spacing between images on the Product Grid

lyndsayR
Tourist
8 0 2

currently there is no padding between all the product images on the collection carousel however I would like to add some padding between each one. I have tried to find how to do this in the css theme coding but have not been successful. 

 

Here is what it looks like currently...

lyndsayR_0-1637335306809.png

 

I would like it to look more like this,.,,

 

lyndsayR_1-1637335517590.png

 

Replies 6 (6)
DMT-Andre
Shopify Partner
19 2 18

Hey

 

If this is not built in to the Shopify theme customiser you would have to edit the code.

 

If you provide a link to your store I can have a look and send you the code so you can try it adding it.

 

Let me know what works best for you.

 

Thanks,

Need expert help with your Shopify Website? Message me or contact the team.
Natztech
Shopify Partner
2238 565 1373
dmwwebartisan
Shopify Partner
9829 2237 3078

@lyndsayR 

Please share store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
lyndsayR
Tourist
8 0 2

Hi everyone, 

 

Thanks so much for your responses and the offer of support. 

My shop URL is: https://www.conscious.cleaning/

 

Many thanks, 

 

Lyndsay

dmwwebartisan
Shopify Partner
9829 2237 3078

@lyndsayR 

Please add following code your assets/theme.css bottom of the file.

@media only screen and (min-width: 750px){
.product-grid--slider .collection-item, .product-grid--slider .product-item:not(.one-quarter) {margin: 0px 20px 0px 0px !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Natztech
Shopify Partner
2238 565 1373

 

hello @lyndsayR 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 750px){
.product-grid--slider .collection-item, .product-grid--slider .product-item {margin: 0px 20px 0px 0px !important;}
}