Pagination, Load More, or Infinite Scroll

When you have more than a few items to show on a page, your Shopify theme needs someway to break them up. Showing all 454 of your products on a collection page will tank your page performance.

The easiest and most common solution is to use pagination.

Pagination

Pagination means splitting up the full list of items into x number of pages.

For example, it might show the first 24 products on the collection page and have a Next Page link to see products 25-48. Or it would have links directly to page 2, 3, 4, and so on until page 19 (where the example 454th item lives).

Pagination has been around the entire life of the Internet so everyone is familiar with it. It can be hairy when there's lots of pages, but there are many new techniques to visually clean it up.

Pagination Cons

The only downside to pagination is it can take a while to find the thing they were looking for. Nothing worse that having to click through all 19 pages to finally find what you wanted. At some point, most users will find another path such as the store search to find what they need.

Pagination Pros

The big SEO benefit of pagination is that search engines can easily find the next page. They understand what next/previous means, and they can crawl the pages quickly.

Load More

A more modern alternative to pagination is Load more. The initial page looks identical to pagination except instead of links to the next/previous pages there is a link to Load more. When clicked, this link will get the next set of items (e.g. next 24 products) and load them into the existing page. Not actually loading the next page, putting the next page's items onto the current page.

Load More Cons

When done purely in JavaScript, search engines won't click the Load more. (Remember: search engines don't ever click or interact with pages). That means search engines may not ever see beyond the first set of items on your collection page. That means you may have to go through a ton of extra work to get those pages indexed.

Load More Pros

From a user's perspective, this is pretty good. They are at the end of a list, click Load more, and more items appear right at the bottom. They can now search or scan through two pages of items. They can also click Load more to bring in the 3rd page of items.

From a search engine perspective, this is either horrible or a meh depending on how your theme coded it.

When Load more is done correctly, it can be an ideal situation. That means the Load more button is an actual link that fallbacks to pagination. Load more becomes the same as how Next Page worked in pagination.

This gives users the nice experience of Load more while search engines get pagination.

The only problem with this technique is that you have maintain both versions, Load more and pagination. It would be easy to neglect the pagination version on accident and harm your search results. I've seen a handful of stores where they forgot to style the pagination pages so the design is completely messed up and broken.

Infinite Scroll

Web developers who saw Load more then took it a step further (a step to far in my opinion).

Instead of waiting for the user to click Load more, they automatically load the next set of items.

Sounds helpful right? Not really.

Infinite Scroll Cons

First off, infinite scroll is tricky to configure. There are a huge number of sites that load too little, causing the next set of items to load right away. These always add a delay which makes it look like your pages are still loading. That causes the user to pause and wait, even if nothing else is happening and staring at a blank screen.

It's even worse on large screens where the page jumps around as infinite scroll tries to keep up with how many items are shown on large screen.

For that reason, most of the time infinite scroll has to load more content than it actually needs. That ends up slowing down the initial page performance.

Let's say your theme somehow solves that problem. Something that even the developers at Shopify, Pinterest, and Google struggle with. How do search engines see all of your results?

They can't.

Search engine bots don't scroll so they never trigger infinite scroll. There's also no button for them to fallback to pagination.

You know what Google recommends?

Putting those other items in your sitemap or Merchant Center feed. Things you already should have.

That means anything beyond the initial set of items in infinite scroll is invisible to Google and won't get credit for internal links. I would assume the same for other search engines including AI. And you still need to worry about getting those later items indexed and crawled. Hope you weren't counting on traffic to those products.

So infinite scroll combines the horrible version of Load more with an even more complex implementation that often has a janky experience for users.

No thanks.

Infinite Scroll Pros

I struggle to find pros for infinite scroll. That's why many of the big players have moved away from infinite scroll.

What should you use

Based on UX testing by Baymard, Google's recommendations and everything above, you really only have two choices.

1. Regular ol' pagination. It's been battle-tested for decades and works great.
2. Load more with a regular-style link that falls back to pagination. Good experience for users and search engines, moderate amount of code implementation.

Infinite scroll might look sexy but it's just empty calories (to mix that metaphor). For Shopify stores, it's a solution looking for a problem.