ウィジェット

ウィジェットは、フローティングアイコン・キャンペーン情報・各種ボタン・各種メッセージを制御するパーツ群の総称です。フローティングアイコンを選択するとウィジェットが開き、実施中のキャンペーン一覧をお客様に表示できます。

ウィジェットが表示される条件

ウィジェットが表示されるには、以下の条件をすべて満たすキャンペーンが1件以上必要です。

表示設定で「ウィジェットに表示する」がオンである
表示期間内である（表示期間を指定している場合はその期間、指定しない場合はキャンペーンの有効期間）
表示条件を設定している場合は、その条件を満たしている
キャンペーンタイトルが設定されている

キャンペーンの表示設定で設定できる項目

各キャンペーンの表示設定で、次の項目を設定できます。

項目	説明
ウィジェットに表示する	オン／オフを切り替えます。
キャンペーンタイトル	ウィジェット内に表示されるキャンペーンのタイトルを入力します。
キャンペーン説明	ウィジェット内に表示されるキャンペーンの説明を入力します。
コピーボタン（ディスカウント・手動適用のみ）	ディスカウントコードをコピーするボタンのラベルを入力します。
ギフト追加ボタン（ギフトのみ）	ギフトをカートに追加するボタンのラベルを入力します。
表示位置	複数のキャンペーンがある場合の表示順を数値で指定します。数値が小さい順に表示されます。

埋め込みアプリで設定できる項目

テーマエディタの埋め込みアプリ「RuffRuff 購入特典」で、次の項目を設定できます。

カテゴリ	設定項目
フローティングボタン	表示・非表示、表示位置（左下／右下）、アイコン画像、バッジカラー
ウィジェット全体	背景色、メインテキスト色、サブテキスト色
ウィジェットヘッダー	ヘッダータイトル、ヘッダーサブタイトル
ウィジェットアイテム	背景色、ギフト追加済み背景色、ボタン背景色、ボタンテキスト色、ボタンボーダー色
ポップアップ	背景色、テキスト色、角丸
トースト通知	背景色、テキスト色

設定方法

ウィジェットを表示するには、埋め込みアプリの有効化と、キャンペーンの表示設定が必要です。

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

前提: ウィジェットの表示には、テーマエディタでの埋め込みアプリの有効化が必要です。

(1) Shopify管理画面からテーマを開く

Shopify管理画面 → オンラインストア → テーマを開いてください。

(2) 「カスタマイズ」を選択する

編集するテーマの「カスタマイズ」を選択してください。

(3) 埋め込みアプリ「RuffRuff 購入特典」を開く

テーマエディタの埋め込みアプリアイコンを選択し、「RuffRuff 購入特典」を展開してください。

(4) 設定を変更して保存する

表示やデザインを変更し、画面右上の「保存」を選択してください。

色や位置などの項目は、「埋め込みアプリで設定できる項目」を確認してください。

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

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

ディスカウントキャンペーンまたはギフトキャンペーンを開き、「表示設定」を選択してください。

(2) 「ウィジェットに表示する」を有効にする

ウィジェットに出したいキャンペーンで、「ウィジェットに表示する」をオンにしてください。

(3) 表示する内容を入力する

キャンペーンタイトル、説明、ボタンなどは「キャンペーンの表示設定で設定できる項目」を確認して入力してください。

(4) 表示期間と表示条件を確認する

必要に応じて、表示期間と表示条件を設定してください。

(5) 設定を保存する

画面右上の「保存」を選択してください。

詳細は「表示設定（ディスカウントキャンペーン）」または「表示設定（ギフトキャンペーン）」をご確認ください。

翻訳する方法

翻訳対象	方法
ウィジェットの文言（ヘッダー・ボタンなど）	Shopifyの「Translate & Adapt」アプリを使用して翻訳できます。
キャンペーンのタイトル・説明	アプリ内の表示設定で言語セレクタから翻訳したい言語を選択して入力します。

表示内容と動作

条件を満たしたキャンペーンが、ウィジェット内に一覧で表示されます。

ギフトキャンペーンのとき

状況	挙動
ギフト配布条件を達成	フローティングボタンにバッジが表示される
ギフトをカートに追加	トーストやポップアップの通知が表示され、そのキャンペーンのバッジカウントが減る
カート内ギフトが条件を満たさなくなった	ギフトがカートから自動削除される