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

商品ページ (PDP) セクション

Vertex の商品ページは テクニカルカタログ 向けに構築されています — 部品番号、仕様、データシート、MOQ、ケースパック、ボリューム価格を重視するバイヤー向けです。すべての B2B タッチポイント(ボリューム階層、ログイン必須価格、数量ルール、営業担当カード、ships-from、NET 条件バッジ)は、コンパニオンアプリなしで商品ページにインライン表示されます。

Vertex Theme — 商品ページ

1 つのテンプレート、2 つの顧客状態

同じ商品ページがゲストとサインイン済み B2B バイヤーの両方で機能します。価格、バッジ、数量ルール、営業担当カードは、顧客の会社カタログと支払い条件を自動的に反映します — 「B2B 商品テンプレート」と「B2C 商品テンプレート」を並行ファイルとして持つ必要はありません。

メイン商品​

商品ページ本体 — ギャラリー、タイトル、価格、バリアントピッカー、数量入力、カートに追加、そしてすべての B2B 対応サーフェスを 1 つのセクションにスタックしたものです。以下の各ブロックは、カスタマイザーで並べ替え可能なドラッグ＆ドロップブロックです。

Shopify 管理画面 → オンラインストア → テーマ → カスタマイズ を開き、商品ページに移動し、ページエディタで Main product セクションを見つけ、Add block をクリックしてこれらのブロックを追加または並べ替えます。

ギャラリー​

  • リスティングカードでの 画像ロールオーバー 付きメイン画像(2 枚以上の画像が必要)
  • メイン画像の下のサムネイル
  • クリックでズーム(ライトボックス)
  • モバイル: ドット付きのスワイプ可能なカルーセル

タイトル + メタ​

  • 商品タイトル
  • ベンダー(表示する場合)
  • Ships-from ラベル — 商品ごとの ships-from 設定またはテーマ全体のデフォルト
  • MPN 行 — MPN が入力されている場合、タイトルの下に 「MPN: 1N4148」 を表示

価格ブロック​

価格サーフェスは標準で B2B 対応 です:

  • ボリューム価格階層 — Shopify ネイティブの B2B カタログから取得。バイヤーはインラインで 「1–9: $4.50 · 10–49: $4.10 · 50+: $3.80」 を見ます。バリアントにボリューム階層が設定されているときに自動的に表示されます。
  • ログイン必須価格 — テーマ設定 Hide prices until customer logs in がオンのとき、ゲスト向けに価格が 「価格を見るにはログイン」 とサインインリンクに置き換えられます。
  • B2B 比較価格 — B2B カタログ価格がストアフロント価格より低い場合の取り消し線表示。

バリアントピッカー​

スタイル付きボタン(色のスウォッチ、サイズのサイズボタン、その他のオプションはドロップダウン)として表示されます。在庫切れのバリアントは取り消し線付きで表示されますが、クリック可能なまま残るため、バイヤーは代替を見ることができます。

数量入力​

数量ルールはどこでも適用されます — 入力欄、カート、そしてチェックアウトで:

ルール動作
MOQ(最小)最小未満には減少できません。インラインメッセージ: 「最小注文数: 12」。
最大最大を超えて増加できません。インラインメッセージ: 「最大: 144」。
ケースパック増分ケースパックサイズでステップします。手動入力は次の有効な値に切り上げられ、小さなトースト通知が表示されます。

B2B カタログに所属するバイヤーは会社固有の数量ルールを取得し、ゲストはストアフロントのルールを取得します。両方とも Shopify ネイティブの数量ルールから来ます — Vertex はそれを表示するだけです。

カートに追加 + 今すぐ購入​

  • カートに追加 — 標準ボタン。プリオーダーが有効でない限り、在庫切れ時は無効になります。
  • 今すぐ購入 — Shopify の高速チェックアウトボタン(Shop Pay、Apple Pay、Google Pay、PayPal)。Shopify の設定で切り替えます。
  • プリオーダー — バリアントがバックオーダー可能なとき、「Sold out」を 「プリオーダー」 に置き換えます。

営業担当カード​

サインイン済み B2B バイヤー向けに、会社の割り当て担当者を表示する営業担当カードが商品ページに表示されます:

  • 名前
  • メール(クリック可能なメールリンク)
  • 電話(モバイルでタップして発信)

少なくとも 1 つの担当者フィールドが入力されており、顧客が B2B バイヤーである場合にのみ表示されます。

パンくず​

商品の主要コレクションから自動生成されます。Google パンくずリッチスニペットのマークアップを追加します。

技術仕様テーブル​

Tech specs ブロックを追加して、技術仕様データからクリーンな 2 カラムの仕様テーブルを表示します。寸法、重量、材料、電圧、容量、認証に使用します。

→ これらの入力方法については メタフィールドセットアップガイド を参照してください。

ドキュメント＆ダウンロード​

Documents ブロックを追加して、商品ページに PDF ダウンロードのリストを表示します:

  • データシート
  • MSDS
  • パンフレット
  • 技術シート
  • 取り付けガイド
  • 保証カード

ドキュメントが添付されていない場合、商品ごとに自動的に非表示になります。

価格履歴​

Price history ブロックを追加して、日付と価格のエントリーを持つ折りたたみ可能な 「価格履歴」 セクションを表示します。市場動向を監視する産業バイヤーに便利です。

