Decrease Product Grid Spacing in "Prestige" Theme

[Liam238]

Hello!

We are using the Shopify prestige theme and are currently trying to decrease the spacing between the product cards on collection pages (also featured collections on homepage). The shop is sileth.com. Is there any way that I can simply insert a css code to the theme settings? (No clue of coding…) I want to reduce the spacing on the left/right hand sides of the card + on the top/bottom.

Thanks in advance!

Best regards,

Liam

[Moeed]

Hey @Liam238

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Liam238]

Thanks for the quick answer!

Is there a way to separate the top/bottom spacing from the left/right spacing? I’d like to have more than 1px at the top/bottom

[BSS-TekLabs]

Hi @Liam238 ,

You can follow these steps to make the effect

1. Open Online Store > Theme > Edit Code

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

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

.product-list {
    /* You can change this value to fit your preference */
    gap: 5px;
}

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!

[Moeed]

Hey @Liam238

Remove the previous code and add this new code with the same steps mentioned above and adjust the values accordingly for yourself

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[colourindigo24]

i also want to remove all the gaps btw the product card

help me to remove, i am using trade theme