Load more button for Webflow CMS collection

Webflow content management system [CMS] is a great way to create collection lists and showcase content to your website visitors. You can use them to create collections of your blog posts, service pages, team members, vacancies, reviews, and many other things. For different plans, Webflow allows creating from 2 000 up to 10 000 units per collection. 

What is the best way to display Webflow collection items on your website?

There're three common ways to display content from the same collection:

• Pagination. It is the oldest method to showcase long lists of elements like blog posts and other listings. The bottom of the list has navigation buttons that let you go to the next page of collection items AND see what page you are on at any moment. The most common example - Google Search results pages.
• Load more content on click. It’s a more advanced way to showcase multiple elements. Its first benefit is page fast load time as the page does not load all the items at once, but only when the user needs more. And the second perk you get is you save space on your page. 
• Infinite scroll. Same as with the “Load more button”, it saves your page load time. But Infinite scroll does not give you a way to show other page elements before your list is complete. An infinite scroll will keep adding the following elements to the list. Sometimes it is confusing to the user. So you need to use it with caution.

Webflow Collection list module uses pagination: it breaks the collection units into pages with a limited number of units per page. However, UX-wise, it might not be user-friendly, and the other two methods - load more content and infinite scroll - can be a better solution.

In this case study, I'll show you how to substitute pagination with the ‘load more’ button with a little bit of custom code. But don't worry if you don't know how to code - you won't have to do it. I'll share with you the code I used for a project of mine. You can reuse it for your Webflow project.

Let's go!

Pagination vs. load more button in web design.

The most important advantage of the 'Load more' button and infinite scroll is that they don't hide the page content you already loaded. Compared to the pagination method, you lose the items you saw on the previous page out of sight. So if you want to get back to some of them, you have to click, worse if multiple times. It's the point when you might lose your audience’s patience and your potential clients.

Remember one of the critical principles to boost your website conversion — the fewer clicks, the better. 

Designers use the 'Load more' button to simplify the user journey and still give them control. It provides them with a clear way to their (explore more content) goal and doesn't bear them with options. It just says, "click this button if you want to see more results".

As for the infinite scroll — the no-click method, you might think that's the best way for your website conversion. Well, it depends on your goals. You should use this method to build a community platform such as social media or a portfolio website with lots of projects. Use the infinite scroll in your design to engage your visitors to spend more time on your website or app.

But on the other hand, some websites are not made to keep user attention for long. For example, on a majority of company websites, a user has a short journey:

1. The user gets introduced to a product or service.
2. The user gets answers to the most common points (such as social verification, return policy, cost).
3. The user converts via a form or a call to become a lead.

In this configuration, spending more time on the site content can be harmful to conversion. Users may get distracted from their initial intent - getting the service.

Therefore, the infinite scroll is suitable for social media and portfolios. For any other cases, you should use the 'Load more' button. 

So to sum the advantages of having the ‘Load more’ button:

1. It grows the list items instead of replacing them;
2. It increases your content items discoverability;
3. It provides users with straightforward navigation;
4. It gives users control over the content they load on the page.

Let's move to the case study. 

Client's Brief

Last year I worked with a real estate broker from Toronto. I built a website for the client where he showcases his portfolio of sold and available properties. 

I used Webflow CMS tools to make it easier for my client to add, edit and manage listings on his website. For showcasing the properties, I used the collection list element from the ‘Add’ panel. It natively has pagination as the default option. Later I substituted the pagination with the 'Load more' button because:

1. We wanted to show more listings instead of replacing them;
2. We needed the most apparent navigation for users - a single button to click;
3. We rejected the infinite scroll method because two more sections are on the page below the collection list. It would prevent users from getting to those sections.

After researching the best practices for product lists, I designed a beautiful grid for the collection list limited with 6 items at the start and 3 items per row. It loads six more items on click.

Why 6? For aesthetic reasons. On desktop, we display three big boxes with content per row, and this collection field fits the full-screen size. And we change it to 2 to work on tablet and mobile. Loading 6 more allows us to keep the rows always filled in unless we pull in the remaining items.

A quick tip: How many items should you have per page? The UX researchers say that the best quantity users perceive well is 8-12 items per page, 2-3 items per row.

Replacing Webflow pagination with the 'Load more' button: a step-by-step guide

Step 1. Create a CMS collection

Create a CMS collection of properties if you don’t have one.

For a quick start, you can create a collection of blog posts, name it 'Blog', give it collection fields such as title, short description, image, content, etc., and fill it in with dummy content.

Step 2. Drag in a collection list and give its children elements classes

Open the 'Add Elements' panel, select 'Collection list' element and drag it into the visual canvas.

Then give all its children elements classes:

• collection-list-wrapper;
• collection-list;
• collection-list-item.

Then link this collection list to the CMS collection of properties by clicking the gear icon and selecting the source.

Style the 'collection list' and 'collection-list-item' the way you want.

Step 3. Checkmark ‘paginate items’ and set ‘limit items’ to 6

Select the 'Collection list' element and open its settings panel. There check 'Paginate items' and set 'Items/page' to 6.

Good news: you can set any number you want! The code will work! Just remember, if you put 6, you will load 6 more on click. If 8 - then you'll load 8. That's how it works. 

Step 3. Give classes to the pagination buttons ('previous' and 'next')

And now, when you enabled the pagination, open the 'Navigator' panel and find the collection list pagination buttons there:

1. Select the 'Previous' button and give it a class 'fs-btn-nav' (and leave it alone);
2. Select the 'Next' button and give it a class 'load-more-button';
3. Style the load more button. For my case, I did:

• Padding: 15px, 60px, 15px, 60px;
• Margin: 15px, 0px, 15px, 0px;
• Font-size: 16px;
• Color: #000000;
• Letter spacing: 0.04em,
• Font-style: capitalize;
• Background-color: #ffffff;
• Border-radius: 2px;
• Border-style: solid, 1px;
• Border-color: #000000.

Step 4. Use the custom code I will provide

Go to the page settings and scroll down to the 'Before </body> tag' custom code field.  

Paste there the custom code kindly provided for free by Finsweet company. You can copy the code from my account on GitHub.

Step 5. Publish your custom-built collection, test, and celebrate!

All the custom code-related things work only on a live website. So to see the changes you’ve made and test them, publish your project and open it.

Everything works!

That's how you can easily replace the pagination with load-more content on click.

How to start with Webflow?

Webflow requires a paid plan to start using the custom code fields. So if you want to create projects with custom code elements, you should get a paid site hosting plan or a paid workspace plan.

So go on and try building a CMS with a load more button yourself - it's easy!

If you're just getting started, check out the new Webflow 101 course rebuilt and reshoot for new users to help them get started with Webflow under 16 lessons or under 2 hours. Upon completion, you will receive a certificate and can start building fully functioning websites.

Also, check out Webflow website templates that I designed. Use them to kick-start building your next project. Cheers!