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

# はじめに
お客様のShopify構築を行った際に、そこそこ使える日本製のShopifyアプリを見つけたので、備忘録として簡単な使い方を記載しておきます。

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

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

以下の記事を参考にしています。

https://zenn.dev/reterior/articles/reterior-ranking

それでは、解説を始めていきます。

# 導入の経緯
ある案件で、お客様から「ランキングのベストセラー表示をして欲しい」、というご要望を頂きました。

既存のテーマのコレクションを書き換えるのは、かなり辛い作業であるため、0からコレクションを全て作成する予定でした。

しかし、Shopify アプリストアを探していたところ、お客様の要望に合いそうなアプリを見つけました。

それが、今回紹介する**らくらくランキング表示アプリ｜リテリア Ranking**です。

Online Store 2.0に対応しているため、アプリ同士の競合や、導入後に不要なコードが負債として残ることもありません。この辺りも非常に嬉しいです。

また、カスタマイズ性もかなり高いので、導入後はお客さん自身に調整して頂くことも可能である、ということも導入の決め手になりました。

デモストアがあったので、導入後のイメージはこちらから確認頂けると良いかもです。

https://reterior-ranking.myshopify.com/

以下のような、ランキング表示（ベストセラー表示）をすることが可能になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/a5e1b30a-0805-128e-70b8-a9ec0b2c6cf1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/af15155f-e242-cb0d-36d1-23635af02798.png)

アプリの月額は**5.99**ドルです。ただ、自作セクションを導入する際は3~4万円ほどのコーディング費用を頂くことになるので、こちらのアプリを導入頂いた方が、お客様としてはお安くすむかもです。

ベストセラー表示をする際には、自作のコレクションを指定する必要があります。それでは、実際に使い方を解説していきましょう。

# らくらくランキング表示アプリ｜リテリア Rankingの使い方について

それでは実際に、使い方を確認していきましょう。

## らくらくランキング表示アプリ｜リテリア Rankingのインストール

まずは、アプリのインストールを行いましょう。

ストアの管理画面の**アプリ管理**から**ストアをカスタマイズ**に移動して検索窓に**らくらくランキング表示アプリ｜リテリア Ranking**と打ち込んで下さい。

そうすると、以下の画面を見つけることができるので、**アプリを追加する**より、アプリのインストールを行って下さい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/daf9e839-7aed-6fa7-23f1-62f8e24accf3.png)


もし見つけることができなかった場合は、以下のURLからインストールできます。

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

**アプリの追加**をクリック後は、いつも通りの手順でインストールして下さい。

ここまでで、アプリのインストールは終了です。

それでは次に、アプリの管理画面についての説明を行っていきます。

## アプリの管理画面について
アプリの管理画面は以下のようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/594a98b5-f6f4-1693-165e-b29c61ad0c38.png)


**テーマに反映**から、**有効化**をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/bcf8949d-b270-2069-85f3-55b537124e52.png)

これだけで、アプリの有効化が終了です。

次に、ランキング表示用のコレクションを作成しましょう。

**コレクション**から**コレクションを作成する**から、ランキング表示用のコレクションを作成しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/a8696149-e78f-5d9e-8b98-86d3a5d5c5a3.png)

今回は手動でベストセラーを作成したいので、コレクションの種類は**手動**を選択して下さい。

右上のから保存して下さい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/e5e0dda0-83b7-b732-0320-0114be5b271f.png)

コレクションを作成した後は、こちらのコレクションに商品を追加しましょう。

商品管理の**閲覧する**をクリックして、手動で商品を追加して下さい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/88dd70f8-7d0f-609f-fd8f-a24b2c7e7492.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/6dbb7476-9f86-b855-8c3b-5e7911bb3510.png)

ここまでで、コレクションの作成は完了です。

それでは次に、**カスタマイズ**からストアのカスタマイズ画面に移動移動しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/a325f69e-64b7-adda-75d5-870752778d97.png)

先程、アプリの管理画面で**有効化**をクリックしていると、セクションの一番下に**ランキングコレクション**というアプリブロックが追加されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/09964c5a-e0be-9816-f82d-57a295340ff4.png)

先程作成した、**ベストセラー**というコレクションを選択しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/50476164-e09d-e04a-f4a0-443291740034.png)

以下のように、ランキング表示をすることができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/241ea7c3-1afa-dcd1-df89-149cb70441ed.png)

なかなか豊富なカスタマイズ項目があります。順位アイコンのデザインや、順位マークの色を細かくカスタマイズすることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/7be20569-ec5a-b780-abe6-993afa4e467a.png)

マウスオーバー時の挙動や、売り切れ時の表示テキストなども細かくカスタマイズすることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/ec55903f-39b9-b988-d50f-6bafaba37a10.png)

また、こちらのアプリは**アプリブロック**を用いて挿入されているアプリであるため、全てのページから呼び出すことができます。

**セクションの追加**をクリックすると、一番下の方にアプリブから追加されたアプリブロックが存在することが確認できます。

こちらの**セクションの追加**からのアプリブロックの追加は、全てのページから行うことができます。また、追加したアプリブロックは、他のセクションと同様に、ページの任意の場所に移動させることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666233/9cea1dd0-a7f3-4388-a50e-ef443aa528d7.png)

また、アプリブロックを用いて追加したコードは、アプリブロックを削除すればテーマから完全に削除されます。テーマの汚染や、他のアプリとの競合を考える必要はありません。


## 終わりに
ここまでで、Shopifyでベストセラー表示ができるアプリである、**らくらくランキング表示アプリ｜リテリア Ranking**の解説は終わりです。

アプリストアは以下になります。

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

ここまで読んで頂き、ありがとうございました。