---
title: "ストアに「見積を依頼する」ボタンを追加する"
description: "QuotWayのテーマアプリブロックで、商品ページとカートに「見積を依頼する」ボタンを配置します。テーマのコードの編集は不要です。"
url: "https://www.quotway.com/ja/docs/storefront/quote-button-placement"
type: "documentation"
category: "storefront"
updated: "2026-09-30"
locale: "ja"
source: "QuotWay - B2B Quote & Negotiation App for Shopify"
---

# ストアに「見積を依頼する」ボタンを追加する

**読了時間：** 4 分。
**最終更新：** 2026年6月20日
**対象：** ストアフロントに**見積を依頼する**ボタンを配置するマーチャント。商品ページ、カート、独自のテーマ、ヘッドレスの構成を扱います。

テーマアプリブロックで、Shopifyのストアに**見積を依頼する**ボタンを追加できます。テーマのコードの編集は不要です。QuotWayは、Shopifyのテーマエディターからテーマに置く二つのストアフロントのブロックを提供しています。商品ページ用と、カートページ用です。ブロックを配置し、対象の指定ルールが商品に合致すると、バイヤーには**カートに追加**の横（またはその代わり）に**見積を依頼する**ボタンが表示されます。

## 何が達成できるか

この記事の終わりには、対象の指定ルールに合致するすべての商品について、公開中のテーマの商品ページとカートに**見積を依頼する**ボタンが表示されます。

## 始める前に

- QuotWayがインストールされ、アプリ埋め込みが有効であること。分からない場合は[アプリ埋め込みと有効化](./app-embed-and-activation.md)をご覧ください。
- 有効な対象の指定ルールが少なくとも一つ存在し、どの商品にボタンを表示するかが分かるようになっていること。[対象の指定ルール](../targeting/targeting-rules.md)をご覧ください。
- Online Store 2.0のテーマを使っていること（Dawn、Horizon、そして最近のテーマの多くが該当します）。ブロックはテーマエディターから追加され、テーマのコードに触れることはありません。

## 二つのブロックの役割

QuotWayのストアフロントのブロックはテーマアプリブロックです。Shopifyのテーマエディターで配置します。貼り付けるLiquidも、移行もありません。

- **QuotWay Quote Button** - 商品ページに置き、**カートに追加**の横またはその代わりになります。
- **QuotWay Cart Quote Button** - カートページに置き、バイヤーがカート全体について見積を依頼できるようにします。

## 商品ページにボタンを追加する

1. QuotWayの管理画面から**有効化の状態 → テーマエディターを開く**を選ぶか、**Shopifyの管理画面 → オンラインストア → テーマ → カスタマイズ**へ行きます。
2. 左上のページの選択欄で**既定の商品**を選びます。
3. 主要な商品のセクションの下で**ブロックを追加**を選びます。
4. **アプリ → QuotWay Quote Button** を見つけて追加します。
5. ブロックを希望の場所へ移動します。編集画面では、**カートに追加**の上、下、横のいずれにも配置できます。
6. **保存**を選びます。

これで、対象の指定ルールに合致するすべての商品にボタンが表示されます。合致するルールのない小売の商品は、通常の**カートに追加**の挙動のままです。

## カートページにボタンを追加する

1. 同じテーマエディターで、ページの選択欄から**カート**を選びます。
2. カートのセクションの下で**ブロックを追加**を選び、**アプリ → QuotWay Cart Quote Button** を追加します。
3. **購入手続き**のボタンの上に配置し、バイヤーが両方、つまり**見積を依頼する**と**購入手続き**を見られるようにします。
4. **保存**を選びます。

これでバイヤーは、カート全体を一つの見積依頼に変えられます。

## ボタンはどのようにストアに馴染むか

- **表示の文言** - 既定は**見積を依頼する**で、設定 → 文言から言語ごとに編集できます。
  見積パネル自体の表示（最初のステップにある **← 買い物を続ける** ボタンを含みます。このボタンはパネルを閉じ、バイヤーが追加した内容をすべて残します）も、同じ場所で編集・翻訳できます。
