はじめに
お客様のShopify構築を行った際に、そこそこ使える日本製のShopifyアプリを見つけたので、備忘録として簡単な使い方を記載しておきます。
らくらくランキング表示アプリ｜リテリア Ranking
以下の記事を参考にしています。
それでは、解説を始めていきます。
導入の経緯
ある案件で、お客様から「ランキングのベストセラー表示をして欲しい」、というご要望を頂きました。
既存のテーマのコレクションを書き換えるのは、かなり辛い作業であるため、0からコレクションを全て作成する予定でした。
しかし、Shopify アプリストアを探していたところ、お客様の要望に合いそうなアプリを見つけました。
それが、今回紹介するらくらくランキング表示アプリ｜リテリア Rankingです。
Online Store 2.0に対応しているため、アプリ同士の競合や、導入後に不要なコードが負債として残ることもありません。この辺りも非常に嬉しいです。
また、カスタマイズ性もかなり高いので、導入後はお客さん自身に調整して頂くことも可能である、ということも導入の決め手になりました。
デモストアがあったので、導入後のイメージはこちらから確認頂けると良いかもです。
以下のような、ランキング表示（ベストセラー表示）をすることが可能になります。
アプリの月額は5.99ドルです。ただ、自作セクションを導入する際は3~4万円ほどのコーディング費用を頂くことになるので、こちらのアプリを導入頂いた方が、お客様としてはお安くすむかもです。
ベストセラー表示をする際には、自作のコレクションを指定する必要があります。それでは、実際に使い方を解説していきましょう。
らくらくランキング表示アプリ｜リテリア Rankingの使い方について
それでは実際に、使い方を確認していきましょう。
らくらくランキング表示アプリ｜リテリア Rankingのインストール
まずは、アプリのインストールを行いましょう。
ストアの管理画面のアプリ管理からストアをカスタマイズに移動して検索窓にらくらくランキング表示アプリ｜リテリア Rankingと打ち込んで下さい。
そうすると、以下の画面を見つけることができるので、アプリを追加するより、アプリのインストールを行って下さい。
もし見つけることができなかった場合は、以下のURLからインストールできます。
アプリの追加をクリック後は、いつも通りの手順でインストールして下さい。
ここまでで、アプリのインストールは終了です。
それでは次に、アプリの管理画面についての説明を行っていきます。
アプリの管理画面について
アプリの管理画面は以下のようになっています。
テーマに反映から、有効化をクリックします。
これだけで、アプリの有効化が終了です。
次に、ランキング表示用のコレクションを作成しましょう。
コレクションからコレクションを作成するから、ランキング表示用のコレクションを作成しましょう。
今回は手動でベストセラーを作成したいので、コレクションの種類は手動を選択して下さい。
右上のから保存して下さい。
コレクションを作成した後は、こちらのコレクションに商品を追加しましょう。
商品管理の閲覧するをクリックして、手動で商品を追加して下さい。
ここまでで、コレクションの作成は完了です。
それでは次に、カスタマイズからストアのカスタマイズ画面に移動移動しましょう。
先程、アプリの管理画面で有効化をクリックしていると、セクションの一番下にランキングコレクションというアプリブロックが追加されています。
先程作成した、ベストセラーというコレクションを選択しましょう。
以下のように、ランキング表示をすることができました。
なかなか豊富なカスタマイズ項目があります。順位アイコンのデザインや、順位マークの色を細かくカスタマイズすることができます。
マウスオーバー時の挙動や、売り切れ時の表示テキストなども細かくカスタマイズすることができます。
また、こちらのアプリはアプリブロックを用いて挿入されているアプリであるため、全てのページから呼び出すことができます。
セクションの追加をクリックすると、一番下の方にアプリブから追加されたアプリブロックが存在することが確認できます。
こちらのセクションの追加からのアプリブロックの追加は、全てのページから行うことができます。また、追加したアプリブロックは、他のセクションと同様に、ページの任意の場所に移動させることができます。
また、アプリブロックを用いて追加したコードは、アプリブロックを削除すればテーマから完全に削除されます。テーマの汚染や、他のアプリとの競合を考える必要はありません。
終わりに
ここまでで、Shopifyでベストセラー表示ができるアプリである、らくらくランキング表示アプリ｜リテリア Rankingの解説は終わりです。
アプリストアは以下になります。
ここまで読んで頂き、ありがとうございました。