Request a Quoteページ

アプリではこれをQuote cart pageと呼びます。ストアフロントでは「Request for quote」というタイトルのページで、/pages/request-for-quoteにあり、アプリでは次のように説明されています。“Shows the quote form and the customer’s quote cart.”

依頼が実際に送信されるのはこのページです。お客様は追加した商品をすべて確認して調整し、フォームに入力して送信します。

ページの設定を見つける

1. Customizeエディタを開く

   Quote settingsに移動します。Request a QuoteページでCustomizeをクリックします。

2. Quote cart pageタブを開く

   エディタにはButton & widget、Quote form、Quote cart page、Success messageの4つのタブがあります。このページの内容はすべてQuote cart pageタブにあります。

3. Pagesセクションを正しいページに設定する

   これは読むだけでなく、確認が必要な設定です。Pagesには2つのページ選択項目があります。Quote cart page（“Shows the quote form and the customer’s quote cart.”）とQuote history page（“Shows a logged-in customer’s past quotes.”）です。

   Quote cart pageをクリックします。パネルが開き、Search by page title or URLボックスと、ストアのページのSelect pageリストが表示されます。各ページにはタイトル、パス、PublishedまたはDraftのバッジが表示されます。Request for quote（/pages/request-for-quote）を選択します。

   検索結果がない場合は、リストの代わりにCreate page automaticallyが表示されます。

   

   見積もりカートページは、このタブで設定します。

4. 保存する

   エディタでの変更は、保存するまで反映されません。何か変更すると、すぐに上部に保存バーが表示されます。そこでSaveをクリックします。

   未保存の変更がある状態で離れようとすると、アプリは「Discard all unsaved changes」と表示し、“If you discard changes, you’ll delete any edits you made since you last saved.“と警告します。編集内容を本当に破棄する場合を除き、Continue editingを選択して保存してください。

危険

ピッカーでDraftと表示されるページは、Shopifyで未公開の状態です。アプリの設定にかかわらず、お客様にはNot Foundが表示されます。先にオンラインストア > ページで公開してください。

お客様をこのページに誘導する

ページを設定しただけでは、誰もそのページに移動しません。設定する経路は2つあり、どちらもSaveで完了し、ストアフロントで確認します。

経路1：見積もりボタンから直接移動させる

1. Button & widgetタブを開く

   CustomizeでButton & widgetタブをクリックします。

2. Click actionをRedirect to quote pageに設定する

   Click actionの見出しの下でRedirect to quote pageを選択します。アプリ自身の説明は「Go directly to quote cart page」です。他の2つの選択肢では、お客様は現在のページにとどまります。Open quote form popupとAdd product to quote cartです。

   

   ノート

   このタブの下のほうにAdd to quoteという見出しもあります。そこには編集可能な価格、バリエーションセレクタ、ログイン必須のチェックボックスがあり、リダイレクトの設定はありません。「Add to quote」を指示している古い手順を参照している場合は、タブのもっと上を確認してください。

3. 移動先のページを確認する

   Quote cart pageタブに戻り、前述のとおりPages > Quote cart pageがRequest for quoteを指していることを確認します。リダイレクトとページ設定は、2か所にまたがる1つの作業です。どちらか一方だけ設定すると、ボタンはお客様を役に立たない場所に送ってしまいます。

4. 保存し、お客様として試す

   Saveをクリックします。次に、ストアフロントの商品ページを開き、見積もりボタンをクリックします。その商品がすでに見積もりカートに入った状態で、/pages/request-for-quoteに移動するはずです。

経路2：フローティングウィジェットから開けるようにする

1. Enable Quote Cart Widgetを開く

   Quote cart pageタブでEnable Quote Cart Widgetまでスクロールします。“Shows a floating button on your storefront so customers can open their quote cart from any page.”

2. ウィジェットをオンにする

   Enable quote cart widgetをオンにします。その他の設定は、オンにした後にのみ表示されます。

