バッジを作って商品画像に表示する

設定はアプリの管理画面とテーマエディタで完結します。テーマファイルへの書き込みは一切ないので、アンインストールしても残骸は残りません。

はじめる前に

ストアの管理者権限が必要です
公開中のテーマを編集します。事前にテーマを複製しておくと安全です

手順

1. アプリ埋め込みを有効にする

アプリのホームにある「テーマエディタを開く」を押すと、アプリ埋め込みの画面が開きます。「商品バッジ」のトグルをオンにして保存します。

この埋め込みがバッジの描画本体です。オフのままだとバッジを作っても店頭には何も出ないので、必ず最初に有効にしてください。有効化はアプリ側で自動検知するので、済んでいればホームの案内バナーは消えます。

2. プリセットからバッジを作る

「バッジを作成」を押すと、プリセットギャラリーが開きます。日本のECでよく使う19種類を5カテゴリに分けて同梱しています。

価格・値引き — 20%OFF / 半額 / タイムセール / 2点で10%OFF
在庫・希少性 — 再入荷 / 数量限定 / 完売間近 / 予約特典あり
発送・サービス — 即日発送 / ギフト対応 / 返品OK
商品属性 — 新色 / 別注 / コラボ / サステナブル / 定番
会員・特典 — 会員限定価格 / ポイント5倍 / LINE登録で割引

プリセットは出発点なので、選んだあとに文言も見た目も変えられます。

ラベル — 40文字まで
背景色・文字色・枠線色 — #bf0000 のような16進数で指定
背景の不透明度 — 背景だけを透かします（文字と枠線は不透明のまま）
形状 — リボン / 円形 / 角丸 / 帯 / 四角
サイズ — 小 / 中 / 大
表示位置 — 左上 / 右上 / 左下 / 右下

編集中は商品カードを模したプレビューに実際の見え方が出ます。店頭と同じ寸法で描画しているので、ここで潰れて見えるものは店頭でも潰れます。

3. 表示ページを選ぶ

「表示ページ」で、商品ページ・コレクションページ・ホームページ・検索結果から表示先を選びます。最低1つは必要です。

商品ページだけにチェックを入れた状態でコレクションを見ても出ません。逆も同じなので、「出ない」と思ったらまずここを確認してください。

4. 表示条件を決める

「表示条件」で、どの商品に付けるかを決めます。

商品タグ — カンマ区切り。いずれかのタグを持つ商品
コレクション — 選択したコレクションに含まれる商品
在庫状態 — 在庫切れ、または在庫わずか（しきい値以下）
セール中 — 参考価格（compare-at）が販売価格より高い商品
特定の商品 — 個別に選んだ商品

条件はOR判定です。複数入れると「どれかに当てはまれば表示」になります。「タグAかつセール中」のようなAND条件は作れないので、絞り込みたいときはタグ側で運用を寄せてください。

条件をすべて空にすると、選んだページの全商品に表示されます。

5. 期間・デバイスを絞る（任意）

「期間限定で表示する」をオンにすると、開始と終了の日時を指定できます。時刻はストアのタイムゾーンで扱うので、そのタイムゾーンでの時刻を入力してください。適用されるタイムゾーンは入力欄の下に表示されます。一覧の状態列に「予約中」「表示中」「終了」が出ます。

「表示デバイス」でPCのみ・モバイルのみに絞れます。どちらも選ばなければ全デバイスに出ます。

重なり順を調整する

同じ位置に複数のバッジが該当すると重なります。一覧のハンドルをドラッグ（または矢印ボタン）で並べ替えると、上にあるバッジが手前に表示されます。

自動での衝突回避は行いません。狙って重ねない運用にするか、位置を散らすのが確実です。

テーマ標準のラベルと重なるとき

Dawn系テーマは「セール」「売り切れ」といったラベルを自前で出します。アプリのバッジと重なる場合は、テーマエディタのアプリ埋め込み「商品バッジ」の設定にある**「テーマ標準の商品ラベルを非表示にする」**をオンにしてください（既定はオフ）。

動作を確認する

条件に当てはまる商品の商品ページを開き、指定した位置にバッジが出ることを確認します
その商品が並ぶコレクションページを開き、カードにも出ることを確認します（表示ページでコレクションを選んでいる場合）
スマートフォンの実機幅でも位置が崩れていないか確認します

うまくいかないとき

何も表示されない

アプリ埋め込み「商品バッジ」がオフになっています。手順1を確認してください。

商品ページには出るのに一覧に出ない

「表示ページ」でコレクションページにチェックが入っていません。手順3を確認してください。

特定の商品にだけ出ない

表示条件のいずれにも当てはまっていない可能性があります。タグの表記ゆれ（全角・半角、スペース）が原因のことが多いので、商品側のタグを実際の文字列で確認してください。

バッジが画像からはみ出す・ずれる

バッジは商品画像の実寸に合わせて配置します。画像の読み込みが遅いテーマでは一瞬ずれて見えることがありますが、読み込み後に自動で追従します。それでも残る場合は、テーマ側で商品画像がリンク要素の外に置かれている構造の可能性があります。

バッジは1ストアあたり50件まで作成できます。作ったバッジは条件に当てはまる商品すべてに適用されるので、商品ごとに1件ずつ作る必要はありません。