ストアフロント通知

お客様が商品をカートに追加したり、アプリのカートドロワーを変更したり、チェックアウトしたり、割引コードを適用したりすると、アプリはストアフロントに短い成功メッセージまたはエラーメッセージを表示します。Storefront notifications では、これらのメッセージの見た目を選択できます。

スタイルは3種類あります。

• Toast：画面の隅に表示される小さなメッセージ。
• Modal：画面の中央に表示され、OK ボタンがあるポップアップ。お客様が閉じるまで表示されたままになります。
• Banner：画面の上部または下部に表示されるバー。

管理手順

1. Storefront notificationsを開く

   アプリで Add-on Features をクリックし、Storefront notifications を見つけて Customize をクリックします。

2. デフォルトのスタイルを選ぶ

   Notification style で、Default style として Toast、Modal、Banner のいずれかを選択します。次の手順で機能ごとに別のスタイルを選ばない限り、すべてのメッセージにこのスタイルが使用されます。

   

3. 機能ごとにスタイルを選ぶ（任意）

   Style per feature で、Default のままにするか、メッセージのグループごとに別のスタイルを選択します。

   • Add to cart：アプリがカートに追加する商品。商品ページ、Quick Buy、Quick Order Form、アプリのWholesaleカートドロワーからの追加が対象です。
   • Cart updates：アプリのWholesaleカートドロワーでの変更。カートの更新や、住所の保存・削除などです。
   • Checkout & Pay later：チェックアウトのエラーと、Pay later注文の成功メッセージおよびエラーメッセージ。
   • Discount code：アプリの割引コードボックスのメッセージ。たとえば、コードが受け付けられたときや、カート内の商品に使用できないときなどです。

   例：デフォルトのスタイルは Toast のままにし、Checkout & Pay later には Modal を選びます。これにより、お客様がPay laterの確認メッセージを見逃しません。

4. 各スタイルをカスタマイズする

   各スタイルの外観を、それぞれのセクションで設定します。色を空欄にすると、デフォルトの外観が使用されます。

   Toastスタイル

   • Auto hide：デフォルトでオンです。オフにすると、お客様が閉じるまで各トーストが画面に表示されたままになります。
   • Design：Classic、Card、Soft、Pill。
   • Position：Top right、Top left、Bottom right、Bottom left。
   • Auto hide after：2～30秒。デフォルトは5秒です。
   • Success background、Error background、Text color。

   Modalスタイル

   • Design：Classic、Card、Dialog。
   • Button background と Button text：OK ボタンの色。
   • Corner radius：0～40 px。

   Bannerスタイル

   • Auto hide：デフォルトでオンです。オフにすると、お客様が閉じるまでバナーが表示されたままになります。
   • Design：Classic、Soft、Floating。
   • Position：Top または Bottom。
   • Auto hide after：2～30秒。デフォルトは5秒です。
   • Success background、Error background、Text color。

5. プレビューして保存する

   Preview で Preview template を選択し、Show success または Show error をクリックして、設定を反映したスタイルを確認します。プレビューには、ストアフロントと同じテンプレートが使用されます。

   

   Save をクリックします。

知っておくと便利なこと

• お客様は、Modal を OK、× ボタン、モーダルの外側のクリック、または Esc キーで閉じます。モーダルが自動的に閉じることはありません。
• トーストは、同時に最大5件まで画面に表示できます。6件目が届くと、最も古いものが削除されます。
• モーダルとバナーは、それぞれ同時に1つだけ表示されます。新しいメッセージが、表示中のメッセージと置き換わります。
• Pay later 注文が成功して成功メッセージが表示されると、アプリはカートを空にしてページを再読み込みします。Modal の場合は、メッセージを読めるように、お客様がポップアップを閉じたときにページが再読み込みされます。Toast または Banner の場合は、数秒後に再読み込みされます。
• メッセージのテキストは、ほかのストアフロントのテキストと同じ方法で編集します。アプリの一部機能のコンテンツを編集・翻訳するをご覧ください。
• 別の通知表示をご希望ですか？ Notification style セクションの Contact support をクリックしてください。サポートチームがお手伝いします。

ノート

**重要：**アプリの埋め込みがテーマで有効になっていることを確認してください。有効でない場合、これらの設定はストアフロントに適用されません。テーマでアプリを有効化・無効化するをご覧ください。

サポートが必要ですか？

手順の途中で問題が発生した場合は、[email protected] までお問い合わせください。