価格を隠して「見積を依頼する」ボタンを出す
読了時間: 6 分。 対象: 卸売とBtoBのバイヤーのために、Shopifyのストアフロントで小売価格を隠し、その場所に「見積を依頼する」ボタンを表示したいマーチャント。
⚠️ 単独では、価格の非表示はストアフロントの視覚的な非表示です。バイヤーに何が見えるかを制御しますが、ページのソース、構造化データ、Open Graphのタグから価格を取り除くことはしません。価格を検索エンジンからも遠ざけるには、検索エンジンにも安全な非表示を追加してください(Professional以上の機能で、Price Gateブロックと短いテーマの編集、そして組み込みの漏れ確認です)。検索エンジンから価格を隠すをご覧ください。
Shopifyで価格を非表示にするとは、ストアフロントの価格を「見積を依頼する」ボタン(または自分で決めたメッセージ)に置き換えることです。それにより卸売とBtoBのバイヤーは、公開価格を見るのではなく価格を尋ねます。QuotWayでは、プランに応じて有効にし、価格を取り除くか文言に置き換えるかを選び、どの商品とどのバイヤーに適用するかを正確に指定できます。この記事では設定を順に説明し、価格の非表示が検索エンジンに対して何ができて何ができないのかを率直にお伝えします。
何が得られるか
価格の非表示が有効なとき、狙ったバイヤーには、小売価格の代わりに、価格のあった場所に「見積を依頼する」ボタンが見えます。見積ボタンを誰に見せるかを決めるのと同じ対象の指定が、誰の価格を隠すかも決めるため、小売の買い物客は通常どおり購入手続きを進め、卸売のバイヤーには見積の導線が届きます。Shopify標準の「カートに追加」と「今すぐ購入」のボタンを隠して、見積の依頼だけが進む道になるようにもできます。
⚠️ 価格の非表示には Starter、Professional、Enterprise のいずれかのプランが必要です。無料の Lite プランでは、「見積を依頼する」ボタンの追加と、標準の「カートに追加」「今すぐ購入」のボタンの非表示はできますが、価格そのものは表示されたままです。
始める前に
- QuotWayがインストールされ、アプリ埋め込みが有効であること。アプリ埋め込みと有効化をご覧ください。
- Starter プラン以上であること(有料プランの14日間のトライアル中は、価格の非表示を利用できます)。
- ストア全体ではなく特定の商品やバイヤーにだけ価格を隠したい場合は、対象の指定ルールが少なくとも一つあること。対象の指定ルールをご覧ください。
価格の非表示を有効にする方法
以下の手順は HowTo のスキーマを出力します。
- 価格の非表示の設定を開きます。 QuotWayの管理画面で見積ボタン → 価格へ行きます。
- 非表示の方式を選びます。 価格をどう置き換えるかを選択します。
- 隠すだけ - 価格の要素を取り除き、その場所には何も表示しません。
- 隠して文言を表示 - 価格を自分で決めたメッセージに置き換えます。たとえば「取引価格は見積をご依頼ください」や「価格はお問い合わせください」です。メッセージはロケールごとに設定できるため、海外のバイヤーには自分の言語で表示されます。
- 置き換えの文言を設定します(「隠して文言を表示」を選んだ場合)。 価格のあった場所にバイヤーが見るメッセージを入力します。短く行動を促す形に保ってください。「見積を依頼する」ボタンの隣に置かれます。
- どこに適用するかを選びます。 適用先を、カバーしたいストアフロントの画面に設定します。
- 商品ページ - 商品ページそのもので価格を隠します。
- コレクションページ - コレクションの商品カードで価格を隠します。
- すべてのページ - 商品ページ、コレクション、検索、ホームにわたって価格を隠します。
- 対象の指定の方式を選びます。 適用する対象を設定し、どの商品が影響を受けるかを決めます。
- 見積の対象の商品のみ(推奨)- 見積ボタンの対象の指定に合致する商品にのみ価格を隠すため、価格の非表示がボタンと同じ商品とバイヤーに従います。
- 選んだページのすべての商品 - 見積ボタンの対象の指定にかかわらず、選んだ画面のすべての価格を隠します。
- (任意)標準のボタンを隠します。 見積だけを進む道にするには、Shopify標準の「カートに追加」「今すぐ購入」のボタンの非表示も有効にしてください。これはLiteを含むすべてのプランで利用できます。
- 保存します。 保存の帯が変更を確認します。これで、合致する商品とバイヤーについて、ストアフロントで価格が隠れます。
ゲストとして(または対象のバイヤーとして)ストアフロントを開き、価格が置き換わり「見積を依頼する」ボタンが表示されることを確認してください。
これでGoogleから価格が隠れますか?
単独では、視覚的な非表示は隠しません。 しかしQuotWayの検索エンジンにも安全な非表示(Professional以上)は隠します。そしてそれはすでに提供されています。その違いはこうです。
視覚的な非表示だけは、バイヤーがブラウザで見るものを制御します。ページそのものから価格を取り除くことはしません。視覚的に隠した後も、本当の数字は次の場所に残っています。
- ページのソース - スクリプトが動く前にテーマが送る生のHTMLです。検索エンジンが最初に読むのはこれです。
- 構造化データ -
offers.priceを運ぶ商品のJSON-LDのブロック(<script type="application/ld+json">)です。 - Open Graphとメタタグ -
og:price:amount、product:price:amount、itemprop="price"です。
視覚的な非表示はCSSとJavaScriptを使い、これらはページが配信された後に動きます。検索エンジンは、それが起きる前に配信されたHTMLをインデックスするため、視覚的に隠された価格が検索結果や構造化データに現れることがあります。視覚的な非表示だけを、取引価格をGoogleから遠ざける方法として扱わないでください。それが検索エンジンにも安全な非表示の役割です。
検索エンジンにも安全な非表示(Professional以上)、提供済み。 Googleはログアウトした状態でストアを巡回するため、頼りになる方法はそもそもゲストに価格をサーバー側で描画しないことです。Professional プラン以上では、QuotWayが次を提供します。
- QuotWayのPrice Gateブロック - ログアウトした訪問者とクローラーに対して、価格ではなく「価格を見るにはサインインしてください」(文言は自由)を表示するテーマのブロックです。
- 案内に沿った一度きりのテーマの編集 - 価格、
og:priceのメタ、商品のJSON-LDを{% if customer %}で包み、ゲストに価格のないHTMLが配信されるようにします。 - 検索エンジンの漏れ確認 - ログアウトした訪問者として商品ページを取得し、つまりGoogleが見るとおりに取得し、まだ露出している価格を指摘します。
ゲストが受け取るHTMLに価格が最初から入っていなければ、インデックスするものがありません。どのテーマでも使える手順の全体は、**検索エンジンから価格を隠す**にあります。
正直な限界が一つ。 Shopifyは常に /products.json とストアフロントの分析で価格を公開しており、どのテーマもアプリもそれを取り除けません。それらを隠せるのはShopifyの BtoBカタログか、商品の非公開だけです。これらはGoogleが検索の抜粋に表示するものではないため、上記の手順で検索結果はカバーできます。そして価格を隠すために noindex を使わないでください。商品ページ全体が検索から取り除かれます。
落とし穴
- テーマによって差があり、価格が隠れない。 QuotWayはDawn、Horizon、そしてほとんどのOS 2.0のテーマが使う価格の要素に、そのまま合致します。テーマが特殊な価格のマークアップを使っていて価格が隠れない場合は、見積ボタン → 価格でテーマの価格の独自のCSSセレクターを追加し、QuotWayがそれを対象にできるようにしてください。
- 価格が一瞬見えてから隠れる。 通信が遅い環境では、スクリプトが隠すまでの間に価格が短く見えることがあります。視覚的な非表示では想定される動作です。価格はページのソースにあるため(上の節をご覧ください)、先に描画され、その少し後に隠されます。
- コレクションやカードの価格はソースに残ります。 コレクションのカードでの価格の非表示は視覚的な非表示のみです。テーマはカードの価格をサーバー側で描画するため、表示から隠れていてもページのソースには残ります。
- 対象のバイヤーに価格がまだ見える。 そのバイヤーが対象の指定ルールに合致していること、そして適用する対象の方式がその人を含んでいることを確認してください。見積の対象の商品のみでは、見積ボタンが対象としていない商品の価格は隠れません。
- メッセージを変えたのに、バイヤーには古い文言が見える。 置き換えの文言は、ストアフロントで短時間キャッシュされます。少し待ってから再読み込みし、正しいロケールで保存したかを確認してください。
関連記事
- 見積ボタンの配置 - 「見積を依頼する」ボタンがストアフロントのどこに表示されるかです。
- 対象の指定ルール - どの商品とどのバイヤーに、隠された価格と見積ボタンを見せるかを決めます。
- プラン、トライアル、料金 - どのプランで価格の非表示が使えるようになり、各段階に何が含まれるかです。
解決しませんか?サポートチームがお手伝いします。