3. Actionを見積もりカートページに設定する

   Actionは、クリックしたときの動作を決めます。Go to quote cart pageを選択します。アプリのバージョンによっては、同じ選択肢がGo to quote pageと表示されます。もう1つのOpen quote popupは、見積もりをポップアップで開き、お客様をこのページには移動させません。その動作が必要な場合にのみ選択してください。

   見落とされやすい設定です。ウィジェットをオンにしてもOpen quote popupのままだと、見積もりページへのリンクが壊れているように見えます。

4. 文言と見た目を設定する

   Textは、ウィジェット自体のラベルです。Positionで配置を決めます。Bottom right、Half bottom right、Half top right、Bottom left、Half bottom left、Half top leftから選べます。Border radius、Text color、Background colorでスタイルを仕上げます。ポップアップの動作を選んだ場合は、Quote popup primary colorが適用されます。

5. 保存し、お客様として試す

   Saveをクリックします。ストアフロントの任意のページを開くと、フローティングウィジェットが表示されるはずです。デフォルトでは、**Quote (n)**と、含まれる商品数が表示されます。クリックすると、見積もりカートページに直接移動します。

ノート

2つの経路は、どちらか一方に限る必要はありません。お客様が複数の商品をまとめて選ぶストアでは、通常、ボタンをAdd product to quote cartにし、ウィジェットもオンにして、ページにいつでもワンクリックで移動できるようにします。フローティング見積もりウィジェットとクリック後の動作を設定するを参照してください。

お客様に表示する商品の詳細を選ぶ

Product list columnsは、“The product details shown as columns in the customer’s quote cart.“を制御します。クリックするとピッカーが開き、Search product columnsボックスと、Choose Product list columnsの下に列の一覧が表示されます。選んだ列はチップとして追加され、あとから削除することもできます。

選べる列は、Vendor、SKU、Option、Price、Quote prices、Total、Subtotal、Noteです。この設定を一度も変更していない場合は、OptionとPriceが使われています。

列	表示する場面
Vendor	複数のブランドを再販していて、買い手がブランド別に注文する場合。
SKU	買い手がコードで注文する場合。取引先や卸売のお客様は通常これに該当します。
Option	商品にバリエーションがあり、お客様が選んだものを確認する必要がある場合。
Price	定価を公開していて、依頼を作成している間にお客様に見てもらいたい場合。
Quote prices	お客様が希望価格を提示できるようにしている場合。お客様に価格を提案してもらうを参照してください。
Total	お客様が数量単位で注文し、明細ごとの合計が依頼の規模を判断する助けになる場合。
Subtotal	明細ごとではなく、依頼全体の金額を表示したい場合。
Note	お客様が個々の明細について、仕上げ、期限、代替品などを伝える必要がある場合。

見積もりカートが使用するストアフロントのページを選択します。

ノート

ストアフロントで価格を非表示にしている場合は、ここでもPriceとTotalをオフにしたままにしてください。見積もりカートに価格を表示すると、他の場所で価格を隠している意味がなくなります。

注意

TotalとSubtotalは、新しいストアフロントバージョンでのみ利用できます。リストに見つからない場合は、それが理由です。他の6つは常に表示されます。

フォームのレイアウトを選ぶ

Quote form appearanceは、“Controls how the quote form looks on the quote cart page.“を制御します。選択肢は2つあります。

オプション	お客様に表示される内容	適した場面
Multiple step	フォームがステップに分割され、お客様は1つずつ進みます。	会社情報、配送先・請求先住所、支払い条件など、項目の多いフォーム。
Single page	すべてのフィールドが1画面に上から下へ表示されます。	お客様が全体をひと目で確認できる短いフォーム。

ノート

長いフォームを1ページに収めると、最後まで入力されずに離脱されてしまいます。会社情報や住所のセクションを含むB2Bフォームを作成した場合は、Multiple stepを選択してください。

注意

