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

  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Site URL: https://oboe-fuchsia-3yj4.squarespace.com/shop Title says it all! For a 200-item store, it's a lot on one page. Any code snippets that allow you to cap it at 30 or 40, then have a but

I think you can use Lazy Summaries plugin  

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(

Posted Images

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

 

Link to post
  • 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

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

 

Link to post
  • 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?

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

Link to post
  • 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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...