Load More Button for Collection Page with Scroll to Top

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 are Load More Button for Collection Page with Scroll to Top?

A load more button for collection page with scroll to top functionality is a Shopify code snippet that adds a button to collection pages that allows customers to load more products without having to scroll through all of the pages. The button also has a scroll-to-top function that allows customers to easily scroll back to the top of the page.

Why Use Load More Button for Collection Page with Scroll to Top?

There are two reasons to use a load more button for collection page with scroll to top functionality:

• Improved website performance: A load more button reduces the amount of content that needs to load on the initial page load. This can be especially helpful for mobile users who may have slower data connections.
• Increased user engagement: A load more button gives users something to click on as they scroll down the page, which can help to keep them engaged.

Additional Considerations

For using a load more button for collection page with scroll to top functionality:

• Back Button Support: When a user clicks on a product from the list and then uses the browser's back button, they should be taken back to the same spot on the list they were on before. This can be tricky to implement with a load more button, but it's important to get it right to avoid frustrating users.
• Mobile Friendliness: Make sure the load more button works well on mobile devices. Users should be able to easily tap the button and see the new products load.
• Performance: Make sure the load more button doesn't slow down your website. The new products should load quickly and smoothly.

 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.

Steps on how to add Load More Button for Collection Page with Scroll to Top

Step #1. Open your code editor

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code.

Step #2. Create a new Snippet file

In Section folder, create a new snippet, name it "load-more.", then replace the default code with the code below.

Step #3. Open your main-collection according to theme

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

Step #4. Paste properly the render code. 

 Find the " {%- endpaginate -%}." Then above it, place the code below.

On some themes, you might need to find the code "{% render 'pagination' %}" and place the code after it. For updated Dawn version 8 and above, please look for the "{% render pagination..." code and place the code after the {% endif %}. See image below. 

Step #5. Save the changes

Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

Step #4. Customize theme

Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme.. Make sure to SAVE once you are done customizing.

Conclusion

A load more button with scroll-to-top functionality for your Shopify collection page offers several benefits for both you and your customers. It can:

• Improve website performance: By loading products incrementally, it reduces the initial page load time, especially beneficial for mobile users.
• Increase user engagement: The button provides a clear call to action, encouraging users to explore more products and keep them scrolling.
• Enhance user experience: The scroll-to-top function allows users to easily navigate back to the top of the page after browsing through a long list of products.

Here are some additional points to consider:

• Back Button Support: Ensure a smooth user experience by maintaining the user's position in the product list even after clicking on a product and using the browser's back button.
• Mobile Friendliness: Optimize the button and loading process for a seamless experience on mobile devices.
• Performance: Monitor the button's impact on website speed and ensure a smooth loading experience for new products.