How to add spacing between images on the Product Grid

Store Design
1

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
lyndsayR_0-1637335306809.png2454×706 177 KB

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

lyndsayR_1-1637335517590.png
lyndsayR_1-1637335517590.png2138×576 143 KB

2

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,

3

Hello @lyndsayR

Please share your shop url

4

@lyndsayR

Please share store URL!

Thanks!

5

Hi everyone,

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

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

Many thanks,

Lyndsay

1 Like
6

@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!

7

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