hiro 
グーグルアドセンスの審査に通ったけど、広告を貼らないままサイトを放置しすぎて掲載停止になった。再審査を申し込みたいので、やり方を教えて欲しい。
こんなことを考えている方へ。
この記事のポイントは以下です。
Shopifyのページネーションのカスタマイズ方法を紹介
（x件ごとにページネーションを設定する、ページネーションをなくして全商品を1ページに表示させる…etc）
この記事を書いている私は大阪在住のweb制作フリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。
【Shopify】ページネーションをカスタマイズして表示件数を変える方法
Shopifyのページネーション（ページ送り）をカスタマイズする方法を解説します。
手順は以下です。
- １まずテーマのバックアップを取得する
- ２編集対象のファイルを見つける（search.liquid、collection.liquidなど）
- ３{% paginate search.results by 20 %} などの記述を見つける
- ４上記でいうと「20」の部分が1ページでの表示件数なので、ここの数字を変える
- ５完了
以下では上記の手順を詳しく解説します。
ページネーションはどの画面に表示される？
ページネーションとは以下のようなものです。
これはShopifyの無料テーマ「Supply」のサイト内検索結果のページです。
「1」「2」「3」と数字がありますが、上記の例では1ページに5件ごとの表示でページネーションが構成されています。
Shopifyでページネーションは色々な画面で表示されます。コレクションページ（商品一覧ページ）やサイト内の検索結果、アカウント管理画面の注文履歴など・・・。
こんな感じで色々あるのですが、ユーザーにとって重要なのは、
・商品一覧ページ（コレクションに紐づく商品が一覧表示されるページ）
・サイト内検索結果ページ
の2つです。
正直、スマホの操作性を考えたらページネーションなんてない方が良くて。
たとえばZOZOTOWN（アプリ）の商品一覧はページネーションなしで、スクロールするたび商品が出現します。ZOZOTOWN（アプリ）の場合は、1ページに130件程度の商品が表示されます。
商品を一度にたくさん見たい画面（商品一覧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でのサイト構築を学ぶのにオススメな教材
- 本なら2020年の12月に発売された「商品売るならShopify 世界標準かつ最先端のECサイト構築入門
」がおすすめ！
私も買いましたが「shopifyとは？」という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
- 動画ならUdemyの「Shopifyでクライアントのストアを作る人のための講座
」がオススメです！
私も買いましたが、Shopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
shopifyは日本語のリファレンスが少なく、独学しようとすると大変です。
ネットで調べたり、Shopifyサポートに直接質問したりして学ぶこともできますが、知識にムラが出たり、そもそも正しい情報でなかったり、というリスクもあります。
今回紹介したのは、両方とも日本語の教材です。
内容も初心者向けなので、
これからshopifyに関わってみたい！
shopify一通り分かっているけれど、抜けてる部分がないか確認したい！
といった方にはとてもおすすめです。
まとめ
この記事のポイントをまとめます。
Shopifyの商品一覧ページやサイト内検索結果のページネーション（ページ送り）をカスタマイズして、30件ごとのページ送りに変えたり、そもそもページネーションを無くして、すべてを1ページで表示させる方法は以下です。
- １．まずテーマのバックアップを取得する
- ２．編集対象のファイルを見つける（search.liquid、collection.liquidなど）
- ３．{% paginate search.results by 20 %} などの記述を見つける
- ４．上記でいうと「20」の部分が1ページでの表示件数なので、ここの数字を変える
- ５．完了
なお、Shopifyの検索結果をカスタマイズする方法は以下で詳しく解説しています。
kopa-diary.com今回の記事はここまです。