Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;
}
}
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
It does not work
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;
}
}
It seems to work, I see 4 articles in a column but the white part of the photo below covers the title
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;
}
}
Unfortunately didn't work
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025