フローティング見積もりウィジェット
お客様がストアのどのページからでも見積もりカートを開けるフローティングボタンを有効にします。
Enable Quote Cart Widget — 「Shows a floating button on your storefront so customers can open their quote cart from any page.」
ウィジェットは、すべてのページの端に固定される見積もりボタンです。カートアイコンのように動作し、お客様が何かを追加すると待機中の商品数が表示されます。1回クリックすると、見積もりカートページまたは見積もりポップアップに直接移動できるため、お客様はページを探さなくても、追加した内容を確認してフォームに入力できます。
-
見積もりカートの設定を開く
Section titled “見積もりカートの設定を開く”アプリでQuote settingsに移動してCustomizeをクリックし、Quote cart pageタブを開きます。
-
Enable Quote Cart Widgetをオンにする
Section titled “Enable Quote Cart Widgetをオンにする”Enable Quote Cart Widgetはタブの最後のブロックで、Enable Quote Sectionsの下にあります。操作するのは、ヘッダーの右端にあるトグルです。オンにすると、ブロックが展開して6つの設定が表示されます。
-
6つのウィジェット設定を行う
Section titled “6つのウィジェット設定を行う”Text、Action、Position、Border radius、Text color、Background colorを順に設定します。それぞれの内容は下の表で説明しています。右側のPreviewパネルには、変更に合わせたウィジェットが表示されます。
選択できる色は、背景とテキストの2つだけです。
-
保存してストアフロントを確認する
Section titled “保存してストアフロントを確認する”エディタの右上にあるSaveをクリックしてから、ストアフロントで商品を見積もりに追加します。画面の端にウィジェットが表示され、Quoteというラベルと、括弧内の商品数が表示されます。
お客様に表示されるウィジェット。ストアのすべてのページに表示されます。
すべてのウィジェット設定
Section titled “すべてのウィジェット設定”| 設定 | 値とデフォルト | 内容 |
|---|---|---|
| Text | Quote ({numOfItem})として表示されます | ウィジェットに表示される文言。{numOfItem}はお客様の見積もりに含まれる商品数に置き換えられるため、Quote (3)のように表示されます。このトークンを削除すると、数のない通常のラベルが表示されます。 |
| Action | Go to quote cart page · Open quote popup | ウィジェットをクリックしたときの動作。下記をご覧ください。 |
| Position | Half bottom right · Bottom right · Half top right · Half bottom left · Bottom left · Half top left | ウィジェットを固定する端と、上下の位置。「Half」のオプションは画面の側面に固定し、Bottom rightとBottom leftは隅に配置します。 |
| Border radius | px単位の数値（0から） | ウィジェットの角の丸み。0は角が丸くない状態です。 |
| Text color | 色 | 文言の色。 |
| Background color | 色 | ウィジェット自体の色。 |
お客様の移動先
Section titled “お客様の移動先”移動先はActionで決まり、2つの値では動作が異なります。
| Action | お客様がクリックしたときの動作 |
|---|---|
| Go to quote cart page | ウィジェットは見積もりカートページへのリンクになります。/pages/request-for-quoteにあるストアフロントのページで、「Shows the quote form and the customer's quote cart.」と表示されます。お客様は、見ていたページから移動します。 |
| Open quote popup | すでに見ているページの上に見積もりポップアップが開きます。お客様はカタログ内の閲覧位置から離れずに済みます。 |
見積もりカートページとウィジェットは、どちらも同じQuote cart pageタブで設定するため、ページ自体の名前とパスはウィジェットブロックのすぐ上にあります。
どちらを選ぶかは、お客様が見積もりをどのように作成するかによって決まります。依頼する前に複数の商品を集める場合は、Go to quote cart pageが適しています。見積もりカートページには数量付きのリスト全体が表示され、お客様が確認したいのはそれだからです。1つの商品を追加してすぐに送信する場合は、Open quote popupのほうがページの読み込みを省けます。
ウィジェットが表示されない場所
Section titled “ウィジェットが表示されない場所”アプリは、見積もりカートページ自体ではウィジェットを非表示にします。お客様がすでに見積もりを見ている場合、リンク先がないためです。ストアフロントのそれ以外の場所では、ウィジェットがお客様に付いて回ります。
ページの中で目立ちつつ、購入ボタンと競合しないBackground colorと、ひと目で読める十分なコントラストのText colorを選びます。スマートフォンでも確認してください。フローティング要素は、ライブチャットのバブルやCookieバナーとスペースを取り合うため、表示される場所で読みやすいか確認する必要があります。他の要素と重なる場合は、ウィジェットをオフにするのではなく、Positionで移動してください。Half top rightとHalf top leftは、ほとんどのチャットツールが使用する下隅のコントロールと重なりません。
ウィジェットのテキストを翻訳する
Section titled “ウィジェットのテキストを翻訳する”Textに入力した内容はストアフロントのテキストであるため、お客様が読む他の内容と同様に、アプリの翻訳機能で処理されます。翻訳済みのストアでも英語のままにせず、そこで言語ごとに文言を設定してください。詳しくはTranslate storefront textをご覧ください。
お困りの場合
Section titled “お困りの場合”ウィジェットがストアフロントの他の要素と重なり、Positionでも解消できない場合は、スクリーンショットをお送りください。詳しくはContact supportをご覧ください。
次のステップ
Section titled “次のステップ”- Set the after-click behavior — 商品が追加されたときの動作を制御する
- Request a Quote page — ウィジェットが開く見積もりカートページ
- Quote history page — お客様が過去の見積もりを確認する場所