【Shopifyアプリ】シンプルランキング表示|お手軽ベストセラーについて徹底解説|ご利用ガイド

株式会社UnReactのアイコン
株式会社UnReact

はじめに

今回の記事は、Shopify アプリである「シンプルランキング表示|お手軽ベストセラー」の解説記事です。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築できるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress のプラグインのようなもの、と認識頂いて大丈夫です。

シンプルランキング表示|お手軽ベストセラー は、Shopify ストアのお好きなページでコレクションをランキング表示できるアプリです。

事前に作成したコレクションを元に、ワンクリックでランキングをストアに表示できます。

興味のある方は、以下の URL よりアプリをインストールしてください。

シンプルランキング表示|お手軽ベストセラー

「シンプルランキング表示|お手軽ベストセラー」でできること

Shopify アプリ「シンプルランキング表示|お手軽ベストセラー」は、以下の画像のように Shopify ストアにランキング表示機能を簡単に導入できるアプリです。

「シンプルランキング表示|お手軽ベストセラー」でできること1

「シンプルランキング表示|お手軽ベストセラー」は、ノーコードでコレクションをランキングとして表示できます。

「シンプルランキング表示|お手軽ベストセラー」でできること2

ランキングのラベルは 4 種類から選択できます。

シンプルランキング表示|お手軽ベストセラー」でできること3

アプリのインストール

Shopify App Store にアクセスする

それでは、実際にアプリのインストールしていきましょう。

ストア管理画面左下の「設定」をクリックします。

アプリのインストール手順1

ストアの管理画面の「アプリと販売チャネル」画面に表示されている「Shopify App Store」をクリックして、Shopify App Store に移動してください。

アプリのインストール手順2

アプリインストールページを表示する

検索窓に、「シンプルランキング表示|お手軽ベストセラー」と入力して、出てくるアプリをクリックしてください。

アプリのインストール手順3

「インストール」ボタンをクリックして、ストアにアプリを追加しましょう。マーチャント用のアカウント(実際に物販などで運用しているアカウント)ですと、月額$5.99 でご利用いただけます。インストール後、7 日間は無料でご利用いただけます。

アプリのインストール手順4

「インストール」ボタンをクリックすると以下の画面に遷移します。右下の「アプリをインストール」ボタンをクリックして、アプリのインストールしましょう。

アプリのインストール手順5

以下の管理画面が表示されます。

アプリ設定

次にアプリの設定を行います。アプリの管理画面とストアフロントの表示設定を行います。

アプリを管理画面にピン留めする

ピンアイコンをクリックして、管理画面にシンプルランキング表示|お手軽ベストセラーをピン留めしておくと便利です。

アプリのインストール手順6

以上で、アプリのインストールは完了です。

アプリをテーマに追加

ランキング表示機能をテーマに追加します。
サイドバーの「設定」をクリックして、「設定」ページに移動してください。

アプリをテーマに追加1

ランキング表示機能をテーマに追加

ランキング表示機能を追加したいテーマを選択し、「テーマに追加」ボタンをクリックすると、選択されたテーマにランキング表示機能が追加できます。

アプリをテーマに追加2

アプリをテーマに追加3

事前にコレクションを作成する

新規コレクションの作成

事前にランキング表示したい商品で構成されているコレクションを準備します。
まずは管理画面で「商品管理」をクリックします。

コレクションの作成1

次に直下の「コレクション」をクリックし、「コレクションを作成する」ボタンをクリックします。

コレクションの作成2

コレクション作成画面で「タイトル」欄に適切なタイトルを記入し、保存します。

コレクションの作成3

コレクションに商品を追加

コレクションを作成したら、商品を追加していきます。
「閲覧する」ボタンを押して、ランキング表示したい商品をコレクションに追加していきましょう。

コレクションの作成4

商品をランキング表示したい順に並び替える

商品を追加したら並べ替えを「手動」に変更して、ランキングの順位に合うように商品を並べ替えましょう。

コレクションの作成5

保存したらランキングコレクションの作成はこれでおしまいです。

見た目のカスタマイズ

