>> 運営者プロフィールはこちら
カスタマイズ

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

Shopify ページネーション カスタマイズ カスタマイズ
記事内に広告が含まれています。

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

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

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

Shopify飯店

Shopify飯店

>> 運営者の詳しいプロフィールはこちら

\当サイトのおすすめ記事はこちら👇/

■■Shopifyを学ぼう■■

人気記事 4万文字で徹底解説!Shopifyおすすめスクールまとめ!🏫
人気記事 1.5万文字でデイトラShopifyコース!を徹底解説!口コミはこちら📺
人気記事 2万文字で忍者CODEShopifyコース!を徹底解説!口コミはこちら📺
人気記事 Shopifyのおすすめ学習方法まとめ!👩‍💻
人気記事 筆者の経験談!独学ロードマップ決定版!🖥
人気記事 Shopifyを学べるおすすめの書籍まとめ!📚
人気記事 日本語のみを厳選!おすすめのUdemy動画教材🎦
人気記事 コピペでOK!カスタマイズパーツ販売中📝

 

スポンサーリンク

【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を学ぼう■■

人気記事 4万文字で徹底解説!Shopifyおすすめスクールまとめ!🏫
人気記事 1.5万文字でデイトラShopifyコース!を徹底解説!口コミはこちら📺
人気記事 2万文字で忍者CODEShopifyコース!を徹底解説!口コミはこちら📺
人気記事 Shopifyのおすすめ学習方法まとめ!👩‍💻
人気記事 筆者の経験談!独学ロードマップ決定版!🖥
人気記事 Shopifyを学べるおすすめの書籍まとめ!📚
人気記事 日本語のみを厳選!おすすめのUdemy動画教材🎦
人気記事 コピペでOK!カスタマイズパーツ販売中📝

\初回購入で最大90%OFF👇/

■■Udemyは初回購入がお得■■

Udemy Shopify
Point Udemyは初回購入がお得!
Point 通常1万〜2万円の商品が80%OFF〜90%OFF程度の値段で購入できる!
Point ランチ1回分の値段でShopifyを学べます!

 

スポンサーリンク

まとめ

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

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

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

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

この記事を書いた人
Shopify飯店店主

自分の仕事の経験を記事にしています。東証一部のEC企業で5年→個人事業主→法人化。サイト構築実績80社以上、ECコンサル・分析実績40社以上。コンサルにおいては、EC売上3倍、キャンペーン応募者数1.7倍などの実績があります。

Shopify飯店店主をフォローする
スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました