バッジ

ウィジェットや商品メッセージ上に表示されるバッジの概要と設定を解説します。

バッジは、ウィジェットや商品メッセージのキャンペーン情報の上部に表示できるテキスト要素です。「開催中」「まもなく開始」「在庫なし」といったキャンペーンの状態をお客様にわかりやすく伝えられます。

デモページで動作を確認できます→ RuffRuff 購入特典 デモ商品一覧

バッジは ウィジェットまたは商品メッセージ内 にのみ表示されます。各キャンペーンアイテムの上部に配置されます。

キャンペーンの状態に応じて、表示するバッジを状態ごとに個別に設定できます。

状態

表示タイミング

対象

開始前

キャンペーンの開始日時より前

ディスカウント・ギフト共通

期間中

キャンペーンの有効期間中

ディスカウント・ギフト共通

終了後

キャンペーンの終了日時より後

ディスカウント・ギフト共通

配布不可

期間中かつギフトが配布できない状態(構成商品の在庫切れなど)

ギフトキャンペーンのみ

各状態のテキストが未設定の場合、その状態ではバッジは表示されません。

状態の判定ロジック

  1. 現在時刻がキャンペーン開始日時より前 → 開始前

  2. 現在時刻がキャンペーン終了日時より後 → 終了後

  3. ギフトキャンペーン中かつ配布できない状態(isAvailable = false) → 配布不可

  4. 上記以外 → 期間中

ディスカウントキャンペーンには「配布不可」状態はありません。

バッジごとに設定できるデザイン項目です。

項目

説明

テキスト

バッジに表示する文言を入力します(最大10文字)。

背景色

バッジの背景色を設定します。

文字色

バッジの文字色を設定します。

バッジ全体の形状は以下の4種類から選択できます。

形状

説明

角丸なし

四角形のバッジ

角丸あり

角が丸いバッジ(ピル形)

タグ(切り欠き)

タグ形のバッジ

カスタム

角丸の数値(px)を自由に指定

  1. キャンペーンの「表示設定」を開く

  2. 埋め込みアプリが有効化されていることを確認する

  3. ウィジェット・商品メッセージ・商品カードバッジのいずれかを有効にする

  4. コンテンツ内の「バッジ」セクションで形状を選択する

  5. 各状態(開始前・期間中・終了後・配布不可)のテキスト・背景色・文字色を設定する

  6. 「保存する」をクリック

バッジのテキストはアプリ内の表示設定で言語セレクタから翻訳したい言語を選択して入力します。

  • テキストの文字数上限:最大10文字まで設定できます。

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

  • 表示期間・表示条件に準拠:バッジはキャンペーンの表示期間・表示条件の設定に従って表示されます。

  • 「配布不可」はギフトのみ:「配布不可」状態はギフトキャンペーンにのみ存在します。開始前・終了後の判定より後に評価されるため、期間外は「配布不可」にはなりません。