バッジは、ウィジェットや商品メッセージのキャンペーン情報の上部に表示できるテキスト要素です。「開催中」「まもなく開始」「在庫なし」といったキャンペーンの状態をお客様にわかりやすく伝えられます。
デモページで動作を確認できます→ RuffRuff 購入特典 デモ商品一覧
バッジは ウィジェットまたは商品メッセージ内 にのみ表示されます。各キャンペーンアイテムの上部に配置されます。
ウィジェットまたは商品メッセージが有効で、その状態のバッジテキストが設定されている場合に表示されます。商品カード上のバッジは「商品カードバッジ」で設定します。
各キャンペーンの表示設定の「バッジ」で、次の項目を設定できます。
キャンペーンの状態に応じて、表示するバッジを状態ごとに個別に設定できます。
状態 | 表示タイミング | 対象 |
|---|---|---|
開始前 | キャンペーンの開始日時より前 | ディスカウント・ギフト共通 |
期間中 | キャンペーンの有効期間中 | ディスカウント・ギフト共通 |
終了後 | キャンペーンの終了日時より後 | ディスカウント・ギフト共通 |
配布不可 | 期間中かつギフトが配布できない状態（構成商品の在庫切れなど） | ギフトキャンペーンのみ |
ヒント: 各状態のテキストが未設定の場合、その状態ではバッジは表示されません。
バッジごとに設定できるデザイン項目です。
項目 | 説明 |
|---|---|
テキスト | バッジに表示する文言を入力します（最大10文字）。 |
背景色 | バッジの背景色を設定します。 |
文字色 | バッジの文字色を設定します。 |
バッジ全体の形状は以下の4種類から選択できます。
形状 | 説明 |
|---|---|
角丸なし | 四角形のバッジ |
角丸あり | 角が丸いバッジ（ピル形） |
タグ（切り欠き） | タグ形のバッジ |
カスタム | 角丸の数値（px）を自由に指定 |
バッジを表示するには、表示方法のいずれかと、バッジのデザイン設定が必要です。
前提: ウィジェットまたは商品カードバッジを使う場合は埋め込みアプリを、商品メッセージを使う場合はテーマブロックを用意してください。
(1) キャンペーンの「表示設定」を開く
対象のディスカウントキャンペーンまたはギフトキャンペーンの「表示設定」を開いてください。
(2) 表示方法を有効にする
ウィジェット・商品メッセージ・商品カードバッジのいずれかを有効にしてください。
(1) コンテンツの「バッジ」を開く
項目の詳細は「キャンペーンの表示設定で設定できる項目」を確認してください。
(2) 設定を保存する
画面右上の「保存」を選択してください。
バッジのテキストはアプリ内の表示設定で言語セレクタから翻訳したい言語を選択して入力します。
状態の判定順は次のとおりです。
現在時刻がキャンペーン開始日時より前 → 開始前
現在時刻がキャンペーン終了日時より後 → 終了後
ギフトキャンペーンの期間中で、ギフトを配布できない状態 → 配布不可
上記以外 → 期間中
注意: ディスカウントキャンペーンには「配布不可」状態はありません。
テキストの文字数上限：最大10文字まで設定できます。
テキスト未設定時は非表示：各状態のテキストが未入力の場合、その状態ではバッジは表示されません。
表示期間・表示条件に準拠：バッジはキャンペーンの表示期間・表示条件の設定に従って表示されます。
「配布不可」はギフトのみ：「配布不可」状態はギフトキャンペーンにのみ存在します。開始前・終了後の判定より後に評価されるため、期間外は「配布不可」にはなりません。