Why is my pagination code not working properly?

Technical Q&A
,

Topic summary

A developer is troubleshooting broken pagination on a Shopify blog page that displays 5 articles per page.

The Problem:

  • Clicking “page 2” or “next page” links leads to 404 errors or stays on the current page
  • The pagination code uses Liquid templating with custom logic to calculate total pages

Code Issues Identified:

  • The original code contains corrupted/reversed text segments (appears to be encoding issues)
  • Uses blog.articles limit: articles_per_page which only fetches 5 articles total, not paginated subsets
  • References undefined variables like $currentPage and paginate object without proper Shopify pagination wrapper

Attempted Solution:
A community member (Dan-From-Ryviu) provided updated code, but the issue persists—all pages still show the same 5 articles with no navigation functionality.

Current Status:
The discussion remains unresolved. The core issue appears to be missing Shopify’s {% paginate %} tag wrapper, which is required for proper pagination functionality in Liquid templates.

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

Hi I am working on liquid code of the pagination.

https://u20fo1fsqriynysh-57309069474.shopifypreview.com/blogs/news

5 articles are assigned per page.

When I clicked on page 2 or next page, they link to 404 page or stay the current page.

Could anyone help with the code to work properly?

Thank you in advance!

<ul class="w-full px-4 d-flex justify-between m-auto">
                    {% assign articles_per_page = 5 %}
                    {% for article in blog.articles limit: articles_per_page %}
                      <li class="py-6 border-b border-gray-400 group">
                        <a href="{{ article.url }}" class="hover:opacity-70 flex justify-between items-center relative">
                          <div class="w-10/12">
                            <p class="text-xs">{{ article.published_at | date:'%Y.%m.%d' }}</p>
                            <p class="mt-2">{{ article.title }}</p>
                          </div>
                          <div class="w-1/12 absolute right-0 transform transition-transform ease-in-out duration-300 group-hover:translate-x-2 group-hover:duration-500">
                            <img src="{{ 'news-arrow.svg' | file_url }}" alt="お知らせの矢印アイコン">
                          </div>
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                  
                  <!-- ページネーション -->
                  {% assign total_pages = blog.articles.size | divided_by: articles_per_page | plus: 1 %}
                  {% if total_pages > 1 %}
                    <nav aria-label="Page navigation example">
                      <ul class="list-style-none flex justify-center mt-10">
                        {%- if $currentPage > 1 -%}
                          <li>
                            <a class="relative block rounded px-4 transition-all duration-300 transform rotate-180" href="{{ paginate.previous.url }}"
                              aria-label="Previous">
                              <img class="rotate-180 w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="前のボタン">
                            </a>
                          </li>
                        {%- else -%}
                          <li class="disabled">
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.previous.url }}" aria-label="Previous">
                              <img class="rotate-180 w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="前のボタン">
                            </a>
                          </li>
                        {%- endif -%}
                        {% for page in (1..total_pages) %}
                          <li>
                            <a class="relative block rounded mx-4 text-lg transition-all duration-300 underline"
                              href="{{ blog.url }}{{ '/page' }}{{ page == 1 ? '' : page }}">{{ page }}</a>
                          </li>
                        {% endfor %}
                        {%- if $currentPage < total_pages -%}
                          <li>
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.next.url }}"
                              aria-label="Next"><img class="w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="次のボタン">
                            </a>
                          </li>
                        {%- else -%}
                          <li class="disabled">
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.next.url }}" aria-label="Next">
                              <img class="w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="次のボタン">
                            </a>
                          </li>
                        {%- endif -%}
                      </ul>
                    </nav>
                  {% endif %}
2

Hi @harukajmickey

Please try to update code like this and check if it works


                    {% assign articles_per_page = 5 %}
                    {% for article in blog.articles limit: articles_per_page %}
                      - {{ article.published_at | date:'%Y.%m.%d' }}

                            

  {{ article.title }}

                          

                          
                            
                          

                        
                      
                    {% endfor %}
                  

                  
                  
                  {% assign total_pages = blog.articles.size | divided_by: articles_per_page | plus: 1 %}
                  {% if total_pages > 1 %}
                    
                  {% endif %}
3

Hi @Dan-From-Ryviu

Thank you for your reply.

All the pages show the same 5 articles. How can I go to next or previous 5 articles?