Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Limit the number of related products


Meeeee

Question

Recommended Posts

  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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
  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@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
  • 0

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
  • 0

Related Products, or ?

--

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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
  • 0
11 hours ago, Meeeee said:

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

 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...