商品カードバッジは、コレクションページやレコメンド商品一覧などの商品カード上に、キャンペーン期間中のみバッジを表示できる機能です。「SALE」「10%OFF」「ギフトあり」といった訴求を商品一覧画面で行えます。
デモページで動作を確認できます→ RuffRuff 購入特典 デモ商品一覧
以下の条件をすべて満たす場合に表示されます。
キャンペーンのステータスが「有効」である
キャンペーン期間中である（期間外は表示されません）
表示設定で「商品カードにバッジを表示する」がオンである
表示期間・表示条件を設定している場合は、その条件を満たしている
バッジの「期間中」のテキストが設定されている
商品カードの商品が、対象商品に含まれている（対象商品を指定している場合）
注意: 商品カードバッジはキャンペーン期間中のみ表示されます。開始前・終了後は表示されません。表示されるのは「期間中」バッジのテキストだけです。
各キャンペーンの表示設定で、次の項目を設定できます。
項目 | 説明 |
|---|---|
商品カードにバッジを表示する | オンにすると、コレクションページなどの商品カードにバッジを表示します |
対象商品 | 表示する商品またはコレクションを絞り込めます。指定しない場合は全商品が対象です。バリアント単位では指定できません |
期間中のバッジ | テキスト、背景色、文字色、形状を設定します。商品カードに使われるのは「期間中」だけです |
表示期間 | 有効期間に従うか、表示専用の期間を指定します。商品カードバッジは期間中のみ表示されます |
表示条件 | 特定のお客様にだけ表示する場合に設定します |
商品カードバッジの表示位置やサイズはストアフロント設定ページからカスタマイズできます。
項目 | 説明 | デフォルト値 |
|---|---|---|
表示位置 | 左上・左下・右上・右下から選択 | 左上 |
上下左右の間隔（inset） | バッジの表示位置の微調整（px） | 0px |
最大表示件数 | 1つの商品カードに表示するバッジの最大数 | 2件 |
フォントサイズ | バッジのテキストサイズ（px） | 14px |
フォントウェイト | バッジのテキストの太さ | 500 |
商品カードバッジを表示するには、埋め込みアプリの有効化と、キャンペーンの表示設定が必要です。
(1) アプリの設定ガイドからテーマを開く
アプリTOPページの設定ガイドより「テーマでアプリを有効にする」を選択してください。
(2) テーマを選ぶ
セレクトボックスから、アプリを導入したいShopifyテーマを選択してください。
(3) アプリを有効にする
「アプリを有効にする」を選択してください。
(4) テーマエディタで「RuffRuff 購入特典」を有効にする
画面左の「RuffRuff 購入特典」を有効にし、画面右上の「保存」を選択してください。
(1) キャンペーンの「表示設定」を開く
対象のディスカウントキャンペーンまたはギフトキャンペーンの「表示設定」を開いてください。
(2) 「商品カードにバッジを表示する」を有効にする
必要に応じて対象商品またはコレクションを設定してください。指定しない場合は全商品が対象です。
(3) 「期間中」のバッジを設定する
項目の詳細は「キャンペーンの表示設定で設定できる項目」を確認してください。
(4) 設定を保存する
画面右上の「保存」を選択してください。
バッジのテキストはアプリ内の表示設定で言語セレクタから翻訳したい言語を選択して入力します。
商品カードには、キャンペーン期間中のバッジだけが表示されます。位置やサイズは「ストアフロント設定で設定できる項目」で変更できます。
表示はキャンペーン期間中のみ：開始前・終了後はバッジが表示されません。
表示されるのは「期間中」バッジのみ：他の状態（開始前・終了後・配布不可）のバッジは商品カードには表示されません。
テキスト未設定時は非表示：「期間中」のバッジテキストが未入力の場合、バッジは表示されません。
テキストの文字数上限：最大10文字まで設定できます。
対象はコレクションまたは商品のみ指定可能：バリアント単位での絞り込みはできません。
最大表示件数の上限：1つの商品カードに表示できるバッジの上限はデフォルト2件、最大10件です。
動的追加に対応：ページロード後に動的に追加された商品カードにも自動でバッジが注入されます。