メインコンテンツまでスキップ

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 をインストール​

  1. Shopify 管理画面で Online Store ▸ Themes に移動します
  2. Add theme ▸ Visit Theme Store をクリックします
  3. 「Vertex」 で検索するか、B2B & Wholesale カテゴリを閲覧します
  4. Try theme をクリックして、Vertex を未公開テーマとしてストアにインストールします
  5. Customize をクリックして、テーマエディターを開きます
この時点ではストアフロントは変更されていません

テーマはインストールされましたが、まだ公開されていません。Vertex のプレビューとカスタマイズを、ライブストアフロントに影響を与えずに行えます。準備が整ったらステップ 6 で公開します。

ステップ 2 — Shopify ネイティブ B2B を有効化 (任意ですが推奨)​

B2C のみを使用する場合はこのステップをスキップしてください。Vertex の B2B 要素は、B2B カスタマーがサインインしていない場合に自動的に非表示になります。

  1. Settings ▸ Customer accounts に移動します
  2. New customer accounts を有効化します
  3. B2B までスクロールして Manage をクリックします
  4. Enable B2B をクリックします
  5. Shopify 管理画面のサイドバーに新しい B2B セクションが表示されるようになります

→ 最初の会社の作成、カタログの割り当て、NET 条件の設定などの完全な手順は B2B セットアップガイド を参照してください。

ステップ 3 — Vertex メタフィールド名前空間をセットアップ​

Vertex は、PDP の拡張機能 (営業担当者情報、ships-from、MPN 検索、データシート、テックスペック、価格履歴) を駆動するために、マーチャント管理のメタフィールドをいくつか読み取ります。

2 つの方法でセットアップできます:

オプション A — Shopify 管理画面での手動セットアップ (約 15 分)​

  1. Settings ▸ Custom data に移動します
  2. Companies (または追加するメタフィールドに応じて Products) をクリックします
  3. Add definition をクリックし、メタフィールドセットアップガイド の表に従って各メタフィールドを作成します

オプション B — Shopify GraphQL Admin API による一括セットアップ (約 5 分)​

メタフィールドセットアップガイド に含まれる GraphQL ミューテーションを使用して、すべての Vertex メタフィールド定義を 1 つのバッチでシードします。

すべてのメタフィールドが最初から必要なわけではありません

メタフィールドが存在しない場合、テーマはグレースフルに縮退します。PDP ブロック (Documents、Price history、Ships-from) は、バックエンドのメタフィールドが空のときに自動的に非表示になります。最もインパクトの大きいもの (SKU 検索のための vertex.mpn と営業担当者ピルのための vertex.rep_*) から始め、スケールに応じてその他を追加していきましょう。

ステップ 4 — カラーパレットを選択​

Vertex はデフォルトで Vertex(産業用 / MRO)パレットでロードされます。Starter カラーパレット には、他の業種向けに調整された追加のオプションが含まれています:

パレット業種アクセント
Custom (デフォルト — コバルトブルー)工業 / MROコバルトブルー #1d4ed8
Signal red自動車部品レッドオレンジ #ec5f24
Office blueオフィス & IT サプライブルー
Inkline teal印刷サプライティール

パレットを切り替えるには:

  1. テーマエディターで Theme settings (左下) をクリックします
  2. Colors を開きます
  3. Starter color palette ドロップダウンからスタートパレットを選択します
  4. プレビューペインでストアフロント全体が再カラーリングされます

→ カラーパレットとファインダーから自動車部品 / オフィス & IT / 印刷の 構成 を作る方法については Vertex でできること を参照してください。

ステップ 5 — ヘッダー、ナビゲーション、フッターを設定​

ヘッダーとフッターは、テーマエディター内の セクショングループ で設定します:

  1. テーマエディターで Sections (左サイドバー) をクリックします
  2. Header group をクリックして以下を設定します:
    • アナウンスバー (リンク、ソーシャル、電話を持つ上部の帯。Dark / Accent / Light の 3 配色)
    • B2B グリーティングバー (サインインした B2B カスタマーのみに表示)
    • メインヘッダー (ロゴ、検索、ナビゲーション)
  3. Footer group をクリックして以下を設定します:
    • フッターメニュー、ソーシャルリンク、コンタクトメール、ニュースレター登録、決済アイコン

→ 詳細な手順: ヘッダー & フッター チュートリアル · テーマ設定リファレンス。

ステップ 6 — プレビューし、公開する​

  1. テーマエディターの Preview ボタン (右上) をクリックして、新しいタブでストアフロントを確認します
  2. 以下をクリックして確認します:
    • ホームページ
    • コレクションページ
    • 商品ページ
    • カート
    • カスタマーログインページ
  3. B2B バイヤーのテストアカウントが設定されている場合、サインインして以下を検証します:
    • 会社名 + NET 条件バッジを持つコバルトブルーのグリーティングバーが表示されること
    • 数量別価格段階が PDP に表示されること (該当バイヤーのカタログに割り当てられている場合)
    • 営業担当者ピルがヘッダーに表示されること (vertex.rep_name メタフィールドが設定されている場合)
  4. Online Store ▸ Themes に戻り、Theme library で Vertex を見つけます
  5. Vertex の隣の ⋯ メニュー ▸ Publish をクリックします

これでストアフロントは Vertex 上で稼働を開始しました 🎉

インストールのトラブルシューティング​

「コバルトブルーの B2B グリーティングバーが表示されない」​

可能性が高い順:

  1. B2B カスタマーとしてサインインしていない。 コバルトブルーのバーは customer.b2b? が true であり、かつ customer.current_company が設定されている場合にのみ表示されます。会社に紐づく B2B バイヤーとしてサインインしてください。
  2. Storefront mode が B2C-only に設定されている。 Theme settings ▸ B2B ▸ Storefront mode を開いて、Hybrid (auto) または B2B-only に設定されていることを確認してください。
  3. Shopify 管理画面でネイティブ B2B が有効化されていない。 上記のステップ 2 を確認してください。

「ログイン済みなのに価格が『ログインして価格を確認』と表示される」​

Theme settings ▸ B2B ▸ Hide prices until customer logs in トグルが有効になっています。無効にするには、ボックスのチェックを外してください。

「営業担当者ピルがヘッダーに表示されない」​

ピルは、バイヤーの会社に vertex.rep_name メタフィールド値が設定されている場合にのみ表示されます。Customers ▸ Companies ▸ [会社名] ▸ Metafields で、vertex.rep_name が投入されていることを確認してください。

→ さらに詳しくは FAQ + トラブルシューティング を参照してください。

次のステップ​