商品カードバッジ

商品カードバッジは、コレクションページやレコメンド商品一覧などの商品カード上に、キャンペーン期間中のみバッジを表示できる機能です。「SALE」「10%OFF」「ギフトあり」といった訴求を商品一覧画面で行えます。

以下の条件をすべて満たす場合に表示されます。

• キャンペーンのステータスが「有効」である

• キャンペーン期間中である（期間外は表示されません）

• 表示設定で「商品カードにバッジを表示する」がオンである

• 表示期間・表示条件を設定している場合は、その条件を満たしている

• バッジの「期間中」のテキストが設定されている

• 商品カードの商品が、対象商品に含まれている（対象商品を指定している場合）

商品カードバッジは キャンペーン期間中のみ 表示されます。開始前・終了後は表示されません。また表示されるのは「期間中」バッジのテキストのみです。

商品カードバッジを表示するには、埋め込みアプリの有効化とキャンペーン側での設定の2ステップが必要です。

ステップ1：埋め込みアプリを有効化する

1. アプリTOPページの設定ガイドより「テーマでアプリを有効にする」をクリック

2. セレクトボックスよりアプリを導入したいShopifyテーマを選択

3. 「アプリを有効にする」をクリック

4. テーマエディタの画面左にある「RuffRuff 購入特典」を有効化

5. 画面右上の「保存する」をクリック

ステップ2：キャンペーンの表示設定で設定する

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

2. 「商品カードにバッジを表示する」をオンにする

3. 対象商品またはコレクションを設定する（省略時は全商品が対象）

4. コンテンツのバッジセクションで「期間中」のテキスト・背景色・文字色・形状を設定する

5. 必要に応じて表示期間・表示条件を設定する

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

商品カードバッジの表示位置やサイズはストアフロント設定ページからカスタマイズできます。

設定できる項目

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

• 表示はキャンペーン期間中のみ：開始前・終了後はバッジが表示されません。

• 表示されるのは「期間中」バッジのみ：他の状態（開始前・終了後・配布不可）のバッジは商品カードには表示されません。

• テキスト未設定時は非表示：「期間中」のバッジテキストが未入力の場合、バッジは表示されません。

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

• 対象はコレクションまたは商品のみ指定可能：バリアント単位での絞り込みはできません。

• 最大表示件数の上限：1つの商品カードに表示できるバッジの上限はデフォルト2件、最大10件です。

• 動的追加に対応：ページロード後に動的に追加された商品カードにも自動でバッジが注入されます。