ストアに「シンプルランキング|見出しブロック」を追加する

ストアにランキングの見出しを追加します。
ストアのカスタマイズ画面に移動して、「セクションを追加」ボタンから「 シンプルランキング|見出しブロック 」を追加します。

見出し1

追加した見出しブロックをクリックして、詳細設定画面を表示します。

見出し2

「見出しテキスト」見出しとして表示するテキストを記入します。

見出し3

「見出しの大きさ(PC)」「見出しの大きさ(スマホ)」の項目でテキストサイズを変更できます。

見出し4

「見出しの色」の項目で見出しの色を変更できます。

見出し5

「見出しの上部余白」「見出しの下部余白」でアプリブロックの上下余白を設定できます。

見出し6

ストアに「シンプルランキング|ランキングブロック」を追加する

「セクションを追加」を選択し、「アプリ」タブの「シンプルランキング|ランキングブロック」を選択します。

ランキング1

詳細設定画面で、「コレクションを選択」をクリックし、「事前にコレクションを作成する」で作成したコレクションを選択します。

ランキング2

これでコレクションをランキング表示できました。

ランキング3

順位ラベルの種類を変更したい場合は、「順位ラベルの種類」から設定したいラベルの種類を選択します。

ランキング4

順位ラベルの種類は以下の 4 種類から選択できます。

ランキング5

「順位テキストの色」「順位ラベルの色」項目で順位テキストと順位ラベルの色を変更できます。

ランキング6

  • 順位テキストの色
    → 順位マーク(バッジ)のテキストの色を変更できます。テキストはすべてのマーク(バッジ)で共通の色になります

  • 順位マークの色(1 位)
    → 1 位のマーク(バッジ)の色を変更できます。

  • 順位マークの色(2 位)
    → 2 位のマーク(バッジ)の色を変更できます。

  • 順位マークの色(3 位)
    → 3 位のマーク(バッジ)の色を変更できます。

  • 順位マークの色(4 位~)
    → 4 位以下のマーク(バッジ)の色を変更できます。

「順位ラベルの位置」項目では順位ラベルの位置を変更できます。

ランキング6

位置は商品画像の「左上」「右上」「左下」「右下」の 4 種類です。

ランキング7

「コレクションのレイアウト設定」では一度に表示できる商品の数を設定できます。

ランキング8

「商品間の余白(横)(縦)」では商品間の縦・横方向の余白をそれぞれ調整できます。

ランキング9

「商品カードの設定」では、商品を表示する枠について設定できます。

「縦横比」「マウスオーバー時の挙動」では、商品画像の縦横比と、商品画像にマウスオーバーしたときの挙動を設定できます。

ランキング10

「商品名のテキストサイズ」「商品名のテキストの色」では商品名テキストのサイズと色を設定できます。
「値段のテキストサイズ」では商品名下の値段テキストのサイズを設定できます。

ランキング11

「売り切れ時の表示テキスト」では商品が売り切れの時のみ表示するテキストを設定できます。

ランキング12

「ブロックの余白設定」ではアプリ外側の余白を設定できます。

ランキング13

「PC での表示」項目では PC 閲覧時の表示設定を行えます。

「PC 表示で余白や文字サイズを最適化する」にチェックを入れると、PC で閲覧している場合のみ余白や文字サイズが大きめに表示されます。

ランキング14

以上でアプリの設定は完了です。

終わりに

今回は、「シンプルランキング表示|お手軽ベストセラー」の解説をしました。少しでも興味があれば、以下のリンクによりアプリをインストールいただけると幸いです。ここまでお付き合い頂き、誠にありがとうございました。

シンプルランキング表示|お手軽ベストセラー

シンプルランキング表示|お手軽ベストセラー

recommendおすすめ記事

シンプル名入れ|お手軽名前入りギフトオプションのアイコン
アプリ解説

【Shopifyアプリ】シンプル名入れ|お手軽名前入りギフトオプションについて徹底解説|ご利用ガイド

シンプル在庫数表示|お手軽残りわずか表示のアイコン
アプリ解説

【Shopifyアプリ】シンプル在庫数表示|お手軽残りわずか表示について徹底解説|ご利用ガイド

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン
アプリ解説

【Shopifyアプリ】シンプルギフトラッピング|お手軽ギフト包装アプリについて徹底解説|ご利用ガイド

シンプル購入制限|お手軽注文制限について徹底解説のアイコン
アプリ解説

【Shopifyアプリ】シンプル購入制限|お手軽注文制限について徹底解説|ご利用ガイド

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン
アプリ解説

【Shopifyアプリ】シンプル顧客タグごとの限定販売|お手軽ロイヤリティについて徹底解説|ご利用ガイド

シンプル余白調整|お手軽レイアウトのアイコン
アプリ解説

【Shopifyアプリ】シンプル余白調整|お手軽レイアウトについて徹底解説|ご利用ガイド

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン
アプリ解説

【Shopifyアプリ】シンプルロゴ一覧|お手軽ロゴリスト表示について徹底解説|ご利用ガイド

シンプルのし(熨斗)アプリのアイコン
アプリ解説

【Shopifyアプリ】シンプルのし(熨斗)アプリについて徹底解説|ご利用ガイド

シンプル画像バナー|お手軽広告バナーアプリのアイコン
アプリ解説

【Shopifyアプリ】シンプル画像バナー|お手軽広告バナーアプリについて徹底解説|ご利用ガイド

シンプル Q&A|どこでも FAQのアイコン
アプリ解説

【Shopifyアプリ】シンプル Q&A|どこでも FAQに誘導について徹底解説|ご利用ガイド

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン
アプリ解説

【Shopifyアプリ】シンプル流れる告知|流れるお知らせ挿入アプリについて徹底解説|ご利用ガイド

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン
アプリ解説

【Shopifyアプリ】シンプルモバイルアプリバナー|スマホアプリに誘導について徹底解説|ご利用ガイド

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン
アプリ解説

【Shopifyアプリ】シンプル売り切れ非表示|在庫切れ商品の表示変更について徹底解説 | ご利用ガイド

シンプルレビュー|お手軽口コミのアイコン
アプリ解説

【Shopifyアプリ】シンプルレビュー|お手軽口コミについて徹底解説|ご利用ガイド

シンプル会員限定販売|お手軽アカウント必須販売のアイコン
アプリ解説

【Shopifyアプリ】シンプル会員限定販売|お手軽アカウント必須販売(購入制限)について徹底解説|ご利用ガイド

シンプル会員ランク|お手軽顧客タグ付けのアイコン
アプリ解説

【Shopifyアプリ】シンプル会員ランク|お手軽顧客タグ付けについて徹底解説|ご利用ガイド

シンプル Wishlist|お手軽お気に入りのアイコン
アプリ解説

【Shopifyアプリ】シンプル Wishlist|お手軽お気に入りについて徹底解説|ご利用ガイド

シンプル Coming Soon|商品ページ発売予告アプリのアイコン
アプリ解説

【Shopifyアプリ】シンプル Coming Soon|商品ページ発売予告アプリについて徹底解説|ご利用ガイド

シンプルセット販売|お手軽クロスセルのアイコン
アプリ解説

【Shopifyアプリ】シンプルセット販売|お手軽クロスセルについて徹底解説|ご利用ガイド

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン
アプリ解説

【Shopifyアプリ】シンプル予約販売|受注販売や在庫切れ商品販売で使える について徹底解説 | ご利用ガイド

シンプル販売期間設定|商品ごとに期間限定販売のアイコン
アプリ解説

【Shopifyアプリ】シンプル販売期間設定|商品ごとに期間限定販売について徹底解説 | ご利用ガイド

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン
アプリ解説

【Shopifyアプリ】特別な顧客への限定販売を簡単に実現できるVIP販売アプリ『シンプルVIP』について徹底解説 | ご利用ガイド

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン
アプリ解説

【Shopifyアプリ】追加料金なしで使えるお手軽ポイントアプリ『シンプルポイント』について徹底解説 | ご利用ガイド