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