Single pageが「This feature requires the new storefront version」というメッセージでロックされている場合、それはプランや不具合が原因ではありません。この選択にはアプリの最新のストアフロントバージョンが必要で、それまではページにMultiple stepが使用されます。移行を希望する場合は、サポートにお問い合わせください。

Multiple stepフォームの表示

Multiple stepを選択すると、ストアフロントのページはRequest a Quoteという見出しと「Tell us what you need and we will contact you soon.」という一文で始まり、その後に番号付きの3つのステップが続きます。

1. Products selection

   Quote Cartには、お客様が集めた商品がすべて、Product、Quantity、Price、Totalの列とともに一覧表示されます。Enable Quote Sectionsをオンにしている場合、カートの冒頭に“Products are organized into quote sections.“と表示され、最初のグループにはSection 1という名前が付きます。

   このステップの最後には、Continue ShoppingとNext stepがあります。

   

   /pages/request-for-quoteのステップ1、Products selection。

2. Contact information

   このステップでは、Form builderで作成したセクション（Contact information、Company information、Shipping address）が表示されます。

   その上には、“Already have an account? Log in to auto-fill your contact and company information.“というメッセージと、Loginリンクがあります。

   

   ステップ2、Contact information。フィールドの上にログインを促すメッセージがあります。

3. Review information

   最後のステップはReview informationで、お客様は依頼を送信する前に、商品と入力した内容を確認します。

   

   お客様は、送信前に依頼内容を確認します。

ヒント

“Already have an account? Log in to auto-fill your contact and company information.“というメッセージは、まだサインインしていないお客様向けです。ログインを促し、アプリがフィールドを自動入力できるようにします。すでにサインインしているお客様には、ログインする必要はありません。

送信後にお客様に表示される内容

依頼が送信されると、アプリが設定した成功メッセージを表示します。デフォルトではThank you、「Thank you for submitting a request a quote!」とContinue Shoppingボタンです。

この文言は、このタブにはありません。同じCustomizeエディタのSuccess messageタブにあり、お客様を独自のページに移動させたい場合のために、After submitとRedirect to custom URLもあります。

ノート

メールはさらに別の設定です。Success messageタブには次のようにあります。“Customer confirmation and admin notification emails are managed in Other settings.”お客様に送信されるメールを参照してください。

タブのその他の設定

設定	内容
Enable Quote Sections	"Lets customers group the products in their quote cart into named sections." 見積もり商品グループを参照してください
Enable Quote Cart Widget	"Shows a floating button on your storefront so customers can open their quote cart from any page." 上記の経路2で設定し、フローティング見積もりウィジェットで詳しく説明しています

Enable quote sectionsをオンにすると、Default section nameと、Customer optionsの下のAdd new sections、Rename sectionsといった設定が追加で表示されます。さらに2つのオプション、Move products between sectionsとAdd note per sectionにはComing soonと表示されています。

お客様がページにたどり着く方法

経路	適した場面
Click actionをRedirect to quote pageに設定	お客様が通常1つの商品ずつ見積もりを依頼するため、先に集める必要がない場合。
Click actionをAdd product to quote cartに設定し、その後フローティングウィジェットを使用	お客様が閲覧しながら複数の商品を集め、まとめて確認する場合。
ポップアップのPrimary button（デフォルトはView Quote）	商品が追加されるたびに確認を表示する場合。
ナビゲーションメニューのリンク	お客様がいつでも戻れるように、併せて追加しておくと便利です。

最初の3つはButton & widgetタブで設定します。クリック後の動作を設定するを参照してください。メニューリンクはShopifyの設定です。メニューに見積もりリンクを追加するを参照してください。

注意

ページに見積もりフォームと見積もりカートが表示されない場合は、トラブルシューティングを参照してください。

次のステップ

• 見積もり履歴ページ — お客様が送信済みの見積もりを確認する場所
• メニューに見積もりリンクを追加する — ナビゲーションからページにリンクします
• 見積もりページのテキストを編集する — ページに独自の文言を追加します