I need to be able to display more than 50 blog articles (and items in a collection), though they do not need to all be on one page. I am starting with the default Horizon theme, and it only displays 50 articles with no buttons/controls to allow the user to page through more. I see other discussions of this issue where the instructions involve augmenting the use of the paginate object by specifying the number of items per page ({% paginate blog.articles by [your-limit-count] %}), but there is no paginate object present in the expected place (HORIZON > sections > main-blog.liquid), so I’m unsure how to implement a fix. I assume the same limitation will be seen with collections containing more than 50 products.
How can I allow the display of all the blog articles (and items in a collection)? Again, I don’t need them all to appear on one page; requiring the user to page through them is fine. Do I need to use a different theme that employs the paginate object so I can specify the number of items per page? If so, is there an example of such a theme? Or can I wrap the item display for loop in any theme (e.g. Horizon) in paginate directives?
Appreciate any guidance!
Horizon uses a different architecture from older themes - the rendering of blog articles happens inside a block file, not directly in sections/main-blog.liquid. main-blog.liquid in Horizon mostly delegates to {% content_for 'blocks' %} which pulls from the JSON config.
Look for the block that actually loops over blog.articles - it’s usually under sections/blocks/ or blocks/ depending on the theme version. The paginate tag needs to wrap that for-loop, not the section file. Something like:
{% paginate blog.articles by 10 %}
{% for article in blog.articles %}
...
{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}
The 50-item ceiling you’re seeing is Liquid’s default loop limit when no paginate is in scope - that’s exactly what paginate is meant to solve. Same approach works for collection.products in collection-product-grid blocks. Find the actual loop, wrap it.
Are you on the latest Horizon? The block file naming changed once or twice during early access, so the path may differ from older guides.
Well, I’m confused! First, thanks for the detailed reply. But the iteration ({% for article in blog.articles %}) is right in sections > main-blog.liquid. Do I just wrap that for loop with a paginate tag? It’s the current Horizon theme — store was just created a few days ago.
Thanks again for the guidance. I’m an old software engineer, but this architecture is totally new to me.
Ah, you do have the for-loop directly in main-blog.liquid. The block-file path I described doesn’t apply to your version, sorry for the runaround.
Yes, just wrap that for-loop:
{% paginate blog.articles by 10 %}
{% for article in blog.articles %}
...your existing markup...
{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}
{{ paginate | default_pagination }} renders prev/next nav links. You can replace it with custom Liquid using paginate.next, paginate.previous, paginate.parts if you want full control over the markup.
One thing worth checking first - open the theme editor on your blog template, click into the blog posts section, and look for a “Posts per page” or pagination toggle. Some Horizon builds expose this as a theme setting, which is cleaner than editing Liquid. If it’s not there, the paginate wrap above will do it.
Same approach for collections - sections/main-collection.liquid, wrap the for-loop over collection.products with paginate.
Eureka! That worked. Thank you so much. The default navigation stuff looks terrible, unfortunately; it’s unstyled and spread waaaay out (and starts right on the same row as the last-displayed blog article block and wraps around…ugh). How does one use the individual paginate nav controls?
Thanks again for taking the time to help me with this. I really appreciate it.
By default Horizon uses what’s called “infinite scroll”.
Javascript code fetches and adds more items as visitor scrolls towards the bottom of the page.
The code is loaded for the custom element <blog-posts-list> and if you’re adding classic pagination it would make sense to disable infinite scroll by removing these lines:
Link for general pagination dox – Liquid tags: paginate
If you’re ok with default 50-item page size and do not want to show pagination links, then you can omit the {% paginate ... %} .. {% endapginate %} from your code as it was done for the main-blog section.
Pagination was updated to allow page size up to 250 items with default of 50.
But be aware that raising the pagination size will increase page rendering time
Similar approach is used to render collection pages, but because collection pages also use filtering the JS component is a bit more complex there.
Worth adding to what’s been said above since Horizon uses infinite scroll by default via blog-posts-list.js, having both that script and classic paginate tags active at the same time can cause weird behavior (duplicated posts, layout breaking, etc). So if you are going with the paginate approach, remove the script block from sections/main-blog.liquid:
<script
src="{{ 'blog-posts-list.js' | asset_url }}"
type="module"
fetchpriority="low"
></script>
As for the ugly default pagination styling, {{ paginate | default_pagination }} is pretty barebones. You can build your own using the paginate object directly:
{% if paginate.previous %}
<a href="{{ paginate.previous.url }}">Previous</a>
{% endif %}
{% for part in paginate.parts %}
{% if part.is_link %}
<a href="{{ part.url }}">{{ part.title }}</a>
{% else %}
<span>{{ part.title }}</span>
{% endif %}
{% endfor %}
{% if paginate.next %}
<a href="{{ paginate.next.url }}">Next</a>
{% endif %}
That gives you full control to style it however you want with CSS. The paginate object also has paginate.current_page, paginate.pages, paginate.items if you want to show something like “Page 2 of 7” type text.
Thanks again to all for the extremely helpful and on-point information and advice.
So, stepping back…why is any of this necessary? Surely the need to display all the products in a collection or articles in a blog (paged or not) is very common. I have zero attachment to the Horizon theme; it’s just the default when a new shop is created. Are there themes that handle the (paginated or otherwise) display of collections/blogs regardless of the number of items? I very much would like to avoid code-level customization and limit any theme modifications to just those available through the theme’s own exposed customization controls.
Can anyone suggest any themes that work well with larger collections/blogs right out of the box (paid themes are ok)?
I am grateful for all the generous help I’m being provided.
Thank you …do you know if there is different code for Dawn theme
steve
Dawn does not have infinite scroll and uses paged navigation by default.
Do not need to add any code.