How can I add a 'load more' button to my blog page?

Shopify Discussion

Topic summary

A user is seeking guidance on implementing a “load more” button for their Shopify blog page instead of traditional pagination.

Current Setup:

  • The blog uses a grid layout with pagination controls
  • Code snippet shows a Liquid template with conditional layouts (left column vs. standard)
  • Articles are rendered in a responsive grid (1-3 columns depending on screen size)
  • Standard pagination is currently implemented when multiple pages exist

Proposed Solution:
Another user suggests a resource link (codefixup.com) that provides instructions for adding a load more button to Shopify collection pages, which may be adaptable for blog pages.

Status: The discussion remains open with no confirmed implementation yet. The solution would likely require replacing the existing pagination render with AJAX-based “load more” functionality.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

I’m looking at adding a load more button to my shopify blog page.

Anyone know how to get this done?

    <div class="mx-auto">
        {% if item.show_sidebar and section.blocks != blank %}
          {%- case item.layout -%}
            {%- when 'left_column' -%}
            <div class="flex flex-wrap flex-row-reverse -mx-4">
              <div class="w-full lg:w-9/12 px-4">
                  <div class="grid grid-cols-1 {% if section.settings.view == 'grid' %}grid-cols-2 md:grid-cols-{{ section.settings.show_item_per_row | minus: 1 }} lg:grid-cols-{{ section.settings.show_item_per_row }}{% endif %} gap-8">
                    {%- for article in blog.articles -%}
                        {% render 'article-card', article: article, view: item.view %}
                    {% endfor %}
                  </div>
                {%- if paginate.pages > 1 -%}
                <div class="flex justify-center my-7 lg:my-16">
                  {%- render 'pagination', paginate: paginate -%}
                </div>
                {%- endif -%}
              </div>
              <div class="w-full lg:w-3/12 px-4">
                {% render 'blog-sidebar' %}
              </div>
            </div>
            {%- else -%}
            <div class="flex flex-wrap -mx-4">
              <div class="w-full lg:w-9/12 px-4 blogBox moreBox">
                  <div class="grid grid-cols-1 {% if section.settings.view == 'grid' %}grid-cols-2 md:grid-cols-{{ section.settings.show_item_per_row | minus: 1 }} lg:grid-cols-{{ section.settings.show_item_per_row }}{% endif %} gap-8">
                    {%- for article in blog.articles -%}
                        {% render 'article-card', article: article, view: item.view %}
                    {% endfor %}
                  </div>
                {%- if paginate.pages > 1 -%}
                <div class="flex justify-center my-7 lg:my-16">
                  {%- render 'pagination', paginate: paginate -%}
                </div>
                {%- endif -%}
              </div>
              <div class="w-full lg:w-3/12 px-4">
                {% render 'blog-sidebar' %}
              </div>
            </div>
          {%- endcase -%}
        {% else %}
            <div class="grid grid-cols-1 {% if section.settings.view == 'grid' %}grid-cols-2 md:grid-cols-{{ section.settings.show_item_per_row | minus: 1 }} lg:grid-cols-{{ section.settings.show_item_per_row }}{% endif %} gap-8">
                {%- for article in blog.articles -%}
                    {% render 'article-card', article: article, view: item.view %}
                {% endfor %}
            </div>
          {%- if paginate.pages > 1 -%}
     <div class="flex justify-center my-7 lg:my-16">
                  {%- render 'pagination', paginate: paginate -%}
                </div>
          {%- endif -%}
        {% endif %}
    </div>
  </div>
</section>
2

@j2021c Follow below link it maybe helpful for you to solve your problem .
https://www.codefixup.com/add-load-more-button-on-collection-page-shopify/