- **見た目** - ボタンは既定でテーマのボタンの体裁を使います。特定の色を設定するには、ブロックの設定で変更してください。
- **幅** - 携帯では全幅、デスクトップでは行内に収まります。
- **誰に見えるか** - ボタンは、有効な対象の指定ルールに合致する商品にのみ表示されます。一つの商品が見積の対象でありながら、他のストアの商品は通常どおり購入手続きに進む、という運用もできます。[対象の指定ルール](../targeting/targeting-rules.md)をご覧ください。

## 独自のテーマ

商品のセクションに**ブロックを追加**が表示されない場合、そのテーマは従来のLiquidのセクション（Online Store 2.0より前）を使っている可能性が高いです。アプリブロックは2.0（JSON）のテンプレートにのみ描画されます。QuotWayのブロックを使うには、Online Store 2.0のテーマへ切り替えるか、商品のテンプレートをJSONのテンプレートへ更新してください。

JSONの商品テンプレートを持つ独自に構築したテーマの場合は、`{% schema %}` がアプリブロックへの対応（`"blocks": [{ "type": "@app" }]`）を宣言しているセクションの中にブロックを配置してください。QuotWayのブロックは、アプリブロックに対応したどのセクションにも描画されます。

## ヘッドレスのストアフロント

ヘッドレスのストアフロント（たとえばHydrogen）を運用している場合、テーマアプリブロックは描画されません。テーマアプリブロックはShopifyのテーマの中にのみ存在するからです。

ヘッドレスのストアフロントで見積依頼を受け付けるには、ストアフロントのバックエンドから[`POST /v1/quotes`](/docs/api/create-quotes)でQuotWay APIへ送信します。こうして送られた依頼は、ボタンからの依頼と同じターゲティングルール、見積フォームの項目、自動化ルールを通り、チームがいつもどおり価格を付けます。Enterpriseプランで利用できます（14日間の無料トライアル中も含みます）。APIキーはサーバー側に置き、ブラウザのコードには決して含めないでください。

その他のプランでは、見積を提供するサポートされた方法は、他の構成がヘッドレスであっても、ボタンを出したいストアフロントの画面についてはShopifyのOnline Store 2.0のテーマを保つことです。

## よくある落とし穴

- **ボタンが表示されない。** 次の順に確認してください。（1）アプリ埋め込みが有効であること。有効化の状態の画面に緑の印が表示されます。（2）商品が有効な対象の指定ルールに合致していること。[対象の指定ルール](../targeting/targeting-rules.md)をご覧ください。（3）ブロックがテーマエディターで配置され、保存されていること。
- **ボタンは表示されるが、入力欄が開かない。** ブラウザのコンソールでスクリプトの読み込みのエラーを確認してください。テーマがコンテンツセキュリティポリシーで第三者のスクリプトを制限している場合は、QuotWayのストアフロントのスクリプトの経路を許可してください。
- **携帯でボタンがカートに追加と重なる。** テーマエディターでブロックを並べ替え、QuotWayのブロックを**カートに追加**の下へ移動してください。
- **表示の言語が違う。** 設定 → 文言で、言語ごとにボタンの文言を編集してください。

> **価格の非表示についての補足。** QuotWayは、Starter以上でストアフロントの価格を非表示にし、代わりに**見積を依頼する**ボタンを表示できます。Starterではそれは視覚的な非表示です（バイヤーに何が見えるかを制御します）。Professional以上では、検索エンジンにも安全な非表示により、ログインしていない訪問者に対してページのソースと構造化データからも価格が取り除かれます。[検索エンジンから価格を隠す](./hide-price-from-search-engines.md)をご覧ください。

## 関連記事

- [アプリ埋め込みと有効化](./app-embed-and-activation.md) - 埋め込みを有効にし、有効化の状態の画面を読み取ります。
- [対象の指定ルール](../targeting/targeting-rules.md) - どの商品とどのバイヤーに見積ボタンを見せるかを選びます。
- [見積フォームを設定する](../quote-form/configure-the-quote-form.md) - バイヤーが見積を依頼した後に記入する内容を設定します。