ストアに「見積を依頼する」ボタンを追加する
読了時間： 4 分。 最終更新： 2026年6月20日 対象： ストアフロントに見積を依頼するボタンを配置するマーチャント。商品ページ、カート、独自のテーマ、ヘッドレスの構成を扱います。
テーマアプリブロックで、Shopifyのストアに見積を依頼するボタンを追加できます。テーマのコードの編集は不要です。QuotWayは、Shopifyのテーマエディターからテーマに置く二つのストアフロントのブロックを提供しています。商品ページ用と、カートページ用です。ブロックを配置し、対象の指定ルールが商品に合致すると、バイヤーにはカートに追加の横（またはその代わり）に見積を依頼するボタンが表示されます。
何が達成できるか
この記事の終わりには、対象の指定ルールに合致するすべての商品について、公開中のテーマの商品ページとカートに見積を依頼するボタンが表示されます。
始める前に
- QuotWayがインストールされ、アプリ埋め込みが有効であること。分からない場合はアプリ埋め込みと有効化をご覧ください。
- 有効な対象の指定ルールが少なくとも一つ存在し、どの商品にボタンを表示するかが分かるようになっていること。対象の指定ルールをご覧ください。
- Online Store 2.0のテーマを使っていること（Dawn、Horizon、そして最近のテーマの多くが該当します）。ブロックはテーマエディターから追加され、テーマのコードに触れることはありません。
二つのブロックの役割
QuotWayのストアフロントのブロックはテーマアプリブロックです。Shopifyのテーマエディターで配置します。貼り付けるLiquidも、移行もありません。
- QuotWay Quote Button - 商品ページに置き、カートに追加の横またはその代わりになります。
- QuotWay Cart Quote Button - カートページに置き、バイヤーがカート全体について見積を依頼できるようにします。
商品ページにボタンを追加する
- QuotWayの管理画面から有効化の状態 → テーマエディターを開くを選ぶか、Shopifyの管理画面 → オンラインストア → テーマ → カスタマイズへ行きます。
- 左上のページの選択欄で既定の商品を選びます。
- 主要な商品のセクションの下でブロックを追加を選びます。
- アプリ → QuotWay Quote Button を見つけて追加します。
- ブロックを希望の場所へ移動します。編集画面では、カートに追加の上、下、横のいずれにも配置できます。
- 保存を選びます。
これで、対象の指定ルールに合致するすべての商品にボタンが表示されます。合致するルールのない小売の商品は、通常のカートに追加の挙動のままです。
カートページにボタンを追加する
- 同じテーマエディターで、ページの選択欄からカートを選びます。
- カートのセクションの下でブロックを追加を選び、アプリ → QuotWay Cart Quote Button を追加します。
- 購入手続きのボタンの上に配置し、バイヤーが両方、つまり見積を依頼すると購入手続きを見られるようにします。
- 保存を選びます。
これでバイヤーは、カート全体を一つの見積依頼に変えられます。
ボタンはどのようにストアに馴染むか
- 表示の文言 - 既定は見積を依頼するで、設定 → ストアフロントの文言から言語ごとに編集できます。
- 見た目 - ボタンは既定でテーマのボタンの体裁を使います。特定の色を設定するには、ブロックの設定で変更してください。
- 幅 - 携帯では全幅、デスクトップでは行内に収まります。
- 誰に見えるか - ボタンは、有効な対象の指定ルールに合致する商品にのみ表示されます。一つの商品が見積の対象でありながら、他のストアの商品は通常どおり購入手続きに進む、という運用もできます。対象の指定ルールをご覧ください。
独自のテーマ
商品のセクションにブロックを追加が表示されない場合、そのテーマは従来のLiquidのセクション（Online Store 2.0より前）を使っている可能性が高いです。アプリブロックは2.0（JSON）のテンプレートにのみ描画されます。QuotWayのブロックを使うには、Online Store 2.0のテーマへ切り替えるか、商品のテンプレートをJSONのテンプレートへ更新してください。
JSONの商品テンプレートを持つ独自に構築したテーマの場合は、{% schema %} がアプリブロックへの対応（"blocks": [{ "type": "@app" }]）を宣言しているセクションの中にブロックを配置してください。QuotWayのブロックは、アプリブロックに対応したどのセクションにも描画されます。
ヘッドレスのストアフロント
ヘッドレスのストアフロント（たとえばHydrogen）を運用している場合、テーマアプリブロックは描画されません。テーマアプリブロックはShopifyのテーマの中にのみ存在するからです。
ヘッドレスの連携のための公開されサポートされたQuotWayのストアフロントAPIは、今後の予定にあり、まだ利用できません。それが提供されるまで、見積を提供するサポートされた方法は、他の構成がヘッドレスであっても、ボタンを出したいストアフロントの画面についてはShopifyのOnline Store 2.0のテーマを保つことです。
よくある落とし穴
- ボタンが表示されない。 次の順に確認してください。（1）アプリ埋め込みが有効であること。有効化の状態の画面に緑の印が表示されます。（2）商品が有効な対象の指定ルールに合致していること。対象の指定ルールをご覧ください。（3）ブロックがテーマエディターで配置され、保存されていること。
- ボタンは表示されるが、入力欄が開かない。 ブラウザのコンソールでスクリプトの読み込みのエラーを確認してください。テーマがコンテンツセキュリティポリシーで第三者のスクリプトを制限している場合は、QuotWayのストアフロントのスクリプトの経路を許可してください。
- 携帯でボタンがカートに追加と重なる。 テーマエディターでブロックを並べ替え、QuotWayのブロックをカートに追加の下へ移動してください。
- 表示の言語が違う。 設定 → ストアフロントの文言で、言語ごとにボタンの文言を編集してください。
価格の非表示についての補足。 QuotWayは、Starter以上でストアフロントの価格を非表示にし、代わりに見積を依頼するボタンを表示できます。Starterではそれは視覚的な非表示です（バイヤーに何が見えるかを制御します）。Professional以上では、検索エンジンにも安全な非表示により、ログインしていない訪問者に対してページのソースと構造化データからも価格が取り除かれます。検索エンジンから価格を隠すをご覧ください。
関連記事
- アプリ埋め込みと有効化 - 埋め込みを有効にし、有効化の状態の画面を読み取ります。
- 対象の指定ルール - どの商品とどのバイヤーに見積ボタンを見せるかを選びます。
- 見積フォームを設定する - バイヤーが見積を依頼した後に記入する内容を設定します。
解決しませんか？サポートチームがお手伝いします。