在庫カウンター(低在庫インジケーター)​

Stock counter ブロックを追加して、バリアントごとの緊急性キューを表示します。在庫を追跡しているバリアントにのみ表示され、在庫が低い閾値(10 個)まで減少すると「残り N 個」の警告に切り替わります。競合に正確な在庫を明かすことなく行動を促します。

次のいずれかの状態を表示します:

  • 在庫が十分(10 個超): 「在庫あり」
  • 10 個以下: 「残り 4 個」
  • バックオーダー可能(ゼロだが販売継続に設定): 「バックオーダー — 7〜10 日で出荷」
  • 在庫切れ(ゼロ、バックオーダー不可): 「Sold out」
B2B ログイン必須価格

Hide prices until customer logs in がオンのとき、価格ブロック全体(ボリューム階層と比較価格を含む)はゲスト向けに 「価格を見るにはログイン」 プロンプトに置き換えられます。数量ルール、在庫カウンター、営業担当カードは引き続き表示されるため、バイヤーは商品がサインインに値するかどうかを判断できます。

商品タブ​

商品タブセクションは、商品コンテンツをタブ間で分割します。仕様が長い商品で視覚的な雑然さを減らすために、このセクションを商品ページの Main product の下に配置します。

タブごとの設定: タイトル、コンテンツ(リッチテキスト、ファイル、または動画)。

一般的なタブパターン:

  • 説明 — メインのマーケティングコピー
  • 仕様 — 技術仕様テーブルを超える拡張技術仕様
  • データシート — 埋め込み PDF ビューワー
  • 配送 & 返品 — 物流情報
  • 動画 — 埋め込み YouTube または Vimeo

タブは完全にキーボードでアクセス可能です。最初のタブはデフォルトで開いています。別のタブを開くと、セクションの Allow multiple open 設定によって、他のタブを閉じる(アコーディオンモード)か、開いたままにする(トグルモード)かが決まります。

関連商品​

商品ページの下のレコメンドストリップ。同じコレクションまたは同じタグの商品から取得します。

設定​

  • 見出し — 例: 「他のお客様も閲覧」 または 「こちらもおすすめ」。
  • ソース — 同じコレクション(デフォルト)、同じタグ、または手動ピッカー。
  • 最大商品数 — 4(デフォルト)、6、8、または 12。
  • 価格を表示 — トグル。ログイン必須価格のルールを尊重します。
  • ベンダーを表示 — トグル。

B2B カタログのバイヤーの場合、バイヤーのカタログにある商品のみが表示されます。Vertex は Shopify ネイティブのカタログフィルタリングをエンドツーエンドで尊重します。

最近表示した商品​

最近表示した商品の ブラウザ追跡 リスト(バイヤーごとに最大 12)。商品ページの下部に表示され、ホームページにストリップとして配置することもできます。

仕組み​

  • すべての商品閲覧がバイヤーのブラウザメモリに追加される(12 でキャップ)
  • セクションはそのリストを読み取り、各商品のカードを取得する
  • バイヤーがブラウザデータをクリアするとクリアされる — ウィッシュリストではない、Shopify に保存されない

設定​

  • 見出し — 「最近表示した商品」
  • 最大商品数 — 4、6、8、または 12
  • 空の場合は非表示 — デフォルトでオン。バイヤーに閲覧履歴がない場合、セクション全体が消えます。
なぜウィッシュリストではなくブラウザ追跡なのか

永続的なウィッシュリストには Shopify アプリが必要です。Vertex は、最近表示した商品を厳密にセッションとブラウザのスコープに保つことで、Theme Store ポリシー準拠を維持します。比較も同じアプローチを使用します(B2B 専用セクション を参照)。

スティッキーカート​

モバイル専用 のスティッキーなカートに追加バーで、バイヤーがメインのカートに追加ボタンを通過してスクロールした後に表示されます。仕様テーブルの深いところにいても、カートへの追加を 1 タップで保ちます。

表示されるもの​

  • 商品画像のサムネイル(左)
  • 選択されたバリアントのタイトルと価格
  • 数量入力
  • カートに追加ボタン(右)

設定​

  • モバイルのみで表示 — デフォルトでオン。デスクトップにはナビゲーション用のスティッキーヘッダーがあり、モバイルはスティッキーなカートに追加からより多くのコンバージョンリフトを得ます。
  • バリアントタイトルを表示 — トグル。
  • 配色

このセクションは、メインのカートに追加ボタンがビューからスクロールアウトしたときにのみ表示され、ビューに戻ると消えます。

B2B インタラクションチートシート​

サーフェスゲストサインイン済み B2Cサインイン済み B2B
価格ブロック「Hide prices until customer logs in」がオンの場合は非表示ストアフロント価格B2B カタログ価格とボリューム階層
ボリューム価格階層非表示非表示表示
数量ルールストアフロント MOQ/最大ストアフロント MOQ/最大会社カタログ MOQ/最大
営業担当カード非表示非表示表示(担当者フィールドが入力されている場合)
NET 条件バッジ非表示非表示グリーティングバーで表示(PDP ではない)
プリオーダーボタン有効時に表示有効時に表示有効時に表示
在庫カウンター表示表示表示
最近表示した商品表示表示表示

次のステップ​