商品カードバッジ

商品カードバッジとは、コレクションページや検索結果ページの商品カード（商品画像）に、商品の状態を示すラベルを重ねて表示する機能です。商品名にテキストを追加する形式の従来の「予約販売バッジ」とは異なり、画像の四隅にオーバーレイ表示されます。

この2つの機能は同時に利用できません。詳しくは本記事末尾の「従来の予約販売バッジからの移行」をご覧ください。

• コレクションページ・検索結果ページなど、商品カードが並ぶ一覧画面に表示できます

• 商品ページのメイン画像や商品名には対応していません

• 予約販売ルールごとに、「予約販売時」「開始日前」「終了日後」「条件外」の4つの状態それぞれにバッジのテキスト・背景色・文字色を個別に設定できます

• 「開始日前」「終了日後」のバッジは、そのルールで「開始日前」「終了日後」のアクション自体が有効になっている場合のみ設定・表示できます

• 「条件外」のバッジは、予約販売期間内で在庫条件・顧客タグなどの購入条件を満たしていない場合に表示されます

• 各状態のバッジのテキストが未入力の場合、その状態のバッジは表示されません

• 表示の優先度はルール単位で1つの値です(4つの状態で共通)

• 表示位置・間隔・最大表示件数・形状・文字サイズ/太さは、ストア全体で統一される設定です（アプリ設定画面で変更）

• テーマによって商品カードの構造が異なるため、標準の検出方法でバッジが表示されない場合はアプリ設定の「高度な設定」でCSSセレクタを指定できます

• 「開始日前」バッジは表示を開始するタイミング、「終了日後」バッジは表示を終了するタイミングを、開始日/終了日からの日数・時間数で指定できます（未指定の場合はこれまでどおり常に表示・表示し続けます）

• 「予約販売時」バッジは、終了間際に別のテキストへ切り替える「終了予告」を設定できます（未指定の場合は切り替えません）

• ルール編集画面のプレビューで、状態ごとのバッジの見え方を切り替えて確認できます

(1) アプリ管理画面の左メニューから「設定」を開く

(2) 「商品カードバッジ」セクションのスイッチをONにする

(3) 下記の項目を設定する

(4) テーマによってバッジが表示されない・崩れる場合は「高度な設定」を開き、下記のCSSセレクタを指定する（任意）

(5) 「保存」をクリックする

予約販売ルールの状態（予約販売時・開始日前・終了日後・条件外）ごとに、バッジのテキストと色を個別に設定できます。

(1) 対象の予約販売ルールを開く

(2) 「アクション」セクションで、バッジを設定したい状態のタブを開く

(3) 「商品カードバッジを表示する」にチェックを入れる

(4) 下記の項目を設定する

状態ごとの組み込みデフォルト色は以下のとおりです。

(5) 「保存」をクリックする

「開始日前」「終了日後」「予約販売時」の各バッジは、下記の追加設定で表示するタイミングを調整できます。設定しない場合は、これまでどおりの表示になります。

日数・時間数として指定できる範囲は、日が1〜365、時間が1〜8760です。

ルール編集画面にはプレビューカードが表示され、設定した内容でバッジがどのように見えるかを、その場で確認できます。プレビュー上部のドロップダウンで、確認したい表示状態（予約販売時・予約販売時（終了予告）・開始日前・終了日後・条件外）を切り替えられます。

• 選択した状態でバッジが表示されない設定になっている場合は、プレビューに「この状態ではバッジは表示されません」と表示されます

• アプリ設定の「商品カードバッジ」が無効になっている場合は、プレビューに「設定ページで商品カードバッジが無効になっているため、バッジは表示されません」と表示されます

1つの商品に複数の予約販売ルール・複数の状態のバッジが該当する場合、以下の順序で表示するバッジが決定されます。

1. 表示の優先度（数値が大きい順）

2. 優先度が同じ場合、状態の種類順（予約販売時 > 開始日前 > 終了日後 > 条件外）

3. さらに同じ場合、ルールの内部ID順

アプリ設定の「最大表示件数」を超える分のバッジは表示されません。

予約開始日時が設定されていない場合や、終了日時が開始日時より前になっている場合、そのルールのバッジは状態に関わらず表示されません。

(1) 対象の予約販売ルールを開く

(2) 右上の「翻訳」をクリックする

(3) 翻訳する言語を選択する

(4) バッジテキストを設定している状態のタブ（予約販売時・開始日前・終了日後・条件外）で「商品カードバッジのテキスト」に翻訳後のテキストを入力する。終了予告のテキストを設定している場合は、「予約販売時」タブの「終了予告のバッジテキスト」も同様に翻訳できます

(5) 「保存」をクリックする

バッジテキストが入力されている状態のみ、翻訳対象として表示されます。

従来の「予約販売バッジ」機能をすでに利用している場合、設定は自動的には引き継がれません。商品カードバッジ側で改めて設定する必要があります。

従来の予約販売バッジのテキスト設定があるルールで、商品カードバッジが未設定の場合、ルール編集画面に再設定を促す案内が表示されます。

• 商品カードバッジを有効にすると、そのショップの従来の予約販売バッジは表示されなくなります（新旧は同時に利用できません）

• 商品カードバッジを無効に戻すと、従来の予約販売バッジの表示が再開されます

• 従来の予約販売バッジ機能は2026年9月30日に非推奨となる予定です。それまでに商品カードバッジへの移行をおすすめします

ご利用のテーマによっては、標準の検出方法で商品カードやバッジの挿入位置を正しく認識できないことがあります。以下をご確認ください。

• アプリ設定の「高度な設定」で商品カードセレクタ・バッジ挿入先セレクタを指定する

• 指定したCSSセレクタの構文に誤りがないか確認する（構文が正しくない場合、保存時にエラーが表示されます）

上記で解決しない場合は、アプリ内のサポートチャットからお問い合わせください。