商品カードバッジ

商品カードバッジは、コレクションページや検索結果ページの商品カード（商品画像）に、商品の状態を示すラベルを重ねて表示する機能です。商品名にテキストを追加する従来の「予約販売バッジ」とは異なり、画像の四隅に重ねて表示します。この記事では、従来機能との違い、設定手順、表示の優先順位、移行方法を説明します。

2つの機能の違いは次のとおりです。同時には利用できません。詳しくは「従来の予約販売バッジからの移行」をご覧ください。

• スタータープラン以上で利用できます。旧ライトプランでは、アプリ設定で有効にしてもストアには表示されません

• コレクションページ・検索結果ページなど、商品カードが並ぶ一覧画面に表示できます。商品ページのメイン画像や商品名には対応していません

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

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

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

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

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

• 表示位置・間隔・最大表示件数・形状・文字サイズと太さは、ストア全体で共通の設定です（アプリ設定で変更）

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

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

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

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

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

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

(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セレクタの構文に誤りがないか確認する。構文が正しくない場合、保存時にエラーが表示されます

上記を確認しても解決しない場合は、アプリ設定の「商品カードバッジ」セクションにある「サポートに問い合わせる」からお問い合わせください。

• アクション

• 予約販売バッジ（非推奨:9月30日提供終了）