Shopifyでページネーションを作るには paginateオブジェクト を使って実装します。
https://shopify.dev/docs/themes/liquid/reference/objects/paginate
ページネーションのサンプルコード
以下のページにサンプルコードが掲載されています。
https://shopify.github.io/liquid-code-examples/example/accessible-pagination
<style>
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
</style>
{%- paginate blog.articles by 5 -%}
{%- for article in blog.articles -%}
<!-- show blog article details here -->
{%- endfor -%}
{%- if paginate.pages > 1 -%}
<nav role="navigation">
<ol class="pagination">
{%- if paginate.previous-%}
<li>
<a href="{{ paginate.previous.url }}">
<span aria-hidden="true">«</span>
Previous <span class="visuallyhidden">page</span>
</a>
</li>
{%- else -%}
<li class="disabled">
<span aria-hidden="true">«</span>
Previous <span class="visuallyhidden">page</span>
</li>
{%- endif -%}
{%- for part in paginate.parts -%}
{%- if part.is_link -%}
<li>
<a href="{{ part.url }}">
<span class="visuallyhidden">page</span> {{ part.title }}
</a>
</li>
{%- else -%}
{%- if part.title == paginate.current_page -%}
<li class="active" aria-current="page">
<span class="visuallyhidden">page</span> {{ part.title }}
</li>
{%- else -%}
<li>
<span class="visuallyhidden">page</span> {{ part.title }}
</li>
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- if paginate.next -%}
<li>
<a href="{{ paginate.next.url }}">
Next <span class="visuallyhidden">page</span>
<span aria-hidden="true">»</span>
</a>
</li>
{%- else -%}
<li class="disabled">
Next <span class="visuallyhidden">page</span>
<span aria-hidden="true">»</span>
</li>
{%- endif -%}
</ol>
</nav>
{%- endif -%}
{%- endpaginate -%}英語になっている部分だけ日本語に変更したものがこちらです。（前へ、次へ など）
paginateオブジェクトについて解説
上から順番にコードの解説をしていきます。
{%- paginate blog.articles by 5 -%} ~ {%- endpaginate -%}
ページネーションを作る場合、ページ送りの対象となる繰り返しの要素（ブログ記事や商品など）の外側をpaginate xxx by xx のような記述で囲みます。上記の場合、ブログ記事を5つ単位でページ送りにしますよ〜という意味で、by xx の部分で1ページ辺りの要素数を制御することができます。
仮に商品一覧ページにページネーションをつけるなら、以下のようなコードになりますね。
{% paginate collection.products by 5 %}
{% for product in collection.products %}
<!--show product details here -->
{% endfor %}
{% endpaginate %}https://shopify.dev/docs/themes/liquid/reference/tags/theme-tags/#paginate
{%- if paginate.pages > 1 -%}
ここは「前のページへ」や「次のページへ」というテキストを出すか出さないかの条件指定がされています。
ページネーションのページ数が1よりも多かったら（2ページ以上あるなら）〜という意味ですね。
{%- if paginate.previous-%} / {%- if paginate.next -%}
一つ前のページ、一つ先のページに対するリンクの指定になります。
このif文で囲った上で、aタグに {{ paginate.previous.url }} などと指定することでリンクを作成することができます。
{%- for part in paginate.parts -%} / {%- if part.is_link -%}
ここはページネーションの数字の部分を出力している記述になります。partオブジェクトについて詳しくは以下に記載があります。
https://shopify.dev/docs/themes/liquid/reference/objects/part/
まとめ
公式ページに記載されているコードをベースにpaginateオブジェクトについて解説をしました。
ページネーションというと複雑な指定が必要だと思われる方も多いかもしれませんが、シンプルなページネーションであれば上記の記述だけでも十分に実装をすることができます。詳しくは公式ページにも記載がありますので、参考にしながら実装をしてみてください。
