Shopify ストアへの Vertex のインストール
このガイドでは、プレミアム B2B Shopify テーマ Vertex のインストール手順を、購入から B2B 有効化、メタフィールドセットアップ、初回公開までを順を追って解説します。
- 基本 B2C インストール (テーマのみ、B2B なし): 5 分
- フル B2B インストール (テーマ + ネイティブ B2B + メタフィールド + 初回会社作成): 45〜60 分
開始前に
Shopify プランの要件
| 必要なもの | 理由 |
|---|---|
| 任意の Shopify プラン | Vertex はすべてのプランにインストールできます — Basic / Shopify / Advanced / Plus |
| Shopify Plus または Advanced + B2B アドオン | Shopify の ネイティブ B2B 機能 を使用する場合にのみ必要です。これらがなくても、Vertex は洗練された B2C 工業用品テーマとして動作します 。 |
| 新しいカスタマーアカウントが有効化されていること | アカウント機能を使用するために必須 — Settings ▸ Customer accounts ▸ Show login link in checkout |
ステップ 1 — Shopify Theme Store から Vertex をインストール
- Shopify 管理画面で Online Store ▸ Themes に移動します
- Add theme ▸ Visit Theme Store をクリックします
- 「Vertex」 で検索するか、B2B & Wholesale カテゴリを閲覧します
- Try theme をクリックして、Vertex を未公開テーマとしてストアにインストールします
- Customize をクリックして、テーマエディターを開きます
テーマはインストールされましたが、まだ公開されていません。Vertex のプレビューとカスタマ イズを、ライブストアフロントに影響を与えずに行えます。準備が整ったらステップ 6 で公開します。
ステップ 2 — Shopify ネイティブ B2B を有効化 (任意ですが推奨)
B2C のみを使用する場合はこのステップをスキップしてください。Vertex の B2B 要素は、B2B カスタマーがサインインしていない場合に自動的に非表示になります。
- Settings ▸ Customer accounts に移動します
- New customer accounts を有効化します
- B2B までスクロールして Manage をクリックします
- Enable B2B をクリックします
- Shopify 管理画面のサイドバーに新しい B2B セクションが表示されるようになります
→ 最初の会社の作成、カタログの割り当て、NET 条件の設定などの完全な手順は B2B セットアップガイド を参照してください。
ステップ 3 — Vertex メタフィールド名前空間をセットアップ
Vertex は、PDP の拡張機能 (営業担当者情報、ships-from、MPN 検索、データシート、テックスペック、価格履歴) を駆動するために、マーチャント管理のメタフィールドをいくつか読み取ります。
2 つの方法でセットアップできます:
オプション A — Shopify 管理画面での手動セットアップ (約 15 分)
- Settings ▸ Custom data に移動します
- Companies (または追加するメタフィールドに応じて Products) をクリックします
- Add definition をクリックし、メタフィールドセットアップガイド の表に従って各メタフィールドを作成します
オプション B — Shopify GraphQL Admin API による一括セットアップ (約 5 分)
メタフィールドセットアップガイド に含まれる GraphQL ミューテーションを使用して、すべての Vertex メタフィールド定義を 1 つのバッチでシードします。
メタフィールドが存在しない場合、テーマはグレースフルに縮退します。PDP ブロック (Documents、Price history、Ships-from) は、バックエンドのメタフィールドが空のときに自動的に非表示になります。最もインパクトの大きいもの (SKU 検索のための vertex.mpn と営業担当者ピルのための vertex.rep_*) から始め、スケールに応じてその他を追加していきましょう。
ステップ 4 — カラープリセットを選択
Vertex には 4 つのスタートパレット が同梱されています:
| プリセット | 業種 | アクセント |
|---|---|---|
| Vertex (デフォルト) | 工業 / MRO | アンバー #fbbf24 |
| Throttle | 自動車部品 | レッドオレンジ #ec5f24 |
| OfficeIT | オフィス & IT サプライ | ブルー |
| Inkline | 印刷サプライ | ティール |
プリセットを切り替えるには:
- テーマエディターで Theme settings (左下) をクリックします
- Colors を開きます
- Starter color palette ドロップダウンからスタートパレットを選択します
- プレビューペインでストアフロント全体が再カラーリングされます
→ プリセット間の違いについては デモプリセットガイド を参照してください。
ステップ 5 — ヘッダー、ナビゲーション、フッターを設定
ヘッダーとフッターは、テーマエディター内の セクショングループ で設定します:
- テーマエディターで Sections (左サイドバー) をクリックします
- Header group をクリックして以下を設定します:
- アナウンスバー (リンク、ソーシャル、電話を持つ上部のダーク / アンバー帯)
- B2B グリーティングバー (サインインした B2B カスタマーのみに表示)
- メインヘッダー (ロゴ、検索、ナビゲーション)
- Footer group をクリックして以下を設定します:
- フッターメニュー、ソーシャルリンク、コンタクトメール、ニュースレター登録、決済アイコン
→ 詳細な手順: ヘッダー & フッター チュートリアル · テーマ設定リファレンス。
ステップ 6 — プレビューし、公開する
- テーマエディターの Preview ボタン (右上) をクリックして、新しいタブでストアフロントを確認します
- 以下をクリックして確認します:
- ホームページ
- コレクションページ
- 商品ページ
- カート
- カスタマーログインページ
- B2B バイヤーのテストアカウントが設定されている場合、サインインして以下を検証します:
- 会社名 + NET 条件バッジを持つアンバーグリーティングバーが表示されること
- 数量別価格段階が PDP に表示されること (該当バイヤーのカタログに割り当てられている場合)
- 営業担当者ピルがヘッダーに表示されること (
vertex.rep_nameメタフィールドが設定されている場合)
- Online Store ▸ Themes に戻り、Theme library で Vertex を見つけます
- Vertex の隣の ⋯ メニュー ▸ Publish をクリックします
これでストアフロントは Vertex 上で稼働を開始しました 🎉
インストールのトラブルシューティング
「アンバーの B2B グリーティングバーが表示されない」
可能性が高 い順:
- B2B カスタマーとしてサインインしていない。 アンバーバーは
customer.b2b?が true であり、かつcustomer.current_companyが設定されている場合にのみ表示されます。会社に紐づく B2B バイヤーとしてサインインしてください。 - Storefront mode が B2C-only に設定されている。 Theme settings ▸ B2B ▸ Storefront mode を開いて、Hybrid (auto) または B2B-only に設定されていることを確認してください。
- Shopify 管理画面でネイティブ B2B が有効化されていない。 上記のステップ 2 を確認してください。
「ログイン済みなのに価格が『ログインして価格を確認』と表示される」
Theme settings ▸ B2B ▸ Hide prices until customer logs in トグルが有効になっています。無効にするには、ボックスのチェックを外してください。
「営業担当者ピルがヘッダーに表示されない」
ピルは、バイヤーの会社に vertex.rep_name メタフィールド値が設定されている場合にのみ表示されます。Customers ▸ Companies ▸ [会社名] ▸ Metafields で、vertex.rep_name が投入されていることを確認してください。
→ さらに詳しくは FAQ + トラブルシューティング を参照してください。
次のステップ
- テーマ設定リファレンス → — すべての設定の解説
- セクションセットアップガイド → — 各セクションブロックの設定
- B2B セットアップガイド → — 会社、カタログ、NET 条件の作成
- メタフィールドセットアップガイド → — コピー & ペースト可能な定義