Limit the number of related products

Hi All, 

I'm looking to see how I can show just 3 related items on a product page, not all of them.

I've looked through the guides, forums and can't find the answer which seems to be a no-brainer.   I feel like I've even seen it before, but not here: https://support.squarespace.com/hc/en-us/articles/360033322792

Thanks,
J

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

Yeah I'm looking for 7.1, which -- yeah -- doesn't have this styles page.

Crazy.

I see it refers to https://support.squarespace.com/hc/en-us/articles/360028367571#toc-collection-item-styles for 7.1 (from the Related Products page you mention).  Does that offer anything?  I have to say that everything I am hearing makes it very difficult to even consider moving to 7.1

No, it doesn't.  I guess no one ever thought that having this option would be useful in design.  There must be a css way around this insanity!

You can use CSS to hide all, exclude 3 first products ✌️

@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

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?

@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

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) ☠️

@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!

thanks alot! @tuanphan can you help me format so on mobile the view is 2 across?

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;
}
}

Related Products, or ?

--

Yesterday to now a lot of clients, I plan to check all the forum questions on Sunday or Monday.

Yes @tuanphan for related products

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

@tuanphan i didn't know you were coming back for this: https://www.jalley.art/ login: 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+3) {
    display: none;
}
}

Thanks for clarifying and @tuanphan how do you decrease the padding in space above the related items?

41 minutes ago, Meeeee said:

Thanks for clarifying and @tuanphan how do you decrease the padding in space above the related items?

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

55 minutes ago, tuanphan said:

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

 

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

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.

11 hours ago, Meeeee said:

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

 

.ProductItem .ProductItem-related-label {
    margin-top: 0;
}

thanks alot -- 

@tuanphan

Hello! Would you be able to tell me how to reduce the size of the images on my related products section? I think best way is to make it so that there are more columns like 5 columns maybe or reduce the height of the section. Please can you help? site: http://www.arch-worldwide.com/shop-all