【Shopify】ページネーションをカスタマイズして表示件数を変える方法

投稿日 2021年4月6日
更新日 2021年9月7日
著者 hiro
カテゴリー Shopify

こんなことを考えている方へ。

この記事のポイントは以下です。

Shopifyのページネーションのカスタマイズ方法を紹介
（x件ごとにページネーションを設定する、ページネーションをなくして全商品を1ページに表示させる…etc）

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。

【Shopify】ページネーションをカスタマイズして表示件数を変える方法

Shopifyのページネーション（ページ送り）をカスタマイズする方法を解説します。

手順は以下です。

１まずテーマのバックアップを取得する
２編集対象のファイルを見つける（search.liquid、collection.liquidなど）
３{% paginate search.results by 20 %} などの記述を見つける
４上記でいうと「20」の部分が1ページでの表示件数なので、ここの数字を変える
５完了

以下では上記の手順を詳しく解説します。

ページネーションはどの画面に表示される？

ページネーションとは以下のようなものです。

これはShopifyの無料テーマ「Supply」のサイト内検索結果のページです。

参考：Shopifyの無料テーマ「Supply」>>

「1」「2」「3」と数字がありますが、上記の例では1ページに5件ごとの表示でページネーションが構成されています。

Shopifyでページネーションは色々な画面で表示されます。コレクションページ（商品一覧ページ）やサイト内の検索結果、アカウント管理画面の注文履歴など・・・。

こんな感じで色々あるのですが、ユーザーにとって重要なのは、

・商品一覧ページ（コレクションに紐づく商品が一覧表示されるページ）
・サイト内検索結果ページ

の2つです。

正直、スマホの操作性を考えたらページネーションなんてない方が良くて。

たとえばZOZOTOWN（アプリ）の商品一覧はページネーションなしで、スクロールするたび商品が出現します。ZOZOTOWN（アプリ）の場合は、1ページに130件程度の商品が表示されます。

参考：ZOZOTOWN>>

商品を一度にたくさん見たい画面（商品一覧or検索結果）で、わざわざページネーションをクリックして、ページを切り替えるのが面倒なんですよね。

Shopifyでのページネーションを考える際、商品数が500や1,000あるサイトの場合は、さすがにページネーションを挟まないと1ページの読み込み量が大きくなっちゃいますが、MAX50〜100商品程度のサイトでしたら、ページネーションなしでも良いと考えています。

実際の案件もページネーションをカスタマイズして、デフォルトより多めの商品をページ内に表示させることが多いです。

テーマのバックアップを取る

サイトを編集する前にはテーマのバックアップを取りましょう。面倒かもしれませんが、万が一、操作を誤った際に復元ができます。

数十秒で終わります。

管理画面＞オンラインストア＞テーマ＞アクション＞テーマを複製する を押下します。

するとページ下部の「テーマライブラリー」というエリアに「○○（テーマ名が入る）のコピー」という形で保存されます。

このままだと分かりにくいので、アクション＞名前の変更 からテーマ名を編集します。

私の場合はいつも「yyyymmddまで_○○（サイト名やテーマ名）」にしています。

緑色の「名前の変更」を押下したら、複製したテーマが保存されます。これでバックアップの完了です。

編集対象のファイルを見つける

続いて編集対象のファイルを探します。

管理画面＞オンラインストア＞テーマ＞アクション＞コードを編集する から、Shopifyのファイル一覧画面にアクセスできます。

「コードを編集する」をクリックすると、以下のような画面が表示されます。

今回は例として、サイト内検索結果のページのページネーションをカスタマイズします。編集対象のファイルである「search.liquid」を探します。

テンプレートのファイル名は、導入しているテーマによって変わります。今回例として使用している無料テーマの「Supply」では、検索結果ページのテンプレートファイル名は「search.liquid」です。

左上の検索窓に「search」といれると、ヒットします。

で、「search.liquid」をクリックして開いてみると何やらコード量が少ない。。

よく見ると「search.liquid」は「search-template.liquid」を読み込んでいることがわかります。

メインのコードは「search-template.liquid」の方に記載されているのですね。ということで「search-template.liquid」を探します。

先ほどのように検索窓から探してもいいのですが「search-template.liquid」にカーソルを合わせて「→」が出た状態でクリックすると、そのテンプレートファイルを開くことができます。

「search-template.liquid」を開いた状態がこちら。いよいよコードを編集して、ページネーションをカスタマイズします。

{% paginate search.results by XXX %}のXXX部分を変える

1ページあたりの表示件数を変えるには、

{% paginate search.results by 5 %}

のコードの「5」の部分を変更すればOKです。

設定例は以下です。

例：10件ごとにページ送りしたい場合
{% paginate search.results by 10 %}

例：30件ごとにページ送りしたい場合
{% paginate search.results by 30 %}

例：（実質的に）ページネーションを無くしたい場合は途方もなく大きい数を設定
{% paginate search.results by 9999 %}

表示確認する

設定を変更した後は表示確認を行います。

実際にサイト内検索からキーワードを入れ、設定通りの表示件数でページネーションが機能していれば完了です。

今回は試しに1ページに【8件】のアイテムを表示にしてみました。

実際にサイト内検索をしてみましたが、問題なく8件でページネーションが機能しました。

Shopifyの理解・学習に役立つ方法まとめ

Shopifyのリファレンスは基本的には英語です。自己学習をする際には言語の壁にブチあたります。不安な思いを抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。

デイトラで学ぶ

デイトラは質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。「Shopify EC構築コース」では、HTML/CSSの基礎からWordPressのオリジナルテーマ制作までを学ぶことができます。サポート体制も充実しており、Slackでプロのエンジニアによるアドバイスやフィードバックを受けることができます。