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

ホームページ & マーケティングセクション

Vertex は B2B と工業用品ストアフロント向けに設計された 30 以上のホームページ対応セクション を同梱しています: ヒーローローテーター、エディトリアルマルチカラム、トラストマーク、KPI バー、JSON-LD を自動出力する FAQ アコーディオン、コンバージョンバナー、2 つの関連アイデアを 1 つの帯に組み合わせる 50/50 統合セクション (ブランド + クイックオーダー、リソース + FAQ)。

Vertex Theme — ホームページパレット

組み合わせ自由 — 順序はあなた次第

ここにあるすべてのセクションはスタンドアロンの OS 2.0 セクションです。カスタマイザーで任意の順序にドラッグできます。ホームページで使う必要すらありません — page.about.json、page.services.json、または任意のカスタムページテンプレートに配置してください。

ヒーロー & オープニングセクション​

hero​

セクションファイル: sections/hero.liquid

自動進行、ドットナビゲーション、エディトリアルコンポジション (アイブロウ + 見出し + サブ見出し + デュアル CTA) を備えたマルチスライドローテーター。LCP 最速化のため 1 スライドがデフォルト — 追加スライドはプログレッシブエンハンスメントです。

スライドごとのブロック設定: 画像 (<picture><source> 経由でモバイル対応の幅選択)、アイブロウテキスト、見出し、サブ見出し、プライマリ CTA ラベル + URL、セカンダリ CTA ラベル + URL、配置 (左 / 中央)。

セクション設定: 自動進行間隔 (秒)、ドットの表示トグル、配色。

LCP のヒント

Lighthouse Performance を優先する場合は、ホームページのヒーロースライドを 1 つに保ってください。追加スライドごとにヒーローサイズの画像が初期ペイロードに加わります。デフォルトは 1 スライドで出荷されています。

セクションファイル: sections/featured-collection.liquid

コレクションピッカーから引き出す商品グリッド。Theme Store 準拠のため @app ブロックを受け付けます。

設定: コレクションピッカー、見出し、行ごとの商品数 (2 / 3 / 4 / 5)、モバイルのカラム (1 / 2)、View all リンクの表示、配色。

collection-list​

セクションファイル: sections/collection-list.liquid

各タイルの中央に画像オーバーレイとタイトルを配置したカテゴリーグリッド。カラムとアスペクト比を設定可能。

エディトリアルブロック​

image-with-text​

セクションファイル: sections/image-with-text.liquid

クラシックな 50/50 または非対称の画像 + テキストペアリング。About us、Our process、Why us に便利。

設定: 画像、見出し、本文 (リッチテキスト)、CTA ラベル + URL、レイアウト (image-left / image-right)、配色。

multicolumn​

セクションファイル: sections/multicolumn.liquid

2 / 3 / 4 カラムグリッド。各カラムにはアイコン (または画像)、見出し、本文、任意のリンクがあります。バリュープロポジション (Same-day dispatch · NET-30 · Volume pricing · ISO 9001 certified) に使用。

カラムごとのブロック設定: アイコン (画像)、見出し、本文、リンクラベル + URL。

rich-text​

セクションファイル: sections/rich-text.liquid

中央配置の紹介または About ブロック。見出し + リッチテキスト本文 + 任意の CTA。控えめに使用 — これは「ページ区切り」ブロックです。

timeline​

セクションファイル: sections/timeline.liquid

About ページ向けの年 + マイルストーン年代記。ブロックごと: 年、タイトル、本文。

信頼 & 社会的証明​

testimonials​

セクションファイル: sections/testimonials.liquid

アバターオーバーラップ ヘッダー処理を備えた評価カード。各カードには評価 (1〜5 星)、引用、顧客名、役割、会社、アバター画像があります。

ブロックごとの設定: 名前、役割、会社、引用 (リッチテキスト)、評価 (1〜5)、アバター (画像)。

logo-list​

セクションファイル: sections/logo-list.liquid

フェードグリッド線付きのマーキー スクロールするブランドロゴ。Trusted by / As featured in / Brands we carry に使用。

ブロックごとの設定: ロゴ画像、任意の URL。セクションレベル: スクロール速度、グリッド線の表示。

press-coverage​

セクションファイル: sections/press-coverage.liquid

ロゴストリップ + プルクオート。プレスロゴと短い帰属付き引用を組み合わせる — 「...WordPress の McMaster-Carr。」 — Trade Weekly。

stats-bar​

