Decrease Product Grid Spacing in "Prestige" Theme

Solved

Decrease Product Grid Spacing in "Prestige" Theme

Liam238
New Member
4 0 0

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

Accepted Solutions (3)

Moeed
Shopify Partner
4304 1105 1353

This is an accepted solution.

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 </body> tag

<style>
.product-list {
    gap: 1px !important;
}
</style>

RESULT:

Moeed_0-1720619263933.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

BSS-TekLabs
Shopify Expert
391 122 131

This is an accepted solution.

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

BSSTekLabs_0-1720619481133.png

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!

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Moeed
Shopify Partner
4304 1105 1353

This is an accepted solution.

Hey @Liam238 

 

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

<style>
.product-list {
    row-gap: 50px !important;
    column-gap: 10px !important;
}
</style>

RESULT:

Moeed_0-1720619705773.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 4 (4)

Moeed
Shopify Partner
4304 1105 1353

This is an accepted solution.

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 </body> tag

<style>
.product-list {
    gap: 1px !important;
}
</style>

RESULT:

Moeed_0-1720619263933.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Liam238
New Member
4 0 0

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

Moeed
Shopify Partner
4304 1105 1353

This is an accepted solution.

Hey @Liam238 

 

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

<style>
.product-list {
    row-gap: 50px !important;
    column-gap: 10px !important;
}
</style>

RESULT:

Moeed_0-1720619705773.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

BSS-TekLabs
Shopify Expert
391 122 131

This is an accepted solution.

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

BSSTekLabs_0-1720619481133.png

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!

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency