Limit the number of related products

13 minutes ago, Arch said:

@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

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
section.ProductItem-relatedProducts .list-grid {
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
}
}

7 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
section.ProductItem-relatedProducts .list-grid {
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
}
}

 

Somehow this doesn't work for me... but I managed to do it with this!

.ProductItem-relatedProducts .list-grid 
{grid-template-columns: 200px 200px 200px 200px !important;
}

//* You Might Also Like...2 instead of 5 *//
.ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+3) {
    display: none;
}
@media screen and (max-width:767px) {
.ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+3) {
    display: none;
}
}

This works wonderfully!!!!! 2 suggested products look so much better than 5. Thank you 🙂

@tuanphan

Absolute life saver this css hide, thank you! Just had a brilliant exchange with Squarespace support who didn't seem to understand that having the ability to choose how many Related Products are showing in 7.0 and not including it in 7.1 is a downgrade... 

Aha! This is an old thread but I ran into this problem today and solved it to my satisfaction by combining two of the CSS bits provided, so that I get only 3 related items suggested AND they are not overly large. Thus: 

.ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+4) {
    display: none;
}
.ProductItem-relatedProducts .list-grid 
{grid-template-columns: 200px 200px 200px 200px !important;
}

Hope this helps someone! I know I will be making a note of this for future use. ^.^

Same question ish.

On Desktop:

How to get 5 items across with smaller images?

Mobile:

4 recommended items on mobile but have them 2 across and 2 down? In a grid?

https://www.hausersjewelers.com/shop/p/square-hoop-earrings

On 1/18/2024 at 10:10 AM, NadineS said:

Same question ish.

On Desktop:

How to get 5 items across with smaller images?

Mobile:

4 recommended items on mobile but have them 2 across and 2 down? In a grid?

https://www.hausersjewelers.com/shop/p/square-hoop-earrings

Desktop: Can you add more items? Currently I see 4 items only

Mobile: Use this CSS code

@media screen and (max-width:767px) {
.products.collection-content-wrapper div.ProductItem-relatedProducts .list-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-gap: 5px !important;
}

.products.collection-content-wrapper div.ProductItem-relatedProducts .list-grid .grid-item {
    width: 100% !important;
}}