Boundless Theme How do I change the grid layout of collections pages from 2 to 3, 4, etc

Moma420
New Member
8 0 0

This is one of my collections pages https://ny-value.com/collections/marvel-comics

On a PC it just looks so big. The grid is currently 2 colums by 12 rows.

How can I change it to 3 or 4 per row?

0 Likes
HardikDavra
Shopify Partner
2327 367 999

Hello, @Moma420 

Welcome to the shopify Community.
Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-collection-template .collection-grid {
    display: flex;
    flex-wrap: wrap;
}
@media only screen and (min-width: 750px) {
#shopify-section-collection-template .collection-grid .product-item grid__item {
width: 25% !important;
}
}

  

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Moma420
New Member
8 0 0

hmmm... i did as you said but nothing has changed.

actually found solution from someone else, but thanks!

0 Likes
Natztech
Shopify Partner
1357 380 918

hello @Moma420 

here is for second solution insert below code 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

.template-product  #shopify-section-product-template .product {
    max-width: 1200px;
    margin: 0 auto;
}

.template-product  #shopify-section-product-template .product  .product__photo .grid__item{
    padding: 12px;
    margin-top: 12px;
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes