外観
3. 店頭での見せ方
ストアに表示する部品は3つあります。どれもテーマエディタで追加し、見た目もテーマエディタで整えます。テーマのコードは書き換えません。
| 部品 | 置く場所 | 必要なプラン |
|---|---|---|
| 売上ランキング（ブロック） | ホームページ、コレクションページなど | すべて |
| ランキングバッジ（ブロック） | 商品ページ | すべて |
| コレクション一覧のランキングラベル（アプリ埋め込み） | コレクションページ | STANDARD 以上 |
テーマエディタは、アプリの［ランキング管理］の各ランキングのカードにある［テーマエディタを開く］、または Shopify の管理画面の［オンラインストア］›［テーマ］›［カスタマイズ］から開きます。
中身と見た目は別の場所で決めます
どの商品がどの順位に並ぶか（種類・集計期間・売り切れ商品の扱い）は、アプリの［ランキング管理］で決めます（ランキングを設定する）。このページで扱うのは、それをストアでどう見せるかです。
売上ランキング（ブロック）
ランキングの一覧を表示するブロックです。追加の手順は初期設定にあります。
テーマエディタでブロックを選ぶと、設定が表示されます。設定は「内容」「デザイン」「文字」「形状と操作部品」「配色」に分かれています。
内容
| 設定 | 内容 |
|---|---|
| 表示するランキング | ［ランキング管理］で作ったランキングを、「ランキング 1」などの番号で選びます（アプリの［ランキング管理］にある同じ名前の項目は、ランキングの種類を選ぶ項目です） |
| タイトル | ブロックの見出しです。最初は「売上ランキング」です |
| 分析用ラベル（任意） | 分析の「表示場所別の成果」で、このブロックを見分けるための名前です（PRO） |
| 表示件数 | 1〜50件。最初は10件です。無料プランでは、上位5件までが表示されます |
| 順位バッジを表示 | 順位の数字のバッジを表示します |
| 価格を表示 | 商品の価格を表示します |
| 順位の変動を表示（↑↓・NEW） | 前の期間と比べた順位の上下と、初登場を表示します |
| 販売数を表示 | 「◯個販売」「◯件の注文」のように表示します |
| 集計期間と更新日を表示 | 「過去7日間の販売数で集計・10月11日更新」のような1行を表示します |
| カートに追加ボタンを表示 | ランキングから直接カートに入れられるボタンを表示します |
| カートに追加ボタンの文言 | ボタンの文字を変えます |
| バリエーション表示 | バリエーションのある商品の選び方です。「テキスト（プルダウン）」か「画像（画像なしは文字）」を選びます |
デザイン
| 設定 | 内容 |
|---|---|
| レイアウト | 「リスト」「グリッド」「カルーセル」から選びます |
| モバイルの列数 | スマートフォンでの列数（1〜3） |
| デスクトップの列数 | パソコンでの列数（2〜8） |
| 商品間の間隔 | 商品どうしのすき間 |
| リスト画像のサイズ | リストのときの商品画像の大きさ |
| グリッド画像の比率 | 正方形（1:1）、縦長（4:5）、横長（3:2）、商品画像の比率を維持 |
| 画像の表示方法 | 枠いっぱいに切り抜く、画像全体を収める |
| コンテンツの最大幅・上下の余白・カード内の余白 | ブロック全体の幅と余白 |
| カードのスタイル | 商品カードの枠線や影 |
レイアウトの「自動」は、以前のバージョンの設定を引き継ぐための選択肢です。新しく置くときは、リスト・グリッド・カルーセルのどれかを選んでください。
| レイアウト | 並び方 |
|---|---|
| リスト | 縦に1件ずつ並べます |
| グリッド | 格子状に並べます。列数は「モバイルの列数」「デスクトップの列数」で決めます |
| カルーセル | 横に並べ、スライドして見せます。縦の場所を取りません |
文字・形状と操作部品・配色
- 文字：見出しと商品名の文字サイズ、太さ、左・中央・右の揃え。
- 形状と操作部品：カード・画像・ボタンの角丸、カードの枠線、ボタンのスタイル（塗りつぶし・枠線・テキストリンク）、順位バッジの形（円・四角・リボン）と位置（左上・右上）。
- 配色：全体の背景、カードの背景、文字色、枠線の色、セール価格の色、ボタンの色、1位・2位・3位・4位以下の順位バッジの色。
「旧バージョン用（通常は変更不要）」の設定は、以前のバージョンのランキングを使っているストア向けです。変更する必要はありません。
順位の変動（↑↓・NEW）
「順位の変動を表示（↑↓・NEW）」をオンにすると、商品ごとに次の印が付きます。
| 印 | 意味 |
|---|---|
| ↑ | 前の期間より順位が上がった |
| ↓ | 前の期間より順位が下がった |
| → | 前の期間と同じ順位 |
| NEW | 前の期間にはランキングに入っていなかった（初登場） |
- 比べる相手は、直前の同じ長さの期間です。過去7日間のランキングなら、その前の7日間と比べます。デイリーのランキングは、前々日と比べます。
- 比べるのに必要な注文データがそろうまでは、印は表示されません。インストールした直後は、しばらく印が出ないことがあります。
- 急上昇ランキングでは、印は表示されません。 急上昇は、直前の期間からの伸びで並べているため、比べられる「前の順位」がありません。
- デイリーのランキングで、前日に売れておらず直近7日間の売れ筋順で並んだ商品には、印は付きません。
販売数の表示
「販売数を表示」をオンにすると、「◯個販売」（販売点数・急上昇）または「◯件の注文」（注文件数）と表示します。数が3未満の商品と、売上金額のランキングでは表示しません。
集計期間と更新日
「集計期間と更新日を表示」をオンにすると、ランキングに「過去7日間の販売数で集計・10月11日更新」のような1行が表示されます。デイリーのランキングは「前日の販売数で集計」と表示します。更新日が3日より前のときは、更新日を表示しません。
コレクションページに置いたとき
「ランキングの対象」が「表示中のコレクション」のランキング（STANDARD 以上）は、コレクションページでは、そのコレクションの商品だけの順位を表示します。ホームページなど、ほかのページではストア全体の順位を表示します。
対象の選び方はランキングの対象を選ぶをご覧ください。ジャンル別タブのランキングは、どのページでも同じタブを表示します（4. ジャンル別タブ）。
無料プランのクレジット表記
無料プランでは、ランキングの下に「Powered by まるっと売上ランキング」と表示されます。STANDARD 以上では表示されません。
ランキングバッジ（商品ページ）
商品ページに、その商品の順位を「週間ランキング 第1位」のように表示するブロックです。ランキングに入っていない商品のページには、何も表示されません。
追加する
- テーマエディタの上部で、商品ページ（［商品］›［デフォルトの商品］など）を選びます。
- 商品情報のセクションで［ブロックを追加］をクリックし、アプリの一覧から「ランキングバッジ」を選びます。
- ブロックをドラッグして、商品名の近くなど、表示したい位置に動かします。
- ［保存］をクリックします。
設定
| 設定 | 内容 |
|---|---|
| 表示するランキング | 「自動（いちばん良い順位）」は、すべてのランキングの中でいちばん良い順位を表示します。番号を選ぶと、そのランキングの順位だけを表示します |
| この順位まで表示 | この順位までに入っている商品にだけバッジを出します（1〜50。最初は10） |
| 配置 | 左・中央・右 |
| 幅 | 内容に合わせる、横幅いっぱい |
| アイコンを表示・アイコン | 星・王冠・トロフィーから選びます |
| サイズと形状 | 文字サイズ、太さ、余白、角丸、枠線の太さ、影 |
| 配色 | 背景、文字色、枠線の色、アイコンの色 |
バッジの文言
バッジの文言は、ランキングの集計期間と種類から自動で決まります。
| ランキング | バッジの例 |
|---|---|
| デイリー（前日） | デイリーランキング 第1位 |
| 過去7日間 | 週間ランキング 第1位 |
| 過去30日間 | 月間ランキング 第1位 |
| 過去60日間・過去90日間 | 過去60日間ランキング 第1位 |
| 急上昇ランキング | 急上昇ランキング 第1位 |
コレクションの中での順位（対象が「表示中のコレクション」のランキングと、ジャンル別タブのランキング）を表示するときは、「（コレクション名） 週間ランキング 第1位」のように、コレクション名が前に付きます。
デイリーのランキングのバッジは、前日に売れた商品にだけ表示します。前日に売れておらず、直近7日間の売れ筋順で並んだ商品には表示しません（デイリー（前日））。
コレクション一覧のランキングラベル
コレクションページの商品カードに、「第1位」のような順位のラベルを重ねる部品です。STANDARD 以上のプランで使えます。
有効にする
- アプリのホームの「セットアップ」にある［ラベルを有効にする］をクリックします。この手順が出ていないときは、テーマエディタでアプリ埋め込みの一覧を開きます。
- 「コレクション一覧のランキングラベル」をオンにします。
- ［保存］をクリックします。
設定
| 設定 | 内容 |
|---|---|
| 表示するランキング枠 | どのランキングの順位を使うかを、番号で選びます。ジャンル別タブのランキングは選べません（選んでもラベルは付きません） |
| ラベルを付ける順位 | この順位までの商品にラベルを付けます（1〜10。最初は3） |
| ラベルの文言 | 空欄のときは「第1位」のように表示します。変えるときは、順位を入れたい場所に {rank} と書きます（例: 売れ筋{rank}位） |
| ラベルの位置 | 左上・右上・左下・右下 |
| 配色 | 文字色と、1位・2位・3位・4位以下の背景 |
ラベルが付く場所
- ラベルが付くのは、コレクションページの商品一覧です。「すべての商品」（
/collections/all）のページには付きません。 - 選んだランキングの対象が「表示中のコレクション」なら、そのコレクションの中での順位が付きます。「ストア全体」なら、ストア全体での順位が付きます。
- ジャンル別タブのランキングは、タブごとに順位が違うため、ラベルには使えません。ラベル用には、対象が「表示中のコレクション」または「ストア全体」のランキングを選んでください。
- A/Bテスト中のランキングを選んでいるときは、A（今の設定）の順位が付きます。
- ラベルは、テーマの商品カードを探して重ねます。テーマによっては位置がずれたり、付かなかったりすることがあります。その場合は support@pepin.studio までご連絡ください。
表示されないとき
ストアにランキングやバッジ、ラベルが出ないときは、困ったときをご覧ください。