Vertex でできること
Vertex は 1 つの既製スタイル — 産業用 / MRO ストアフロント — としてインストールされます。 しかし、同じセクション、カス ケードファインダー、カラーシステムは、まったく異なる B2B バーティカルにも柔軟に対応します。このページでは、自動車部品、オフィス & IT、印刷消耗品 向けに構成した Vertex がどのようになるかを紹介し、そこへ到達するための実際のマーチャント向けの 2 つの操作レバーを案内します。
Vertex のデモは 1 つ(産業用 / MRO)だけです。以下の自動車部品、オフィス & IT、印刷の見た目は、別途インストールできるテーマ ではなく、URL プレビューもありません — これらは、たった 2 つの設定、カラーパレット と 設定可能なファインダー を使って、同じテーマから 自分で作る構成 です。それぞれは、テーマエディターでセットアップしてから自社ブランドに合わせてカスタマイズする出発点です。
デフォルト — Vertex(産業用 / MRO)
これは Vertex をインストールしたときにロー ドされるものです。
| 業種 | 産業供給、MRO、ハードウェア、ファスナー、手工具、流体、研磨剤 |
| アクセントカラー | アンバー |
| ファインダー | デフォルトではなし — ファセットフィルター + 予測検索 |
| ホームページヒーロー | 大胆なタイポグラフィ + ワークショップ / 倉庫の画像 |
| B2B フック | "Volume pricing"、"NET-30 available"、"ISO 9001 certified"、"24-hr dispatch" |
| 最適な用途 | 産業ディストリビューター、MRO サプライヤー、ファスナー / ハードウェアマーチャント、ツールカタログ、JanSan |
アンバーアクセントは、調達バイヤーがすぐに認識する温かい、産業的な McMaster-Carr / Grainger / Fastenal のビジュアル言語にマップされます。
他の業種では Vertex はどう見えるか
以下の各見た目は別個のテーマではなく 構成 です — 同じ Vertex ストアフロントを、そのバーティカル向けに カラーパレット で再カラーリング し、ファインダーで再設定したものです。テーマエディターで作成します。別途インストールするデモも、プレビューする URL もありません。
自動車部品
| 業種 | 自動車部品、パフォーマンス、アフターマーケット、OEM、オートバイ、マリン、パワースポーツ |
| アクセントカラー | レッドオレンジ(カラーパレット: Signal red) |
| ファインダー | Make / Model / Year フィットメントカスケード(3 つのドロップダウン) |
| 最適な用途 | 自動車部品ディストリビューター、パフォーマンスショップ、オートバイ / マリン / RV / パワースポーツ |
| カラーパレット | Signal red |
特徴的な機能は フィットメントファインダー です — 自社のカタログに合わせて設定する Make ▸ Model ▸ Year の 3 ステップカスケードです。バイヤーは車両を一度選択するだけで、フィットメント一致パーツを表示できます。設定方法は ファインダーセットアップガイド を参照してください。レッドオレンジアクセントは、パフォーマンス / 自動車 のビジュアル言語にマップされます。
以下は、自動車部品向けに構成した Vertex の見た目です — Signal red カラーパレットと Make / Model / Year フィットメントファインダー の組み合わせ:
オフィス & IT
| 業種 | オフィス用品、IT ハードウェア、電子機器、用紙、モニター、キーボード、バルク消耗品 |
| アクセントカラー | ブルー(カラーパレット: Office blue) |
| ファインダー | Brand / Category / Capacity カスケード — 例: 「HP ▸ Toner ▸ 5000 pages」 |
| 最適な用途 | オフィス用品ディストリビューター、IT リセラー、電子機器卸売業者、学校 / 政府供給 |
| カラーパレット | Office blue |
バルク B2B オフィスオーダー をリードします — バルクオーダーパッド、RFQ、NET-30 を目立たせて表示します。ブルーアクセントは、バイヤーが期待する 企業 IT / Quill / Staples Business Advantage の言語にマップされます。
以下は、オフィス & IT 向けに構成した Vertex の見た目です — Office blue カラーパレットと Brand / Category / Capacity ファインダー の組み合わせ:
印刷消耗品
| 業種 | 印刷消耗品、トナー、インクカートリッジ、レプログラフィクス、コピー機消耗品、ラベルメディア |
| アクセントカラー | ティール(カラーパレット: Inkline teal) |
| ファインダー | Printer Brand / Model / Color カスケード — 例: 「HP ▸ LaserJet Pro M404 ▸ Black」 |
| 最適な用途 | トナー / インクリセラー、レプログラフィクスショップ、マネージドプリントサービスベンダー |
| カラーパレット | Inkline teal |
プリンターカートリッジファインダー をリードします — バイヤーはブランド、モデル、色を選択し、一致するカートリッジにたどり着きます。ティールアクセントはクリーンでオフィス印刷的な印象を与え、オフィス & IT ファミリーとよく調和しつつも単独で成立します。
以下は、印刷消耗品向けに構成した Vertex の見た目です — Inkline teal カラーパレットと Printer Brand / Model / Color ファインダー の組み合わせ:
そこへ到達するためのレバー
これらに別途見た目をインストールする必要はありません — 単一の Vertex テーマを、2 つの実際のマーチャント向けツールで形作ります。
1. Starter カラーパレット(ワンクリックで再カラーリング)
Theme settings ▸ Colors ▸ Starter color palette は、すべてのボタン、ピル、バッジ、リンク、フォーカスリング、B2B グリーティングバー、ファインダードロップダウン、ヒーロー CTA にわたって、1 つのグローバルアクセントを反転します:
- Custom — 独自のパレット(下の手動カラーピッカー)
- Custom(デフォルトでアンバー) · Signal red · Office blue · Inkline teal
保存すると、ストアフロント全体のアクセントが即座に反転します。完全にカスタムのブランドカラーには、Custom を選択して 独自のアクセント + 「on accent」(アクセント上のテキスト)カラーを設定してください。
2. 設定可能なカスケードファインダー
ファインダー(Make/Model/Year、Brand/Category/Capacity、Printer/Model/Color — または独自のラベル)は、テーマエディターから追加・設定するセクションです — ファインダーセットアップガイド を参照してください。
どの構成が自分に合うか?
最も近い出発点を選び、そこから Vertex を合わせていきます(カラーパレット + ファインダー)。後で何でもオーバーライドできます。
| 販売する場合... | 最も近い構成 | 理由 |
|---|---|---|
| ファスナー、手工具、潤滑剤、研磨剤、ハードウェア、一般 MRO | Vertex(デフォルト) | 産業ベースライン、ファインダー不要(ファセットフィルターが仕事をします) |
| 自動車 / オートバイ / マリン / RV / パワースポーツパーツ | 自動車部品(Signal red) | Make/Model/Year フィットメントファインダーが決め手の機能です |
| オフィス、IT、電子機器、コピー機用品、学校 / 政府供給 | オフィス & IT(Office blue) | バルク B2B オーダー + 企業 IT のビジュアル言語 |
| トナー、インク、カートリッジ、レプログラフィクス、マネージドプリント消耗品 | 印刷消耗品(Inkline teal) | Printer Brand/Model/Color ファインダーが決め手の機能です |
| 清掃 / サニテーション(JanSan) | Vertex | MRO ベースラインがクリーンにマップされます。特殊なファインダーは不要 |
| 技術データシート付きの工業用化学品 / 潤滑剤 | Vertex | 技術仕様テーブルとドキュメントブロックは Vertex のコアです |
| 卸売のみ(B2C なし) | Vertex または オフィス & IT | ブランドに合うアクセントを選択。Storefront モード を B2B-only に設定します |
カスタマイズ
どの出発点を選んでも、すべてはテーマエディターからオーバーライド可能です:
| カスタマイズ | 方法 |
|---|---|
| アクセントカラー | Theme settings ▸ Colors ▸ Starter palette ▸ Custom、次に独自のアクセントを選択 |
| ロゴ | Theme settings ▸ Logo — デモロゴを独自の SVG または PNG に置き換え |
| ホームページセクションの順序 | テーマエディター ▸ Home — ドラッグして並べ替え、またはセクションを追加・削除 |
| ヒーロー / ライフスタイル画像 | 各セクションの Image ピッカーでセクションごとに置換 |
| ファインダーのラベルとデータ | ファインダーセットアップガイド |
| タイポグラフィ | Theme settings ▸ Typography — 見出しフォント、ボディフォント、スケール比率 |
| コピー / CTA | すべてのセクションについてテーマエディターでテキストをインライン編集 |
| 翻訳 | Theme settings ▸ Languages — 言語エディターでカスタム文字列を提供 |
設定したストアフロントは、Online Store ▸ Themes ▸ Theme library に 名前付きテーマ として保存できます — A/B テストやビジュアル変更のステージングに有用です。
関連資料
- 概要 — Vertex とは何か、v1.0 で何が同梱されるか
- インストール — インストールと Starter パレットの選択
- テーマ設定リファレンス — Colors ▸ Starter palette とアクセント設定
- ファインダーセットアップガイド — 自社カタログ向けのカスケードファインダーを設定
- Markets & 多通貨 — すべてのマーケットで同一に機能します
- Storefront モードガイド — Hybrid / B2B-only / B2C-only
- RFQ ページガイド — 見積もり依頼のセットアップ
まとめ
- Vertex は 1 つの既製スタイル — 産業用 / MRO(アンバー)— を出荷します。
- 自動車部品、オフィス & IT、印刷の見た目は、その 1 つのデモから 2 つのレバー — カラーパレット と 設定可能なファインダー — だけで 自分で作る構成 です。
- これらは別途インストールできるテーマではなく、URL プレビューもありません — テーマエディターでセットアップします。
- すべて(アクセント、レイアウト、ファインダー、画像、コピー)はテーマエディターからオーバーライド可能です。