>> デイトラShopifyコースが先着で1万円OFF!

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

Shopify ページネーション カスタマイズ カスタマイズ

Shopifyの商品一覧ページやサイト内検索結果のページネーション(ページ送り)をカスタマイズしたい。
デフォルトは10件ごとの表示だけど、それを30件ごとのページ送りに変えたり、そもそもページネーションを無くして、すべて1ページで表示させたい。

こんなことを考えている方へ。
この記事のポイントは以下です。

Shopifyのページネーションのカスタマイズ方法を紹介

Shopify飯店

Shopify飯店

【デイトラShopifyコース 新年の2023名限定キャンペーン!1月4日から全コース⛩️1万円割引⛩️セール❗️】
デイトラ」で1/4〜1/31の間、新春セールが開催されています。先着順で1万円割となる超お得なセールです。
2023年に人生を変えたい方は「デイトラShopifyコース」を受講してみてください。

 

スポンサーリンク

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

本記事ではShopifyのページネーション(ページ送り)をカスタマイズする方法を解説します。◯◯件ごとの好きな件数ごとにページネーションを設定する方法や、そもそもページネーションをなくして全商品を1ページに表示させる方法などを紹介します。

カスタマイズの手順は以下の通りです。

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

それでは、各ステップを詳しく解説します。

 

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

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

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

Shopify ページネーション カスタマイズ

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

Shopify ページネーション カスタマイズ

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

Shopify ページネーション カスタマイズ

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

Shopify ページネーション カスタマイズ

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

Shopify ページネーション カスタマイズ

 

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

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

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

Shopify ページネーション カスタマイズ

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

Shopify ページネーション カスタマイズ

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

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

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

Shopify ページネーション カスタマイズ

目的のファイルである「search.liquid」をクリックして開いてみると何やらコード量が少ない。

Shopify ページネーション カスタマイズ

よく見ると「search.liquid」は「search-template.liquid」を読み込んでいることがわかります。メインのコードは「search-template.liquid」の方に記載されているのですね。ということで「search-template.liquid」を探します。

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

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

Shopify ページネーション カスタマイズ

 

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

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

{% paginate search.results by 5 %}

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

以下は試しに「8」に変えた状態です。こうすることで、1ページに最大8件表示され、それ以降のアイテムは次ページに表示されるようになります。

Shopify ページネーション カスタマイズ

その他のコード例は次の通りです。

  • 10件ごとにページ送りしたい場合
{% paginate search.results by 10 %}
  • 30件ごとにページ送りしたい場合
{% paginate search.results by 30 %}
  • ページネーションを無くしたい場合は途方もなく大きい数を設定
{% paginate search.results by 9999 %}

 

カスタマイズしたページネーションの表示確認する

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

今回は試しに1ページに「8件」の表示にしてみました。

Shopify ページネーション カスタマイズ

実際にサイト内検索をしてみると、確かに8件ずつのページネーションが機能しました。

Shopify ページネーション カスタマイズ

 

スポンサーリンク

Shopifyのページネーションについて考える

ページネーションが表示される画面や「そもそもページネーションって必要?」ということについて考えてみます。

 

ページネーションはどのような画面に表示される?

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

Shopify ページネーション カスタマイズ

これはShopifyの無料テーマ「Supply」のサイト内検索結果のページです。「1」「2」「3」と数字がありますが、上記の例では1ページに5件ごとの表示でページネーションが構成されていることがわかります。

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

他にも表示されるページはあるのですが、ページネーションが表示される上で、ユーザーにとって重要なページは以下の2つです。

①商品一覧ページ(コレクションに所属する商品が一覧で表示されるページ)
②サイト内検索結果ページ

 

ECサイトにページネーションは必要?

私が思うに、スマホの操作性を考えたらページネーションはない方がいいです。

たとえば、スマホアプリ版のZOZOTOWNの商品一覧はページネーションなしで、スクロールするたび商品が出現します。しかも動作がサクサクです。

Shopify ページネーション カスタマイズ

商品を一度にたくさん見たい画面で、わざわざページネーションをクリックして、ページを切り替えるのって面倒なんですよね。無限スクロールだと動作が途切れないので、ユーザーの興味関心を損なわせることがありません。

とはいえ、ページネーションが存在しない無限スクロールだと、

さっき気になった商品がどれかわからない。
戻りたくても戻れない・・・。

ということが起きます。

なので、商品一覧画面で簡単に「お気に入り」に追加できる機能が重要になってきます。その点、ZOZOTOWNはとても良く作られています。

Shopify ページネーション カスタマイズ

Shopifyでのページネーションを考える際、商品数が最大100商品程度のサイトでしたら、ページネーションなしでも良いと考えています。

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

 

スポンサーリンク

参考:Shopifyを学ぶ方法まとめ|本・動画教材・オンラインスクール

Shopify飯店

Shopifyを本格的に学ぶためにはネットの情報だけは足りません。本(参考書)、動画教材(Udemy)、オンラインスクールを活用して、効果的に学習しましょう。

思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。

仕事でShopifyを扱っている筆者が、おすすめの学習教材をまとめました。くわしくは以下の記事をご覧ください。

【関連記事】Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】

Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】
現役フリーランスエンジニアがShopifyの勉強方法をまとめました。オンラインスクールで学ぶ、本で学ぶ、Udemyで学ぶ、公式のYoutubeで学ぶの4つです。おすすめはオンラインスクールで学ぶことです。

【関連記事】【2022年最新】デイトラShopifyコースは買うべき?【レビュー】
1/4〜1/31まで新春セール開催中!先着2023名が1万円割引!

デイトラShopifyコースは買うべきか?徹底レビュー【2023年最新】(1/31まで先着で1万円割引セール中!)
デイトラShopifyコースを大解剖します。内容、強み、評判、身につくスキルをShopify構築を仕事にしている筆者が解説します。

【関連記事】Shopifyの学習におすすめの動画教材(Udemy)まとめ

【日本語のみ】Shopifyの学習に最適なUdemyの教材まとめ
日本語で受講できるUdemyのShopify講座をまとめました。新講座が出るたびに随時、記事を更新します。初心者向けの講座から上級者向けの講座まで紹介しています。また、筆者が実際にUdemyの講座を受講したレビューも紹介しています。

【関連記事】Shopifyの学習におすすめの本まとめ

Shopifyの学習におすすめの本まとめ【参考書7選を紹介】
本記事ではShopifyを学ぶのにオススメな本・参考書をまとめています。

【関連記事】【Shopifyの独学】勉強方法のまとめ【初心者向け】

【Shopifyの独学】勉強方法のまとめ【初心者向け】
本記事ではShopifyの独学方法をロードマップとしてまとめています。筆者はShopifyを独学して3年ほど経ちました。ノウハウが溜まってきたので、Shopify独学のロードマップを整理して記事にしました。
【Udemyでセールが開催中!】
2023年2月1日(水)まで、Shopifyの動画教材が1,800円から買える!
Udemyはセールのタイミングに買うべきです。通常1万〜2万円の商品がセール中だと80%OFF〜90%OFF程度の値段で購入できます。
・Udemyでセール中のShopifyの講座一覧をまとめて見る icon

 

スポンサーリンク

まとめ

本記事のポイントをまとめます。

Shopifyのページネーション(ページ送り)をカスタマイズする方法は以下の通りです。

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

今回の記事はここまでです。

タイトルとURLをコピーしました