How can I reduce product columns on Impulse to enhance visibility?

[ErnestoP]

In each collection on desktop you see 5 boxes (5 columns) I would like to show only 4 and make them bigger and more visible

Link: https://carofigliojunior.com/collections/new-arrivals

[made4Uo]

Hi @ErnestoP

You should have this option in your theme editor and will not need the code.

1. From you Admin page, go to Online Store > Themes > Customize

2. Go to the Collection page, then click the Products under the Product grid in your left hand side.

3. This should open the settings below, change the Products per row to 4

[ErnestoP]

It does not work

[made4Uo]

Hi @ErnestoP

Looks like you’ve done some custom edits. Please follow the instructions below instead

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the theme.css file
3. At very end of the code, add the code below

@media only screen and (min-width: 990px) {
.snize-product {
    width: 23% !important;
}
}

[NomtechSolution]

To display only four larger and more visible boxes (columns) in each collection on the desktop, you’ll need to adjust the CSS code for the collection grid. Here’s an example of how you can achieve this:

/* Adjust the collection grid for desktop */
@media (min-width: 992px) {
  .collection-grid .collection-box {
    width: 25%; /* Set the width to 25% to display 4 boxes in a row */
    /* Additional styling to make the boxes more visible */
    padding: 20px;
    background-color: #f2f2f2;
    border: 2px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
  }
}

[ErnestoP]

Unfortunately didn’t work

[ErnestoP]

It seems to work, I see 4 articles in a column but the white part of the photo below covers the title