Vertex テーマ向け Shopify Markets と多通貨セットアップ
Vertex は Shopify Markets に標準で完全対応しています — アプリも、サードパーティの通貨コンバーターも、FX スクリプトも不要です。複数国の調達チームに販売する、異なる通貨のディーラーアカウントを持つ、地域別のトレードカタログを運用するとい った場合に、このガイドは単一マーケットのスタータストアから洗練された多マーケット B2B + B2C ストアフロントまでを約 30 分 で導きます。
Shopify の B2B バイヤーは 会社割り当てによって単一マーケットに固定されています — 通貨を自由に切り替えることはできません。Vertex は依然として通貨ピルを (情報目的で) レンダリングするため、バイヤーは 自分が支払っている通貨 を常に一目で確認できます。調達チームはこれを高く評価しています — 見積もり 1 件あたりのメール往復が 1 回減るからです。ドロップダウンには 1 つの選択肢のみが含まれます。
「Markets」が実際にコントロールするもの
Shopify Markets は 国別・地域グループ別 に以下を制御するネイティブのサブシステムです。
- バイヤーが表示し支払う 通貨 (ストア通貨から自動換算、またはマーケット固有の価格リストで上書き)
- ストアフロントがレンダリングする 言語 (
locales/JSON から取得。Vertex は英語、フランス語、イタリア語、ドイツ語、スペイン語に対応) - 価格戦略 — オプションの調整率付きライブ FX レートでの自動換算、またはマーケットごとの固定手動価格リスト
- ドメイン/サブフォルダ —
example.com/fr-ca/または完全に別の.caドメイン - ジオロケーションリダイレクト — マッチしない訪問者を最も近いマーケットへ自動提案または自動リダイレクト
- 税金 + 関税 の処理 (DDP をサポートするマーケット、例 Shopify Markets Pro)
Vertex の役割はこの構成を忠実に レンダリング することです。通貨ピル、言語ピル、hreflang タグ、マーケット別の価格フォーマット、B2B グリーティングバーはすべて、リクエストごとにライブの localization オブジェクトを参照します。
前提条件
| 要件 | 理由 |
|---|---|
| Shopify プラン: Basic 以上 | Markets はすべての有料プランに含まれていますが、セカンダリマーケットには少なくとも Basic が必要です。Shopify Plus では無制限のマーケット + Markets Pro (関税 + DDP) が利用可能になります。 |
| 少なくとも 1 つのセカンダリマーケットが公開済み | Vertex の通貨ピルは localization.available_countries.size > 0 のときにレンダリングされます。セカンダリマーケットがない場合、国は 1 つのみ存在し、ドロップダウンには切り替え先がありません — ただしピル自体は B2B バイヤー向けに 依然としてレンダリング されます (下記の 特殊ケース: B2B + Markets を参照)。 |
| テーマが公開済みまたはプレビュー中 | 一部の Markets 構成 (ジオロケーションリダイレクト、デフォルトマーケット) は、テーマが公開されているか、カスタマイザーでプレビューされている場合にのみ正しくレンダリングされます。 |
| ロケールがインストール済み | (通貨スイッチャーだけでなく) 言語スイッチャーが必要な場合は、設定 ▸ 言語 で該当ロケールを公開してください。Vertex は英語、フランス語、イタリア語、ドイツ語、スペイン語の完全な UI 翻訳を同梱しています。 |
Markets — 多通貨と多言語を含む — は すべての Shopify プランに含まれています。Shopify Payments 経由の FX 換算手数料 (すでに取引手数料の一部) のみが課金され、Markets 機能自体は無料です。関税 + DDP 徴収 (Markets Pro) は有料のアドオンです。
ステップバイステップ: Markets を有効化する
ステップ 1 — Shopify 管理画面で Markets を開く
Shopify 管理画面で 設定 ▸ Markets に移動します。
プライマリマーケット (ストア開設時に自動作成され、通常は法人設立国) と、追加した セカンダリマーケット を一覧表示するページが表示されます。
ステップ 2 — プライマリマーケットを構成する
プライマリマーケット をクリックします。以下を確認します。
- 国/地域 が正しい (これがデフォルトの税金 + 関税を駆動します)
- 通貨 がストア通貨である (注文が存在すると変更できません)
- 言語 がデフォルト言語である (設定 ▸ 言語 で「デフォルト」とフラグされたロケール)
これは フォールバック マーケットです — セカンダリマーケットにマッチしない訪問者は、プライマリの価格と言語を見ます。
ステップ 3 — セカンダリマーケットを追加する
右上の マーケットを追加 をクリックします。
新しいマーケットごとに、以下を構成します。
| フィールド | 入力内容 |
|---|---|
| マーケット名 | 内部ラベル — 「欧州連合」、「カナダ」、「アジア太平洋ホールセール」 |
| 国/地域 | このマーケットの価格設定 + 通貨 + 言語を共有する 1 つ以上の国。EU バイヤーは 1 つのマーケットを共有可 能。VAT 処理を分ける場合は UK + EU を分割できます。 |
| 通貨 | 現地通貨 (例: EU の場合 EUR、UK の場合 GBP、カナダの場合 CAD)。手動の価格リストをアップロードしない限り、Shopify はライブレートでストア通貨から自動換算します。 |
| 言語 | 設定 ▸ 言語 で公開されている 1 つ以上のロケール。マッチするロケールがある場合、このマーケットのデフォルト言語は国から自動検出されます。 |
| 価格戦略 | ストア通貨から % で価格を調整 (例: FX リスクをカバーする +5%)、または このマーケット用の手動価格リスト。 |
| ドメイン/サブフォルダ | example.com/fr-fr/ (サブフォルダ、SEO 推奨)、または example.fr のような別の ccTLD。 |
サブフォルダ URL (example.com/fr-fr/) はドメイン権威を統合し、Vertex によって hreflang タグと自動的にペアリングされ、DNS 作業が一切不要です。別の ccTLD ドメインは権威を分割し、手動の hreflang 設定が必要です。税務上または法的に強い理由がない限り、サブフォルダを推奨します。
ステップ 4 — 価格戦略を選択する
各セカンダリマーケットの価格には 3 つのオプションがあります。
オプション A — ストア通貨から自動換算 (デフォルト)
Shopify はライブ FX レートでストア通貨の価格をマーケット通貨に換算し、選択したフォーマット (例: .99 終わり) に丸めます。1 日 1 回更新。無料、手動メンテナンス不要。
オプション B — 自動換算 + 調整 A と同じで、このマーケットのすべての商品にパーセンテージ調整 (例: +5%、-10%) を適用します。FX リスクを吸収したい、または地域の割引/値上げを一律に運用したい場合に便利です。
オプション C — マーケットごとの手動価格リスト バリアントごと、マーケットごとに明示的な価格を CSV (または管理 UI) でアップロードします。地域に 固定の契約価格 がある場合に必要 — 交渉済みの地域ディーラー価格を持つ B2B ディストリビューターでは一般的です。
B2B バイヤーがサインインしており、その会社に カタログ が割り当てられている場合、そのバイヤーに対してはカタログの価格が Markets の価格よりも優先されます。Markets の価格は、B2B バイヤーにカタログが割り当てられていない場合、またはそのマーケットの B2C / ゲスト買い物客に対するフォールバックです。
ステップ 5 — (オプション) ジオロケーションリダイレクトを有効化する
設定 ▸ Markets で、ジオロケーション カードまでスクロールします。
2 つの選択肢:
- 別のマーケットを推奨 — ストアフロントの上部に小さなバー (「フランスにいらっしゃるようです。フランスストアにアクセスしますか?」) を アクセス / ステイ の選択肢付きで表示します。控えめ — 一部の調達バイヤーは価格を比較するために意図的に US ストアフロントを使うため、B2B に推奨です。
- 自動的にリダイレクト — サーバーサイドで訪問者を選択肢なしに最も近いマーケットにリダイレクトします。純粋な B2C では高いコンバージョン、しかし B2B バイヤーやボットを困らせる可能性があります。
特別な理由がない限り 推奨 を選択してください。Vertex は選択したものを尊重します — テーマコードの変更は不要です。
ステップ 6 — セカンダリマーケットを公開する
各マーケットにはマーケット一覧で アクティブ/非アクティブ の切り替えがあります。バイヤーに表示する準備ができたら アクティブ に切り替えます。Vertex の通貨ピルは、次のページ読み込み時にすぐに新しいマーケットの通貨をドロップダウンに表示し始めます。
Vertex がスイッチャーをレンダリングする方法
Vertex の通貨ピル + 言語ピルは、単一の共有スニペッ ト — snippets/localization-switchers.liquid — によってレンダリングされ、2 か所に含まれます。
- デスクトップヘッダー (≥1170px) — サインイン済み B2B バイヤー向けにはコバルトブルーの B2B グリーティングバー内にインライン、またはゲスト + B2C バイヤー向けにはメインの白いヘッダーにインライン
- モバイルドロワー + タブレット (<1170px) — ハンバーガードロワーの上部、片手リーチ用の 2 カラムグリッドの 2 つのピル
ピルの構造
各ピルは 3 つの要素を持つコンパクトな角丸ボタンです。
- 円形フラッグアバター — スプライトから描画される国旗、または ISO 国コードへのフォールバック
- 2 行のテキストスタック — アイブロウラベル (「通貨」または「言語」) と ISO コード (「EUR」、「FR」)
- シェブロン — ピルがドロップダウンパネルを開くことを示します
ピルをタップすると カスタムドロップダウンパネル が開きます — Vertex はクロームのどこにもネイティブの <select> 要素を意図的に同梱していません。すべてのドロップダウンは共有の <details> + <summary> + カスタムパネルパターンを使用し、以下を行います。
- 現在選択されているオプションの横にチェックアイコンをレンダリング
- ホバー状態をハイライト
- Escape / 外側クリック / 兄弟ドロップダウンを開く (相互排他) で閉じる
- 120ms のフェードでアニメーションイン
これにより、デフォルトのブラウザドロップダウンとは全く異なる見た目でありながら、完全なキーボードナビゲーションと AT (支援技術) サポートが実現されます。
「常にレンダリング」ルール
重要な詳細: localization-switchers.liquid は localization.available_countries.size > 0 をチェックします — > 1 ではありません。
つまり:
- 1 つのマーケットを公開しているストア — ピルはレンダリングされ、ドロップダウンには 1 つのオプション (ホームマーケット) が含まれる
- 2 つ以上のマーケットを持つストア — ピルはレンダリングされ、ドロップダウンには公開済みのすべてのマーケットが含まれる
- 単一マーケットに固定された B2B バイヤー — ピルはレンダリングされ (情報目的)、ドロップダウンには 1 つのオプション (彼らのマーケット) が含まれる
この決定は意図的です。EUR で支払う B2B バイヤーは、切り替えできなくてもすべてのページで EUR を見たい のです — USD で請求されようとしているわけではないという安心感を提供します。調達チームはユーザーテストで通貨が暗黙に切り替わる懸念を繰り返し指摘してきました。通貨バッジを表示することで、その混乱を防げます。
通貨ピル全体を非表示にしたい 場合 (例: 1 つのマーケットがあり、画面を整理したい場合) は、カスタマイズ を開き、ヘッダー セクションをクリックして、通貨スイッチャーを表示 (ローカライゼーションスイッチャー の下) を オフ にしてください。言語ピル (言語スイッチャーを表示) は独立しています。
特殊ケース: B2B + Markets
Shopify B2B には厳格なルールがあります。すべての会社は厳密に 1 つのマーケットに固定されます。設定 ▸ 顧客 ▸ 会社 で会社を作成する際、所属するマーケットを選択します。その会社のバイヤーは、常に そのマーケットの通貨、言語、カタログを見ます — 切り替えはできません。
Vertex はこれをエンドツーエンドで尊重します。
| B2B バイヤー向けのレンダリング | 動作 |
|---|---|
| 通貨ピル | レンダリングされる。ドロップダウンには 1 つのオプション (彼らのマーケットの通貨)。チェックアウト時に請求される通貨として表示。 |
| 言語ピル | 彼らのマーケットで複数の言語が公開されている場合にレンダリング。それ以外の場合は単一のオプションでレンダリング。 |
| 配送先スイッチャー | バイヤーの会社で複数の配送先住所が承認されている場合にレンダリング。マーケットとは独立。 |
| 会社スイッチャー | バイヤーが複数の会社に紐付けられている場合に のみ レンダリング (まれ。通常は親会社の経理担当)。 |
| 数量別価格設定 + NET-30 + 免税 | すべて会社のマーケット + カタログ割り当てから取得。ローカライゼーションスイッチャーの何によっても変更されません。 |
バイヤーが 「なぜ通貨ピルが通貨を変えないの?」 と尋ねた場合、答えは B2B バイヤーは固定されているから であり、ピルが壊れているからではありません。質問を避けるためにピルを削除すると、より悪い問題が生まれます — バイヤーがどの通貨で支払っているかが分からなくなります。残しておいてください。
セットアップの検証
Markets と Vertex テーマを公開した後、このチェックリストを実行します。
- シークレットウィンドウでストアフロントを開きます。 デフォルトで プライマリマーケット が表示されるはずです (US なら USD、UK なら GBP、など)。
- デスクトップヘッダーの通貨ピルをクリックします。 公開済みのすべてのマーケットが表示されるはずです。1 つを選択すると、新しい通貨でページが再読み込みされるはずです。
- モバイルブレークポイントに切り替えます (または実機のスマートフォンで開きます)。ハンバーガードロワーを開きます。通貨 + 言語ピルが 2 カラムグリッドでドロワー上部に表示されるはずです。
- テスト B2B バイヤーとしてサインインします。 ピルはコバルトブルーのグリーティングバー (デスクトップ) にレンダリングされるか、ドロワー内 (モバイル) にとどまるはずです。ドロップダウンにはバイヤーのマーケット通貨のみが表示されるはずです。
- ページの HTML を検査します。
<head>内に<link rel="alternate" hreflang="fr-fr" href="https://example.com/fr-fr/" />タグを探してください — 公開済みロケールごとに 1 つ。これらは Vertex の SEO スニペットによって自動的に発行されます。 - Google Search Console ▸ 国際ターゲティング を開きます。 Google が再クロールした後 (1〜14 日)、hreflang タグはエラーなしで検証済みとして表示されるはずです。
トラブルシューティング
「通貨ピルが表示されません」
最も一般的な原因、頻度順:
- 1 つのマーケットのみ公開されている。 ピルは 1 つのオプションで レンダリングされる — 正しい場所を見ていることを確認してください (B2B はグリーティングバー、ゲストはメインヘッダー、モバイル/タブレットはドロワー)。
- Header セクションで通貨スイッチャーがオフ。 カスタマイズ を開き、ヘッダー セクションをクリックして、通貨スイッチャーを表示 (ローカライゼーションスイッチャー の下) が オン であることを確認します。
- ストアフロントモードが「B2B のみ」に設定されており、B2B バイヤーがサインインしていない。 B2B のみモードは、ゲスト向けにメインヘッダーを完全に非表示にします。サインインするか Hybrid に切り替えます。
- テーマが公開されていない。 Markets は公開済みテーマでのみ正しくレンダリングされます。プレビューテーマはカスタマイザーでは機能しますが、Markets を常に正しくレンダリングするとは限りません。
- キャッシュ。 ハードリフレッシュ (Ctrl+Shift+R) するか、シークレットで開きます。
「価格が現地通貨に換算されません」
- マーケットが 非アクティブ。 設定 ▸ Markets で アクティブ に切り替えます。
- Markets が無効な URL でテーマをプレビューしている。 通貨換算は、バイヤーの実際のマーケット URL (例:
/fr-fr/) を介した公開済みテーマでのみ発生します。 - B2B カタログの上書き。 カタログが割り当てられた B2B バイヤーには、Markets の価格ではなくカタログ価格が表示されます。これは正しい動作です。
- キャッシュされたストアフロント。 Shopify はストアフロントを積極的にキャッシュします。5 分待つか、ハードリフレッシュします。
「hreflang タグが欠落しています」
- 言語が公開されていない。 設定 ▸ 言語 に移動し、各言語が単に 表示 ではなく 公開 されていることを確認します。
- テーマが古すぎる。 hreflang タグは Vertex v1.0.0 以降で同梱されています。オンラインストア ▸ テーマ でテーマバージョンを確認します。
- カスタムコードの上書き。
theme.liquidをカスタマイズしている場合、{% render 'meta-tags' %}(または同等の) インクルードを削除した可能性があります。復元してください。
「ジオロケーションリダイレクトが積極的すぎます」
設定 ▸ Markets ▸ ジオロケーション で 自動的にリダイレクト から 別のマーケットを推奨 に切り替えます。後者はハードリダイレクトの代わりに丁寧な「フランスストアにアクセスしますか?」バーを表示します。
「B2B バイヤーに間違った通貨が表示されます」
バイヤーの通貨は、設定 ▸ 顧客 ▸ 会社 ▸ [会社] ▸ Market の 会社のマーケット割り当て によって決定されます。テーマではなく、ここでマーケットを変更してください。
多マーケットセットアップの SEO への影響
適切に構成された多マーケットストアフロントは、強力な国際 SEO シグナルです。Vertex は自動的に以下を発行します。
- ストア内のすべての公開ロケールに対する
<link rel="alternate" hreflang="xx-yy" ... />。Google に「この同じページは、この地域、この言語、この URL で利用可能です」と伝えます。ローカライズされた SERP でのランキングに不可欠です。 - アクティブなロケールに基づく
<html lang="xx" dir="ltr|rtl">。スクリーンリーダーとブラウザ翻訳ツールが言語を認識するのに役立ちます。 - アクティブなロケールの
<meta property="og:locale" content="xx_YY">+ 兄弟用のog:locale:alternate。地域ごとに正しい Open Graph プレビューを駆動します。 - ローカライズされた JSON-LD — Product、BreadcrumbList、Organization、FAQPage スキーマはすべて、マスター英語コピーではなく、ローカルでレンダリングされた文字列 (名前、説明、FAQ 回答) を使用します。
結果: Google はフランスのバイヤーに /fr-fr/ URL、ドイツのバイヤーに /de-de/ URL、スペインのバイヤーに /es-es/ URL を提供できます — 明示的にリクエストされない限り、英語版を表示することは決してありません。
国際 B2B を行う場合は、RFQ フォームでバイヤーの予想通貨を記載してください。Vertex の RFQ ページ は通貨を自動検出しないため、複数の通貨で定期的に交渉する場合はフリーテキストの「見積もり通貨」フィールドが必要です。
関連資料
- 概要 — なぜ Vertex は Markets にネイティブで構築されているか
- インストール — テーマインストール + B2B 有効化
- ストアフロントモードガイド — Hybrid / B2B のみ / B2C のみが Markets とどう相互作用するか
- B2B セットアップガイド — 会社、カタログ、マーケット固定
- Vertex でできること — どの構成(自動車部品、オフィス & IT、印刷消耗品)もすべてのマーケットで同じに動作します
- 顧客アカウントダッシュボード — バイヤーごとの通貨表示
- RFQ ページガイド — 国際 RFQ での見積もり通貨の取得
- テーマ設定リファレンス — ローカライゼーション ▸ テキストの方向 (通貨 / 言語スイッチャーは テーマ設定 ではなく ヘッダーセクション にあります)
- FAQ + トラブルシューティング — その他の通貨 + Markets の問題
まとめ
- Shopify Markets は、マーケットごとの通貨、言語、価格設定、ドメインを制御するネイティブのサブシステムです。すべての有料プランで無料。
- Vertex の通貨ピルは、単一マーケットおよび単一オプションの B2B シナリオでもレンダリングされます — 設計上、情報目的です。
- B2B バイヤーは会社によって 1 つのマーケットに固定されます。ピルは「現在の通貨」バッジになります。
- hreflang タグは公開済みロケールごとに自動的に発行されます。Google が国際検索ユーザーに正しい URL を提供するのに役立ちます。
- 固定地域ディーラー価格が必要な場合、手動価格リストが自動換算を上書きします。
- B2B コンテキストでは、ジオロケーションは 自動リダイレクト ではなく 推奨 に設定すべきです。
最初の多通貨レンダリングまでの時間: テーマ公開 + マーケット検証を含めて 約 30 分。