How to organize product collection pages more uniformly

Store Design
,
1

Hello,

I’m having an issue where my products on the product page are causing a lot of white space. Is it possible to organize them either via out of the box solution or code where they are situated in a more uniform manner. Either with white space or a grey background? Please see examples below:

My site: Gildedridge.com

Screen Shot 2024-03-01 at 9.56.30 AM.png
Screen Shot 2024-03-01 at 9.56.30 AM.png1207×611 261 KB

Site that looks good: houseofspoils.com

Screen Shot 2024-03-01 at 9.56.10 AM.png
Screen Shot 2024-03-01 at 9.56.10 AM.png1397×642 141 KB

2

Hey @Gildedridge

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-1709309791726.png
Moeed_0-1709309791726.png590×854 267 KB

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

Best Regards,
Moeed

3

Hi! Thanks for the help. looks close to what I’m trying to do although 2 things that might need fixing with the solution:

  1. Can there be any spacing added between the grey box and the product. There’s no space in one of the examples you provided

  2. Can the product have the drop shadow not the grey box?

The screenshot of the site that looks good is a good example of what Im looking for.

Thanks in advance

4

Following up on this question. Thanks