Pagination

Why Webflow pagination breaks on WCH

Webflow renders paginated collection lists on its servers. Each Next or Load more click asks Webflow for the next set of items. On a static WCH site there is no Webflow server behind the page, so those clicks return nothing.

You have two options. Slater Data is the recommended one.

Recommended: Slater Data

Slater Data is a dependency-free script that adds load more, filtering, keyword search, sorting, and facets to a Webflow CMS list. You wire it up with data-slater-* attributes in the Webflow Designer. No JavaScript to write, and the list works on any host.

Quick start

1. Set the site up in Slater and connect it to your Webflow site. The shared setup is in the Slater Data docs.
2. On the collection list wrapper, add data-slater-list with a key you choose. On the items container, add data-slater-results with the same key.
3. Mark one card inside the list with data-slater-template and bind its fields.
4. Load the script once, before the closing </body> tag.

<!-- On the collection list wrapper -->
<div class="w-dyn-list" data-slater-list="blog">
  <div class="w-dyn-items" data-slater-results="blog">
    <!-- One card, marked as the template -->
    <div class="w-dyn-item" data-slater-template>
      <h2 data-slater-bind-text="heading"></h2>
      <p data-slater-bind-text="description"></p>
    </div>
  </div>
</div>

<button data-slater-load-more="blog">Load more</button>

<!-- Load the script once, before </body> -->
<script src="https://api.slater.app/embed/v1/slater-search.js" defer></script>

The list key

data-slater-list="blog" gives the list a key. The key is a label you pick, not the collection slug. Every control for that list uses the same key: data-slater-results, data-slater-load-more, data-slater-search, data-slater-empty, data-slater-count.

The collection slug comes from data-slater-collection. If you leave it out, Slater uses the key as the slug. Name the list after the collection and you need nothing else. Use a separate key only when a page has two lists.

Binding fields into the card

• data-slater-bind-text="field": sets text. Never renders HTML.
• data-slater-bind-html="field": sets sanitized HTML. Rich text fields only.
• data-slater-bind-src="field": sets an image's src from an image field.
• data-slater-href="/blog/{slug}": builds a link from a URL pattern. {slug}, {name}, {id}, or any field works inside the braces.
• data-slater-hide-empty: hides the node when its field is empty.

Field names are Webflow field slugs: lower-case, kebab-case, and case-sensitive. To find them, add ?slater-debug=1 to the page URL and read the console.

Always mark the template

Set data-slater-template on one card. If you omit it, Slater clones the first item with a console warning. That breaks cards that use Webflow conditional visibility, because a node that only exists when a field is filled will be missing from the template whenever the first item lacks that field. Author the template with every optional node present and mark the optional ones data-slater-hide-empty.

Empty state, count, and clear

<div data-slater-empty="blog">No results found.</div>
<span data-slater-count="blog"></span>
<button data-slater-clear="blog">Clear all</button>

Leave these elements visible in the Designer. Slater hides them with an inline style. An element hidden by a Webflow class can never be shown by the script.

More features

Keyword search over one list, filters, sorting, facet counts, multi-collection lists, typeahead, and JavaScript hooks are each covered in the Slater Data docs. For a search box across the whole site, see the WCH Search page.

Legacy: WCH static pagination

WCH can also crawl a paginated Webflow list at publish time and generate a static page for each paginated state. Use this when you want plain server-rendered pages with no script, for example for SEO on a large archive. It is slower to publish and offers no search or filtering.

How to enable it

1. In the Webflow Designer, select the collection list's pagination wrapper. Webflow gives it the class w-pagination-wrapper.
2. Add the class wch-pagination to that same element.
3. Publish in Webflow, then publish in WCH.

What WCH does

• Detects the wch-pagination class on the page.
• Follows the Next and Previous links to fetch each paginated state.
• Writes a static page for each one, for example /blog/page/2/ and /blog/page/3/, and rewrites the pagination links to those addresses.
• Crawls up to 50 pages per list.

Things to know

• Every paginated state adds pages to the build, so publish time grows with the size of the list.
• Pagination inside CMS template pages multiplies the page count by the number of items and can cause publishing problems. Talk to WCH support before adding it to a template page.
• When a page is republished or deleted in WCH, its generated /page/N/ children are updated or removed with it.