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

7.0 - Is there a way to limit the number of products that show up on a products page, then have a button for "show more" or "next page"?


ampddesigns

Question

12 answers to this question

Recommended Posts

  • 1

To make related products 2 items/row mobile, add to Custom CSS

@media screen and (max-width:767px) {
.ProductItem-relatedProducts-grid.clear {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
.ProductItem-relatedProducts-grid.clear img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !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
  • 1
On 3/9/2021 at 10:29 PM, FitBar said:

Hi tuanphan - i tried this but it still has 4 related products per row.  See attached.  4 per row is good for desktop, 2 is good for mobile.  attached is the way it displays now which is not optimum 😛

Screenshot_20210309-102451_Chrome.jpg

Each site needs a different code. Can you share link to product in screenshot? We can help easier

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
  • 1
On 3/31/2021 at 11:08 PM, FitBar said:

Add to Design > Custom CSS > Then save & reload your site

/* related 2 products mobile */
@media screen and (max-width:700px) {
.relatedProducts div#productList {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 20px;
    grid-row-gap: 5px;
}
.relatedProducts div#productList a {
    width: 100% !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

I think you can use Lazy Summaries plugin

 

Edited by tuanphan

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

No problem. I see some pages have long content on mobile. You can consider adding a back to top button.

Also, do you want change related products to 2 product/row on mobile?

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 11/18/2020 at 11:51 PM, ampddesigns said:

@tuanphanGreat idea with the back to top button! I believe we do have 2 products/row on mobile. Thank you!

I meant Related 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
On 12/3/2020 at 3:45 AM, tuanphan said:

To make related products 2 items/row mobile, add to Custom CSS


@media screen and (max-width:767px) {
.ProductItem-relatedProducts-grid.clear {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
.ProductItem-relatedProducts-grid.clear img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
}

 

Hi tuanphan - i tried this but it still has 4 related products per row.  See attached.  4 per row is good for desktop, 2 is good for mobile.  attached is the way it displays now which is not optimum 😛

Screenshot_20210309-102451_Chrome.jpg

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