Shopify Horizon Theme: Uncovering Hidden Blog Posts & Mastering Pagination

Hey everyone,

I recently saw a great discussion in the Shopify Community that really hit home for anyone with a growing content strategy: "Where are all my blog posts?" A fellow store owner, sanderswoodworking, had 166 blog posts on their Horizon theme store but noticed only about 50 were showing up initially. It's a common head-scratcher, and the community jumped in with some excellent insights and solutions. Let's break it down.

Understanding Horizon's Blog Display: The Infinite Scroll

The first thing to understand, as tim_1 pointed out so clearly in the thread, is that the Horizon theme (and many modern Shopify themes) utilizes infinite scrolling for blog pages. What does this mean?

When you first land on a blog page, the theme loads a set number of posts – in sanderswoodworking's case, it was 50. But here's the clever part: as a visitor scrolls down the page, the theme automatically fetches and displays more posts. This continues until all available articles are loaded. So, while it might look like only 50 are there initially, all 166 posts are accessible; you just need to scroll to reveal them.

tim_1 even shared a screenshot illustrating this in action:

So, from a purely functional standpoint, there's "nothing to fix" if your goal is just to have all posts visible. The theme is working as intended.

"But I Want More Posts Upfront!" Adjusting the Pagination Limit

Even with infinite scrolling, some store owners might prefer to display more than the default 50 articles right when a visitor lands on the page. Maybe you have a very active blog, or you want to give a stronger initial impression of your content depth. This is where a bit of code customization comes in handy.

Robert_Kanaan provided an excellent step-by-step guide on how to adjust this limit in the Horizon theme. Remember, whenever you're tinkering with your theme's code, always duplicate your theme first! This creates a safe sandbox to test changes without affecting your live store. You don't want to accidentally break something when customers are browsing!

Step-by-Step: Increasing Blog Post Display Limit

Here's how to do it:

1. Duplicate Your Theme:

   • From your Shopify admin, go to Online Store > Themes.
   • Find your published/live theme, click the ... (Actions) button, and select Duplicate.
   • Once duplicated, scroll down to the "Draft themes" section. Click the ... (Actions) button next to your duplicated theme and choose Edit code.

2. Locate the Relevant File:

   • In the code editor, navigate to the sections folder and open the file named main-blog.liquid. This file controls the main layout and logic for your blog pages.

3. Add the Paginate Tag:

   • Look for a section that typically looks like this:

     {% liquid
       assign items_
     %}
     
     {% for article in blog.articles %}
     

   • You'll want to add the {%- paginate blog.articles by 250 -%} tag right above it. This tells Shopify's Liquid templating engine to initially load up to 250 articles. So, your code should now look like this:

     {%- paginate blog.articles by 250 -%}
     
       {% liquid
         assign items_
       %}
     
       {% for article in blog.articles %}
     

4. Close the Paginate Tag:

   • Scroll down a bit further until you find the corresponding closing tag for the loop, which is {% endfor %}.

   • Immediately after {% endfor %}, you need to add the closing paginate tag: {%- endpaginate -%}. The complete structure in that section should now resemble this:

     {%- paginate blog.articles by 250 -%}
       {% liquid
         assign items_
       %}
     
       {% for article in blog.articles %}
         ...
       {% endfor %}
     {%- endpaginate -%}
     

     Remember to save your changes!

5. Test Your Changes:

   • Go back to Online Store > Themes.
   • Under "Draft themes," click the ... (Actions) button next to the theme you just edited and select Preview.
   • Navigate to your blog page and see if more posts are loading initially.

This modification should allow up to 250 articles to render on the page initially. If you have even more posts than that (like sanderswoodworking's 166, this will cover them all), Robert_Kanaan notes that proper pagination with multiple pages would require additional, more complex edits.

A Word on Performance and Alternative Approaches

While it's tempting to display all your fantastic content at once, it's crucial to consider page loading speed. As mastroke wisely pointed out, "displaying all blogs at once may slow down the page loading speed." This can negatively impact user experience and even SEO.

If you have a massive archive of blog posts (hundreds or thousands), constantly loading more and more via infinite scroll, or even trying to load a very high number initially, might not be the best strategy. mastroke suggested some excellent alternatives:

• Create a new page template: Display all blogs as simple titles with clickable links.
• Categorize your content: Organize posts by category and allow users to filter or browse specific topics.
• Implement a tab system: For a cleaner look, you could use tabs to switch between different blog categories or archives.

These approaches can improve navigation, keep your blog page fast, and help visitors find exactly what they're looking for without endless scrolling.

Ultimately, the "best" solution depends on your specific store, your blog's size, and your audience's browsing habits. The Horizon theme's default infinite scroll is a perfectly valid and often preferred user experience. But if you want to tweak that initial impression, the code modification is a solid path forward. Just remember to test thoroughly and always keep performance in mind!