Compatibility: All Shopify themes
Add a load more button with scroll to top button. I create an infinite scroll, check the link for the code but if you prefer a load more button, then just follow the instructions below.
Change the "Load more" when you render the code to what ever you want.
Check DEMO store here 💻. Password: made4uo
What you are buying:
- Load products in collection using a button
- Mobile friendly
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. In your Admin page, go to Online store > Themes
2. Choose the theme you want to edit then click Action > Edit code.
3. Open the Snippet folder, and click "create a new snippet", name it "load-more." Then paste the code below and click SAVE.
4. Next, we need to add this to our collection section. Open the collection template for your corresponding theme. It is usually under the Section folder. For Shopify 2.0 free themes, it is the "main-collection-product-grid.liquid."
| Theme Name | Collection Name | Section |
| Debut | collection-template.liquid | Section |
| Supply | collection-template.liquid | Template |
5. Next, find the " {%- endpaginate -%}." Then above it, place the code below.
1 comment
How to create multiple Load More buttons on a page?