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"?

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 button to load the rest of the products?

Using Brine:

https://oboe-fuchsia-3yj4.squarespace.com/shop

Password: view

Thank you!

I think you can use Lazy Summaries plugin

Thank you, @tuanphan! I found I was also able to do this with the Universal Plugin.

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?

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

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.

On 11/21/2020 at 8:45 PM, tuanphan said:

I meant Related Products.

Ah. Sure, if you have it handy that would be great!

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

@tuanphan Thank you!

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 😛

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 😛

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

@tuanphan

Here are the 4 products in that screen shot

https://www.fitbarstrong.com/ocr-ninja-warrior-equipment/pinch-grips

https://www.fitbarstrong.com/ocr-ninja-warrior-equipment/pull-up-handles

https://www.fitbarstrong.com/ocr-ninja-warrior-equipment/neutral-grips

https://www.fitbarstrong.com/ocr-ninja-warrior-equipment/ninja-ball-grips

On 3/31/2021 at 11:08 PM, FitBar said:

@tuanphan

Here are the 4 products in that screen shot

https://www.fitbarstrong.com/ocr-ninja-warrior-equipment/pinch-grips

https://www.fitbarstrong.com/ocr-ninja-warrior-equipment/pull-up-handles

https://www.fitbarstrong.com/ocr-ninja-warrior-equipment/neutral-grips

https://www.fitbarstrong.com/ocr-ninja-warrior-equipment/ninja-ball-grips

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