Shopifyで商品のランキング表示が簡単にできるアプリについて解説

Shopifyのストアのトップ画面に商品のランキング表示ができるアプリを見つけたので、使い心地を試してみた際の記録を備忘録として残したいと思います。

今回見ていくのは以下のアプリです。

らくらくランキング表示アプリ|リテリア Ranking

導入のきっかけ

商品のランキング表示は以下のようなものです。
image.png
出典:らくらくランキング表示アプリ|リテリア Ranking

商品が売れ筋順に表示されていると、ストアの顧客は人気のある商品を一目で確認できます。売れ筋商品の訴求力を高めるためには、ランキング表示は欠かせない機能です。

ちなみに、Shopifyでは一応、コレクション機能でランキング表示ができます。

ストアの管理画面の商品管理をクリックし、コレクション>コレクションを作成すると進んでいき、条件などの設定をすると、
image.png

以下のような売れ筋ランキングを表示できます。
image.png

ただし、この売れ筋ランキングはストアのトップ画面には表示されませんでした。トップ画面からランキング画面に遷移してもらう必要があります。
image.png

また、Shopifyのコレクション機能では、順位の表示がされませんでした(使用しているテーマによるかもしれません)。

順位が表示されないと、一目で売れ筋ランキングだとわからない可能性がありますし、売れ筋商品の訴求という面では少し微妙かもしれません。

そこで今回は、ストアのトップ画面にも商品のランキング表示を導入できる<を試しに使ってみました。らくらくランキング表示アプリ|リテリア Rankingを試しに使ってみました。

らくらくランキング表示アプリ|リテリア Ranking

アプリの特長は以下の通りです。

  • アプリブロックを追加するだけで、好きなページにノーコードで商品をランキング表示できる
  • デザインの編集も簡単にできる
  • 使いやすい日本語の管理画面
  • 困ったときには日本のエンジニアのサポートを受けられる

アプリの月額料金は5.99ドルで、現時点では7日間の無料期間があります。

また、こちらの記事は以下の公式の解説記事を参考に解説しています。

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説

また、以下の記事も参考にしました。

【Shopifyアプリ】ランキング形式に表示できるアプリを導入してみた!

【Shopifyアプリ紹介】おすすめのベストセラー訴求Shopifyアプリ3選

Shopifyでベストセラーを表示するアプリを見つけたので、調査してみた

「らくらくランキング表示アプリ|リテリア Ranking」の使い方

まずは、アプリのインストール方法から解説していきたいと思います。

アプリのインストール方法

Shopifyのストア管理画面でアプリ管理>ストアをカスタマイズとクリックしていきます。
image.png

以下の画面になるので、検索窓にらくらくランキング表示アプリ|リテリア Rankingと入力して検索します。
image.png

該当のアプリをクリックしましょう。
image.png

アプリを追加する>アプリをインストールするとクリックしていけば、アプリのインストールは完了です。
image.png
image.png

以下の画面になるので、テーマに反映の項目で「アプリをインストールするテーマ」を選択し、有効化をクリックしましょう。ここでは「Studio(公開中のテーマ)」を選択しています。
image.png

アプリを有効化しましたというポップアップがでたら、有効化ボタンの隣にあるプレビューをクリックしましょう。以下のようにShopifyのストアが表示されます。
image.png

下の方までスクロールしていくと、ランキングコレクションが追加されています(デフォルトの表示)。
image.png

ランキング表示の作成方法

ここからは、実際にランキング表示を作成してみます。まずはランキング用のコレクションを作成しましょう。

ストアの管理画面の商品管理をクリックし、コレクション>コレクションを作成すると進んでいき、条件などの設定をすると、
image.png

以下のような売れ筋ランキングができます。並べ替えの項目で「ベストセラー」を選択すれば売上順になります。
image.png

次に、作成したコレクションをランキング表示にしていきます。

ストアの管理画面でオンラインストア>カスタマイズとクリックすると、Shopifyのストアが表示されます。
image.png

ストア画面左の欄を下までスクロールすると、ランキングコレクションのアプリブロックが追加されているのでクリックしましょう。次に画面右の欄でコレクションを選択をクリックし、
image.png

先ほど作成したコレクションの名前をクリックします。ここでは「売れ筋ランキング」を選びます。
image.png

以下のように、売上順のランキングが表示されました。最後に、右下の選択をクリックすればOKです。
image.png

ランキング表示の詳細設定

なお、ストア画面右の欄ではランキングコレクションの詳細設定ができます。
image.png
image.png
image.png
image.png
image.png

ランキングコレクションの詳細設定(主なもの)

  • 順位アイコンの形
  • 色商品の表示数
  • 商品表示の列数(PC・スマホそれぞれで設定可能)
  • 商品間の余白
  • 商品のスライダー表示(左右にスクロール)
  • 商品画像の縦横比
  • 商品名・値段テキストのサイズ・色

とくに列数を変更すると印象が変わるので、いろいろ試してみるとよさそうです。

3列
image.png

4列
image.png

5列
image.png

ECサイトでよく見かける**スライダー表示(左右にスクロール)**もいいかもしれません。
image.png

最後に

ここまでで、Shopifyのストアに順位付きのランキング表示を簡単に導入できるアプリについての解説は終わりです。

アプリストアは以下になります。興味のある方はインストールしてみてください。

らくらくランキング表示アプリ|リテリア Ranking

https://apps.shopify.com/ranking?locale=ja&from=zenn

ここまでお読みいただき、ありがとうございました。

こちらのブログは、以下の記事を参考にしています。

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説

【Shopifyアプリ】ランキング形式に表示できるアプリを導入してみた!

【Shopifyアプリ紹介】おすすめのベストセラー訴求Shopifyアプリ3選

Shopifyでベストセラーを表示するアプリを見つけたので、調査してみた

おすすめ記事