Streaming live at 10am (PST)

Why does pagination refresh page every time?


Every time you click next / previous, the page is refreshed on the the live site.
But in preview mode, it works as expected.

Check it out:

Also, is it possible to style the pagination number field?

Thank you. :slight_smile:

Here is my site Read-Only:
(how to share your site Read-Only link)


In preview mode, it also reloads the page but as it’s a page inside of the page (like an iFrame inside of the Designer tool), you notice it less.

@vincent But on a published site, the page refreshes back to the top. How to prevent this?

In preview, the pagination section stays in the same view-port.

1 Like

This is a bug, it shouldn’t.

I ping @zbrah who’s using a workaround.

1 Like

@RohanGanachari, yes you put this code in the body of your page :

<!-- Start seamless-pagination custom code -->

<script src=""></script>
  var containerSelector = '#seamless-replace';
    '.w-pagination-wrapper a',
      container: containerSelector, 
      fragment: containerSelector,
      scrollTo: false,
      timeout: 2500,
    // These 3 lines should reinitialize interactions
  $(document).on('pjax:end', function() {

<!-- End seamless-pagination custom code -->

Like so

And you put this id seamless-replace in a parent

Like this

Note that if you have more than 1 collection you want to paginate in your page, you need to put all of the dynamic list in the parent with this id.
Hope this helps,


Thank you, @vincent for tagging @zbrah.

You mentioned this, but in the image, the code is placed in the body. So is it head tag or body tag? :upside_down_face:

@RohanGanachari Yes Body sorry

1 Like

@zbrah Just to be clear, can I assign the seamless-replacetag to multiple elements (2 divs, in this case) ?
Or, must I assign the tag to 1 element only (grid, in this case) ?

@RohanGanachari nope, one id per page.
So here only 1 element (your grid) :slight_smile:

1 Like

Hey @zbrah, this is a pretty good work around, but I have an issue.

A client has asked me to build a page with multiple CMS filled carousels, which use pagination. Your workaround is great for just one, but how can I get the solution to work for multiple pagination elements? Cheers!


Hello @Ashley_Hewins,

The solution is to place the ID in a parent element that contains all of the CMS lists that you want to have seamless pagination. The easiest solution is to just make a div block, put all of your sections with CMS lists into it, and then add the “seamless-replace” ID on that parent div block.