Re: Decrease product columns on Impulse

Solved

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

ErnestoP
Excursionist
23 0 6

ErnestoP_0-1684341337405.png

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

Accepted Solution (1)
made4Uo
Shopify Partner
3873 718 1214

This is an accepted solution.

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;
}
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 6 (6)

made4Uo
Shopify Partner
3873 718 1214

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

 

made4Uo_0-1684342272629.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
ErnestoP
Excursionist
23 0 6

It does not work

made4Uo
Shopify Partner
3873 718 1214

This is an accepted solution.

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;
}
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
ErnestoP
Excursionist
23 0 6

ErnestoP_0-1684399921829.png

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

NomtechSolution
Astronaut
1245 113 156

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
Excursionist
23 0 6

Unfortunately didn't work