商品メッセージは、商品ページ内にキャンペーン情報をメッセージとして表示する機能です。実施中のキャンペーンや割引後の価格を、お客様が商品を見ているその場で直接案内できます。
複数のキャンペーンが表示対象の場合は一覧で表示され、表示位置の数値が小さい順に並びます。
デモページで動作を確認できます→ RuffRuff 購入特典 デモ商品一覧
以下の条件をすべて満たす場合に表示されます。
キャンペーンのステータスが「有効」である
表示期間内である（表示期間を指定している場合はその期間、指定しない場合はキャンペーンの有効期間）
表示条件を設定している場合は、その条件を満たしている
表示設定で「商品メッセージを表示する」がオンである
商品ページに表示している商品が、対象商品に含まれている（対象商品を指定している場合）
各キャンペーンの表示設定で、次の項目を設定できます。
項目 | 説明 |
|---|---|
商品メッセージを表示する | オンにすると、商品ページにキャンペーン情報を表示します |
対象商品 | 表示する商品を絞り込めます。指定しない場合は全商品が対象です |
商品メッセージ（テキスト） | 商品ページに表示するメッセージです。ディスカウントキャンペーンでは変数を差し込めます |
アイコン | メッセージに表示するアイコンです |
表示期間 | 有効期間に従うか、表示専用の期間を指定します |
表示条件 | 特定のお客様にだけ表示する場合に設定します |
ディスカウントキャンペーンで商品ディスカウントを設定している場合、メッセージテキストに価格変数を差し込めます。
変数 | 記述形式 | 内容 |
|---|---|---|
元の商品価格 | {{productPrice}} | 割引前の商品価格 |
割引後の商品価格 | {{productDiscountedPrice}} | ディスカウント適用後の商品価格 |
注意: 「{{productDiscountedPrice}}」は、商品ディスカウントが設定されている場合に割引後の価格を表示します。注文ディスカウントまたは配送ディスカウントのみのキャンペーンでは、「{{productPrice}}」と同じ価格になります。ギフトキャンペーンでは、「{{productPrice}}」「{{productDiscountedPrice}}」はどちらも空の文字列になります。
ヒント: バリアントを切り替えると、切り替えたバリアントの価格がリアルタイムで反映されます。
テーマエディタの「商品メッセージ」ブロックで、次の項目を設定できます。
項目 | 説明 |
|---|---|
ヘッダーテキスト | 商品メッセージブロックの上部に表示されるテキスト |
背景色 | ブロック全体の背景色 |
テキスト色 | テキストの色 |
ボーダー色／幅／角丸 | ブロックのボーダースタイル |
余白（マージン／パディング） | ブロックの外側・内側の余白 |
モーダルのデザイン | 詳細モーダルの背景色・テキスト色・ボーダー・ボタンの色 |
商品メッセージを表示するには、テーマブロックの追加と、キャンペーンの表示設定が必要です。
(1) Shopify管理画面からテーマを開く
Shopify管理画面 → オンラインストア → テーマを開いてください。
(2) 商品テンプレートを開く
「カスタマイズ」を選択し、商品テンプレートを開いてください。
(3) 「商品メッセージ」ブロックを追加する
「ブロックを追加」から「商品メッセージ」を追加してください。
(4) 設定を保存する
画面右上の「保存」を選択してください。
(1) キャンペーンの「表示設定」を開く
対象のディスカウントキャンペーンまたはギフトキャンペーンの「表示設定」を開いてください。
(2) 「商品メッセージを表示する」を有効にする
必要に応じて対象商品を設定してください。指定しない場合は全商品が対象です。
(3) テキストとアイコンを設定する
項目の詳細は「キャンペーンの表示設定で設定できる項目」を確認してください。
(4) 表示期間と表示条件を確認する
必要に応じて表示期間と表示条件を設定してください。
翻訳対象 | 方法 |
|---|---|
ヘッダーテキスト | Shopifyの「Translate & Adapt」アプリを使用して翻訳できます。 |
キャンペーンのメッセージ内容 | アプリ内の表示設定で言語セレクタから翻訳したい言語を選択して入力します。 |
商品メッセージ内の各キャンペーンアイテムには、以下の内容が表示されます。
表示要素 | 内容 |
|---|---|
アイコン | 設定したアイコン |
バッジ | キャンペーンの状態に応じたバッジ（開始前・期間中・終了後など） |
メッセージテキスト | 設定したメッセージ（変数あり） |
詳細ボタン | キャンペーンタイトルと説明が両方設定されている場合に表示。選択すると、タイトルと説明をモーダルで確認できます。ディスカウントコードがある場合は、コピーボタンも表示されます。 |
Online Store 2.0対応テーマのみ利用可能：商品メッセージは Online Store 2.0 対応のテーマでのみ使用できます。
表示は商品ページのみ：商品ページ以外のページには表示されません。
複数キャンペーンは一覧表示：複数のキャンペーンが対象の場合は、表示位置の数値が小さい順に一覧で表示されます。
文字サイズ：テーマブロックで設定できるのは、背景色、テキスト色、ボーダー、余白です。文字サイズを変更する設定項目はありません。
メッセージ内の改行：入力欄で改行する場合は「Shift + Enter」を使用してください。