How to Implement AJAX Load More Feature for Shopify Blog Posts

[sofiap]

I want to replace the standard numbered pagination on my Shopify blog with an AJAX load more button. Has anyone successfully implemented this feature?

Here’s my current blog template structure:

<div class="container-wrapper">
  {% if blog_config.enable_sidebar and section.blocks != blank %}
    {%- case blog_config.sidebar_position -%}
      {%- when 'sidebar_left' -%}
      <div class="row reverse-layout">
        <div class="main-content col-lg-8">
          <div class="posts-grid {% if section.settings.display_mode == 'grid' %}grid-layout cols-{{ section.settings.posts_per_row }}{% endif %}">
            {%- for post in blog.articles -%}
              {% include 'blog-post-card', post: post, display: blog_config.display_mode %}
            {% endfor %}
          </div>
          {%- if paginate.pages > 1 -%}
          <div class="pagination-wrapper text-center">
            {%- include 'blog-pagination', paginate: paginate -%}
          </div>
          {%- endif -%}
        </div>
        <div class="sidebar-content col-lg-4">
          {% include 'blog-sidebar-content' %}
        </div>
      </div>
      {%- else -%}
      <div class="row standard-layout">
        <div class="main-content col-lg-8 blog-container">
          <div class="posts-grid {% if section.settings.display_mode == 'grid' %}grid-layout cols-{{ section.settings.posts_per_row }}{% endif %}">
            {%- for post in blog.articles -%}
              {% include 'blog-post-card', post: post, display: blog_config.display_mode %}
            {% endfor %}
          </div>
          {%- if paginate.pages > 1 -%}
          <div class="pagination-wrapper text-center">
            {%- include 'blog-pagination', paginate: paginate -%}
          </div>
          {%- endif -%}
        </div>
        <div class="sidebar-content col-lg-4">
          {% include 'blog-sidebar-content' %}
        </div>
      </div>
    {%- endcase -%}
  {% else %}
    <div class="posts-grid {% if section.settings.display_mode == 'grid' %}grid-layout cols-{{ section.settings.posts_per_row }}{% endif %}">
      {%- for post in blog.articles -%}
        {% include 'blog-post-card', post: post, display: blog_config.display_mode %}
      {% endfor %}
    </div>
    {%- if paginate.pages > 1 -%}
    <div class="pagination-wrapper text-center">
      {%- include 'blog-pagination', paginate: paginate -%}
    </div>
    {%- endif -%}
  {% endif %}
</div>

I’ve tried adapting solutions that work for product collections but they don’t seem compatible with blog articles. Any suggestions would be helpful.

[Alex_Brave]

make sure ur wrapping ur blog loop with the paginate liquid tag - that’s why ajax isn’t working. put {% paginate blog.articles by 6 %} before ur articles loop and {% endpaginate %} after it. then u can grab paginate.next.url through ajax and append the new results.

[Jack81]

Just did this for a client last month. You need a dedicated endpoint for the AJAX requests. Modify your blog template to handle regular loads and AJAX calls by checking for a specific parameter. Add {% if request.headers['X-Requested-With'] == 'XMLHttpRequest' %} to return just the posts grid without the full page wrapper. Use JavaScript to fetch from the next page URL with the right headers and append the results. The tricky bit is updating the load more button’s URL to point to the next page after each request.