セクションファイル: sections/stats-bar.liquid

ダークモード KPI 帯。見出し数字に使用 — 40,000+ SKUs · NET-30 · 24-hr Dispatch · ISO 9001。

ブロックごとの設定: 数値 (大きなテキスト)、ラベル (小さなテキスト)。

正確な数字ではなく範囲を表示

「40,000+ SKUs」は「40,127 SKUs」より強く読め、在庫が変動するたびにセクションを更新する必要がありません。注文ボリュームも同様です。

コンバージョン & CTA​

cta-banner​

セクションファイル: sections/cta-banner.liquid

フッターへのオーバーラップ効果 を備えたプリフッターの行動喚起 — 帯がエディトリアルな洗練のためにフッターへ視覚的に食い込みます。

設定: 見出し、サブ見出し、プライマリ CTA、セカンダリ CTA、画像 (任意)、B2B 顧客向けに非表示 トグル。

B2B 顧客向けに非表示 トグルは小さくも重要なディテールです。CTA が 「販売店になる」 や 「見積依頼」 と表示される場合、すでにサインイン済みの販売店に表示したくはありません。これをオンにすると、customer.b2b? が真のときセクションは消えます。

newsletter​

セクションファイル: sections/newsletter.liquid

購読ボタン付きメールオプトイン。Shopify ネイティブの顧客ニュースレターフォームを使用 — 購読者は newsletter フラグ付きで Shopify 顧客リストに着地します。

industries-grid​

セクションファイル: sections/industries-grid.liquid

提供する業種を紹介するエディトリアルカードグリッド — HVAC · Manufacturing · Facilities · Marine · Aerospace。

ブロックごとの設定: 画像、タイトル、リンク。

resource-hub​

セクションファイル: sections/resource-hub.liquid

データシート、MSDS、ブローシャー、認証のダウンロードリスト。各エントリはファイルリンクです。

ブロックごとの設定: タイトル、ファイル (PDF)、説明、任意のアイコン。

services-grid​

セクションファイル: sections/services-grid.liquid

サービス提供向けの画像オーバーレイタイル — Cut to size · Custom kitting · Onsite consultation · Inventory management。

FAQ​

faq​

セクションファイル: sections/faq.liquid

ディスクロージャーベースのアコーディオン (完全なキーボード + スクリーンリーダー対応のため、ネイティブ <details> / <summary> で構築)。Google リッチスニペット向けに FAQPage JSON-LD を自動出力。

ブロックごとの設定: 質問 (テキスト)、回答 (リッチテキスト)。

標準でリッチスニペット

セクションは JSON-LD グラフを自動的に出力します — コードに触れずに Google 検索結果で FAQ リッチスニペットを取得できます。Google のコンテンツガイドラインが適用されるため、質問は購入者が実際に尋ねる本物の質問 (マーケティングコピーではない) であることを確認してください。

二重目的の統合セクション​

一部のセクションは 2 つのアイデアを 1 つの帯に組み合わせ、垂直スペースを節約してエディトリアルなリズムを作ります。

dual-brands-quickorder​

セクションファイル: sections/dual-brands-quickorder.liquid

50/50 統合: 一方にブランドロゴグリッド、もう一方に貼り付けからカートへのクイックオーダーパッド。同じ帯にトラストマークとコンバージョンパスを表示したい B2B ホームページに最適。

dual-resources-faq​

セクションファイル: sections/dual-resources-faq.liquid

50/50 統合: 一方にリソースダウンロード (データシート、ブローシャー)、もう一方に FAQ アコーディオン。サポートが重要な業界での一般的なペアリング。

セクションの順序付け推奨​

MRO / 工業用品ホームページの推奨順序:

  1. ヒーロー — バリュープロポジション + プライマリ CTA (カタログ vs RFQ)
  2. 統計バー — 即座の信頼性マーク
  3. 注目コレクション — ベストセラーまたはトップオブファネルカテゴリー
  4. マルチカラム — Why us を 3 カラムで
  5. 業種グリッド — 提供する業種
  6. ロゴリスト — 取り扱いブランド
  7. デュアル ブランド + クイックオーダー — トレードリスト CTA とペア
  8. お客様の声 — 評価付き購入者の引用
  9. リソースハブ — ダウンロード
  10. FAQ — トップ反対意見
  11. CTA バナー — Request a quote (サインイン済み B2B には非表示)
  12. ニュースレター — トレードリスト登録

Vertex Theme — Homepage palette

次のステップ​