Infinite Scroll continuously loads blog posts as visitors scroll down a Blog Page. This design feature encourages your audience to explore more of your content and stay engaged longer without clicking away from the page. Infinite Scroll is great for blogs with lots of content or sites with a large readership using mobile devices. You can see what type of devices your visitors use in the Traffic Overview Analytics panel.
Tip: In templates without infinite scroll, set the number of blog posts that display on the landing page (up to 20) in the Basic tab of Blog Page Settings.
Infinite scroll is available in these template families:
- Farro family - Farro, Haute
- Skye family - Foundry, Indigo, Ready, Tudor, Skye
Here's an example of Infinite Scroll:
How it works
- Infinite Scroll is only available in Blog Pages in the templates listed above.
- If enabled, Infinite Scroll applies to all Blog Pages on a site. It can't be set per individual Blog Page.
- Infinite Scroll automatically loads posts as visitors scroll down the page.
- Infinite Scroll will continue loading content until all of the page's content is on the page.
- If a visitor scrolls quickly or is on a slower connection, there may be a slight delay in load time.
Enable Infinite Scroll
To enable Infinite Scroll, open a Blog Page on your site. Go to the Home Menu, click Design, and then click Style Editor.
- Farro family - Scroll to the Blog List: Load section and choose Method: Infinite Scroll.
- Skye family - Scroll to the Blog Grid Options section and check Infinite Scroll.
When you've finished, click Save.
Disable Infinite Scroll
To disable this feature:
- Farro family - In the Blog List: Load section of the Style Editor, choose Method: Button.
- Skye family - In the Blog Grid Options section of the Style Editor, uncheck Infinite Scroll.
When visitors scroll to the end of the loaded content, they can click Load More to view the next set of blog posts.
- The Farro family always loads 24 posts.
- The Skye family loads the number of posts set in Blog Page Settings.
You can edit the font and color of Load More in the Style Editor.