3 products per row

Store Design

Topic summary

Goal: Configure collection pages to display 3 products per row with increased spacing (gap) without stretching images, inspired by The Outnet.

Key steps and proposals:

  • After the store preview URL was shared, a helper suggested adding custom CSS to the theme’s stylesheet to force 3 columns and adjust spacing:
    • CSS: within @media (min-width: 768px), set .product-grid–per-row-4 { --product-columns-desktop: 3 !important; gap: 31px !important; }.
    • A screenshot illustrated the expected layout change.

Issue and resolution:

  • The store lacked theme.css/base.css, and adding the code elsewhere initially failed.
  • Revised guidance: place the CSS in theme.liquid before the closing tag. After doing so, the merchant confirmed it worked perfectly.

Outcome:

  • The collection grid now shows 3 products per row with increased gap on desktop.
  • No further changes requested; thread resolved.

Notes:

  • A screenshot was included to demonstrate the visual result. No complex jargon beyond basic CSS and Shopify theme file locations.
Summarized with AI on December 12. AI used: gpt-5.
1

Hello,

I need to some help with building my collection pages. I need 3 products per row and instead of widening the pictures i want to increase the gap.

Theoutnet.com does this very well. I want something similar to their design.

Is this possible to make?

Thanks

Edvin

1 Like
2

Hey @EdvinLeithe

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi @EdvinLeithe , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

4

https://zzodov3pxzj7kfqx-88689869137.shopifypreview.com

I hope this helps.

5

Hi @EdvinLeithe ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media (min-width: 768px) {
    .product-grid--per-row-4 {
        --product-columns-desktop: 3 !important;
        gap: 31px !important;
    }
}

result:

steve_michael2_0-1733914511629.png
steve_michael2_0-1733914511629.png778×513 38.9 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

1 Like
6

Hi again,

I don’t have neither of those files. The closest i can find is theme.liquid but i tried to copy in the code and it didnt work.

7
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

1 Like
8

Hi again,

Thank you so much!

This works perfectly!