Product page only able to show linear image rows, however I'd prefer to have a horizontal masonry layout as is possible on image pages. Any way to get such a layout on my squarespace product page?

Site URL: https://www.intro-verso.com/all-new-products

Hello, I've been trying to figure out if there's a way to not just show a certain amount of linear pictures on my product page, but instead have more of a horizontal masonry layout, such as is possible on image pages. So this means I'd prefer to have two pictures showing larger in size, and then underneath three smaller pictures of other products. Then again a row of two larger pictures and so on. I hope this makes sense. (see picture attached of an image page, I'd like my product page to have the same look). Here you can find my website product page: https://www.intro-verso.com/all-new-products

I'm using Version 7.0– Brine family.

Any help much appreciated!

Hi,

You want (on desktop) the layout will be

2 images

3 images

2 images

3 images

2 images

3 images

is this right?

On 9/27/2021 at 5:22 AM, tuanphan said:

Hi,

You want (on desktop) the layout will be

2 images

3 images

2 images

3 images

2 images

3 images

is this right?

Hello tuanphan,

Apologies for my delayed reply.

Yes that is correct, I'd like my product page to show my products in that order instead of the same number each row. Any help achieving this is much appreciated.

Kind regards,

Mathias

On 10/4/2021 at 5:18 PM, Mathias654321 said:

Hello tuanphan,

Apologies for my delayed reply.

Yes that is correct, I'd like my product page to show my products in that order instead of the same number each row. Any help achieving this is much appreciated.

 

Kind regards,

Mathias

Try adding to Design > Custom CSS

/* product page layout */
.ProductList-grid {
    display: flex;
    flex-wrap: wrap;
}
/* 2 */
.ProductList-grid>div:nth-child(5n+1), .ProductList-grid>div:nth-child(5n+2) {
    width: 50% !important;
    margin: 0 !important;
}
/* 3 */
.ProductList-grid>div:nth-child(5n+3), .ProductList-grid>div:nth-child(5n+4), .ProductList-grid>div:nth-child(5n+5) {
    width: 33.3333% !important;
    margin: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

41 minutes ago, tuanphan said:

Try adding to Design > Custom CSS

/* product page layout */
.ProductList-grid {
    display: flex;
    flex-wrap: wrap;
}
/* 2 */
.ProductList-grid>div:nth-child(5n+1), .ProductList-grid>div:nth-child(5n+2) {
    width: 50% !important;
    margin: 0 !important;
}
/* 3 */
.ProductList-grid>div:nth-child(5n+3), .ProductList-grid>div:nth-child(5n+4), .ProductList-grid>div:nth-child(5n+5) {
    width: 33.3333% !important;
    margin: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

 

Hello tuanphan

Thank you so much! After messing around with the numbers I got it how I prefer it for my desktop view. 

However now on mobile view, the order of my products is all scrambled. Is there a way for me to show one row on just mobile and tablet view? And keep the order on desktop as it is now?

Your help is much appreciated,

Mathias

3 hours ago, Mathias654321 said:

Hello tuanphan

Thank you so much! After messing around with the numbers I got it how I prefer it for my desktop view. 

However now on mobile view, the order of my products is all scrambled. Is there a way for me to show one row on just mobile and tablet view? And keep the order on desktop as it is now?

Your help is much appreciated,

Mathias

Update: I have temporarily changed my settings back to before the last code because my mobile version was showing my products all scrambled and in weird orders/sizes. So I'm still looking for a solution to only show one product per row on mobile and tablet, and keep my horizontal masonry layout (with the code you provided above) for desktop page.

Any help achieving this much appreciated!

On 10/6/2021 at 9:08 PM, Mathias654321 said:

Update: I have temporarily changed my settings back to before the last code because my mobile version was showing my products all scrambled and in weird orders/sizes. So I'm still looking for a solution to only show one product per row on mobile and tablet, and keep my horizontal masonry layout (with the code you provided above) for desktop page.

Any help achieving this much appreciated!

Edit my code to this. The code will run on desktop only

@media screen and (min-width:992px) {
/* product page layout */
.ProductList-grid {
    display: flex;
    flex-wrap: wrap;
}
/* 2 */
.ProductList-grid>div:nth-child(5n+1), .ProductList-grid>div:nth-child(5n+2) {
    width: 50% !important;
    margin: 0 !important;
}
/* 3 */
.ProductList-grid>div:nth-child(5n+3), .ProductList-grid>div:nth-child(5n+4), .ProductList-grid>div:nth-child(5n+5) {
    width: 33.3333% !important;
    margin: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
}

On 10/8/2021 at 12:25 PM, tuanphan said:

Edit my code to this. The code will run on desktop only

@media screen and (min-width:992px) {
/* product page layout */
.ProductList-grid {
    display: flex;
    flex-wrap: wrap;
}
/* 2 */
.ProductList-grid>div:nth-child(5n+1), .ProductList-grid>div:nth-child(5n+2) {
    width: 50% !important;
    margin: 0 !important;
}
/* 3 */
.ProductList-grid>div:nth-child(5n+3), .ProductList-grid>div:nth-child(5n+4), .ProductList-grid>div:nth-child(5n+5) {
    width: 33.3333% !important;
    margin: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
}

 

Thanks a lot, this worked for me!