want to increase collection grid product image size and gap between product

[Advertfox]

hi,

want to increase the product size, not full width but a little big and want to keep a little space between products in product grid,

here is store detail,

https://urbanchicsboutique.myshopify.com/

password: advertfox

any help ?

[Advertfox]

like this,

[BSS-TekLabs]

Hi @Advertfox,

You can follow these steps to make the product images a little bit bigger and keep a little space between products in product grid

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

.product-grid .grid__item {
    padding-left: 4px;
}

Here is the result

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[Advertfox]

hi,

want to keep a little space between two products

[BSS-TekLabs · Accepted solution]

Hi @Advertfox,

You can paste this code snippet to your base.css file

.product-grid {
    /* You can increase this number a little bit to make product images larger */
    width: 110%;

    margin-left: -50px !important;
}

.product-grid .grid__item {
    /* You can increase this number a little bit to make the space between products larger */
    padding-left: 8px;
}​

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[Advertfox]

worked like a charm, thanks a lot