Jump to content

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?

Recommended Posts

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!

 

 

 

 

Screen Shot 2021-09-25 at 15.49.48.png

Edited by Mathias654321
one picture too many added
Link to comment
  • Replies 7
  • Views 615
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Screen Shot 2021-10-06 at 12.12.22.png

Link to comment
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

Screen Shot 2021-10-06 at 12.12.22.png

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!

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.