Decrease Product Grid Spacing in "Prestige" Theme

Store Design
, , , , , , ,

Topic summary

A user seeks to reduce spacing between product cards on collection pages in the Shopify Prestige theme without coding knowledge.

Initial Solutions Provided:

  • Insert CSS code in theme.liquid file above the </body> tag to control spacing uniformly (1px suggested)
  • Alternative approach using theme.css/base.css with gap property for the .product-list class (5px example)

Refinement:
When asked about separating vertical and horizontal spacing, a revised CSS solution was offered using row-gap and column-gap properties with adjustable values, allowing independent control of top/bottom versus left/right spacing.

Key Technical Details:

  • All solutions involve adding CSS snippets to theme files
  • Visual examples demonstrate reduced spacing between product cards
  • Values can be customized to user preference

Related Query:
A separate user later asks about removing gaps in the Trade theme, indicating this is a common customization need across different Shopify themes. This question remains unanswered.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

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

2

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:

Moeed_0-1720619263933.png
Moeed_0-1720619263933.png1876×940 126 KB

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

Best Regards,
Moeed

3

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

4

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
BSSTekLabs_0-1720619481133.png2878×1602 201 KB

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!

5

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:

Moeed_0-1720619705773.png
Moeed_0-1720619705773.png1899×936 83 KB

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

Best Regards,
Moeed

6

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

colourindigo24_0-1739477321566.png
colourindigo24_0-1739477321566.png1151×556 234 KB

help me to remove, i am using trade theme