Jump to content

Limit the number of related products

Go to solution Solved by tuanphan,

Recommended Posts

NOTE - THIS IS 7.0 .... FOR 7.1 IT IS DIFFERENT

ON THAT PAGE YOU REFERENCE, YOU CAN CLICK WHERE IT SAYS 7.0 AND IT HAS THE SAME AS I HAVE BELOW

 

I think it is template dependent but here is how I do it...

Open one of the products that has Related Products turned on

While open, select Design/Site Styles

Click on one of the Products being displayed in the Related Products 

It should offer you options:

Items per row  .... Item spacing.... etc.

Screenshot attached

Screen Shot 2020-04-14 at 9.17.32 AM.png

Edited by Simon-JustGoodJuju
Clarifying SS version
Link to comment
2 minutes ago, sil said:

@tuanphan can you please give us the CSS code you would put in? Thank you so much for your help, squarespace was really unhelpful about this

Can you share link to product page on your site?

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
12 hours ago, sil said:

@tuanphan unfortunately I do not think I can. I am working on a website for a client and its password protected. I'm so sorry, I wish I could

you can share link + access password. ✌️

or invite me as a contributor with commenter/content permission, I can access (I will charge for this) ☠️

 

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

@tuanphan can you help with mine then, the OP?! 😉I've been looking at ways to change the relateditems grid, but it's not doing anything except making it smaller, while keeping the same number.  On desktop I prefer just want 2 related items only....and on mobile 4 related, but in columns of 2 if vertical/portrait display or 4 across in landscape.

https://www.jalley.art/sstest l

thanks!

Edited by Meeeee
Link to comment
  • Solution

Add to Home > Design > custom CSS

/* related product 3 items */
.ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+4) {
    display: none;
}

 

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

I love answering my own questions by finding bits of CSS code and tying them together.  Especially when it works (it mostly doesn't!) Either way it's good way to spend quarantime.  This seems to be right @tuanphan, is it though?! 🙂

@media screen and (max-width:767px) {.ProductItem-relatedProducts .list-grid 
{grid-template-columns: repeat(2,minmax(0,2fr)) !important;
    display: grid;
    grid-column-gap:3px;
    grid-row-gap: 1px;
}
}

 

Edited by Meeeee
Link to comment
On 4/16/2020 at 11:02 PM, Meeeee said:

@tuanphan can you help with mine then, the OP?! 😉I've been looking at ways to change the relateditems grid, but it's not doing anything except making it smaller, while keeping the same number.  On desktop I prefer just want 2 related items only....and on mobile 4 related, but in columns of 2 if vertical/portrait display or 4 across in landscape.

https://www.jalley.art/sstest login: testtesttest

thanks!

incorrect password

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
55 minutes ago, tuanphan said:

.ProductItem .ProductItem-related-label {
    margin-bottom: 1px !important;
}

 

@tuanphan I'm looking to essentially remove this spacing.

Screenshot 2020-04-17 22.09.35.png

I am playing around with this code: 

.ProductItem .ProductItem-summary {
    margin-bottom: -80px !important;
}

While it works, it doesn't seem right, and doesn't change anything on mobile, so that's an issue.

Edited by Meeeee
Link to comment
  • 1 month later...

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.