Vertex の 4 つのデモストアフロント — Vertex、Throttle、OfficeIT、Inkline
1 つの Vertex テーマライセンス。本番対応の 4 つのストアフロックを取得。 各プリセットは特定の B2B / B2C 産業バーティカル向けに調整されています — 異なるアクセントカラー、異なるホームページ構成、異なるファインダー、異なるライフスタイル画像、異なるコピーフック。プリセット間の切り替えは、カスタマイザーでワンクリック(永続的)または 1 つの URL パラメーター(一時プレビュー)です。
複数のバーティカルにわたって販売している場合、または立ち上げ前にどのバーティカルをリードするかを決定している場合、これはストアフロントの正しい開始点を選択するガイドです。
Vertex を 4 回購入する必要は ありません。4 つのプリセットは同じテーマファイルで出荷されます。リミックスすることもできます — OfficeIT ホームページを選択しつつ Throttle アクセントカラーを使用したり、Custom palette ピッカーで任意のプリセットをオーバーライドしたりできます。これらは 開始点 であり、ロックインされたテンプレートではありません。
なぜ 4 つのプリセットなのか?
Shopify テーマストアは、レンジを実証するテーマを評価します。テーマディレクトリをスキャンするバイヤーは、自分のユースケースに精神的に翻訳しなければならない汎用「B2B テーマ」デモではなく、一目で 自分の業界 を見たいと思っています。
Vertex は、1 つのテーマライセンスで 4 つの完全に投入されたデモストアフロントを出荷することで、これに対処しています。各プリセットは:
- 業界調整済み — 色、コピー、ヒーロー構成、ホームページセクションの順序は、特定のバイヤージャーニーに合わせて選ばれています
- ファインダー対応 — 自動車部品は Make/Model/Year フィットメントファインダーを取得します; 印刷消耗品は Printer Brand/Model/Color ファインダーを取得します; 産業プリセットにはファインダーがありません(ファセットコレクションナビゲーションに依存します)
- 画像完備 — プリセットごとに約 9 枚のヒーロー / ライフスタイル / 業界グリッド画像、すべてそのバーティカルの美学のために生成されています。ストックフォトのミスマッチなし。
- 独立してテーマ可能 — 各プリセットには、アクセントカラー、ファインダーアクセント、プリセット固有のタイポグラフィの選択を反転する独自の CSS オーバーライドファイル(
assets/demo-{preset}.css)があります
結果: カスタムデザインを発注することなく、産業用 MRO ストアフロント、自動車部品カタログ、オフィス用品ディストリビューター、または印刷ショップサプライヤーとして Vertex を立ち上げることができます。
4 つのプリセットの詳細
プリセット 1 — Vertex(デフォルト)
| 業界 | 産業供給、MRO、ハードウェア、ファスナー、手工具、流体、研磨剤 |
| アクセントカラー | アンバー #fbbf24 |
| ファインダー | なし — ファセットフィルター + 予測検索に依存 |
| ホームページヒーロー | 大胆なタイポグラフィ + ワークショップ / 倉庫のライフスタイル画像 |
| B2B フック | "Volume pricing"、"NET-30 available"、"ISO 9001 certified"、"24-hr dispatch" |
| 最適な用途 | 汎用産業ディストリビューター、MRO サプライヤー、ファスナー / ハードウェアマーチ ャント、ツールカタログ、JanSan サプライヤー |
これがデフォルトです。 Shopify テーマストアから Vertex をインストールすると、これがロードされます。アンバーアクセントは、調達バイヤーがすぐに認識する温かい、産業的な McMaster-Carr / Grainger / Fastenal のビジュアル言語にマップされます。
プリセット 2 — Throttle(自動車部品)
| 業界 | 自動車部品、パフォーマンス、アフターマーケット、OEM 交換、オートバイ、マリン、パワースポーツ |
| アクセントカラー | レッドオレンジ #ec5f24 |
| ファインダー | Make / Model / Year フィットメントカスケード(3 つのドロップダウン) |
| ホームページヒーロー | 製品コレクションの 上 にファインダーを置いたフィットメント優先のメッセージング(「車両用のパーツを探す」) |
| B2B フック | "Trade pricing"、"Warehouse dispatch"、"OEM cross-reference"、"Dealer accounts" |
| 最適な用途 | 自動車部品ディストリビューター、パフォーマンスショップ、オートバイ / マリン / RV パーツ、ATV / UTV / パワースポーツ |
Throttle プリセットの特徴的な機能は フィットメントファインダー です — ホームページヒーロー、コレクションページサイドバー、およびオプションのスティッキーバーでレンダリングされる 3 ステップのカスケードドロップダウン(Make ▸ Model ▸ Year)。バイヤーは車両を一度選択します; 後続の製品ビューは、フィットメント一致パーツのみにフィルタリングされます。
レッドオレンジアクセントは、パフォーマンス / 自動車 / エネルギー のビジュアル言語にマップされます — RockAuto + Summit Racing を 1 つのテーマで。
プリセット 3 — OfficeIT(オフィス、IT、電子機器)
| 業界 | オフィス用品、IT ハードウェア、電子機器、コピー用紙、モニター、キーボード、ノート PC、バルク消耗品 |
| アクセントカラー | ブルー(コーポレート、IT グレード) |
| ファインダー | Brand / Category / Capacity カスケード(3 つのドロップダウン) — 例: 「HP ▸ Toner ▸ 5000 pages」 |
| ホームページヒーロー | バルクオーダーメッセージング、B2B アカウントフック、NET-30 / 請求書請求 CTA |
| B2B フック | "Bulk discounts"、"Net-30 for business"、"Free shipping over $X"、"Dedicated account manager" |
| 最適な用途 | オフィス用品ディストリビューター、IT リセラー、電子機器卸売業者、学校 / 政府供給、企業調達ベンダー |
OfficeIT は バルク B2B オフィスオーダー をリードします — バイヤージャーニーは「1 つのマウスが必要」ではなく「50 席のオフィスを整える必要がある」です。ヒーローコピーと CTA はバルクオーダー、RFQ、NET-30 を目立たせて表示します; ホームページは標準のフィーチャーコレクションの上にバルクオーダークイックパッドをフィーチャーします。
ブルーアクセントは、このカテゴリーのバイヤーが期待する 企業 IT / Quill / Staples Business Advantage のビジュアル言語にマップされます。
各プリセットの内部にあるもの
各プリセットに は、これらのアセットの独自のコピーが出荷されます:
| アセット | プリセットごとのバリアント |
|---|---|
| ホームページテンプレート | templates/index.json(デフォルト Vertex)+ templates/index.throttle.json、index.officeit.json、index.printsupply.json |
| コレクションテンプレート | templates/collection.json + セクションの順序が異なるプリセットごとのバリアント(例: Throttle はファインダーをフィルターの上に配置します) |
| 製品テンプレート | templates/product.json + プリセットごとのバリアント(例: Inkline は「互換性のあるプリンター」タブを追加します) |
| CSS オーバーライド | assets/demo-{preset}.css — --color-accent、--color-on-accent、ファインダーアクセント、グラデーションストップをオーバーライド |
| ヒーロー画像 | プリセットごとに約 3 つのヒーローバリアント、すべてバーティカルの美学のために生成 |
| ライフスタイル画像 | プリセットごとに約 3 枚のライフスタイル写真(ワークショップ / ディーラー / オフィス / 印刷ショップ) |
| 業界グリッド画像 | プリセットごとに約 3 枚の業界カード画像(例: Vertex には HVAC + 製造業 + 施設; Throttle には自動車 + オートバイ + ボート) |
| デモコピー | ヒーロー見出し、サブヘッド、CTA ラベル、お客様の声テキスト — すべてプリセットごとに調整 |
これは、 プリセットの切り替えが「1 つの色を変えて祈る」ではなく、一貫したストアフロントスワップであることを意味します。
プリセットの切り替え方法
切り替えには 2 つの方法 があります — 永続的および一時プレビュー。
永続的 — カスタマイザー経由
- Shopify 管理画面を開き、Online Store ▸ Themes に移動。
- Vertex の Customize をクリック。
- 左サイドバーで、Theme settings ▸ Colors をクリック。
- Starter color palette までスクロール。
- 以下のいずれかを選択:
- Custom — 完全にカスタムのパレット(以下の手動カラーピッカーを使用)
- Vertex — アンバー産業用(デフォルト)
- Throttle — レッドオレンジ自動車部品
- OfficeIT — コーポレートブルー
- Inkline — 印刷/レプロティール
- 右上で Save。
アクセントカラーは即座に反転します。そのプリセットのレイアウ トにホームページもスワップするには、以下の ホームページテンプレートの切り替え を参照してください。
Theme settings ▸ Colors の カラープリセット は色を反転するだけです。完全なプリセットエクスペリエンス(ホームページレイアウト、ファインダー、ライフスタイル画像)を取得するには、対応するホームページテンプレートサフィックスも適用する必要があります — 次のセクションを参照してください。
一時的 — URL プレビュー経由
任意のストアフロント URL でプリセットをプレビューするには、適用せずに:
| プリセット | プレビュー URL パラメーター |
|---|---|
| Vertex | (デフォルト — パラメーターなし) |
| Throttle | ?view=throttle |
| OfficeIT | ?view=officeit |
例えば:
https://your-store.myshopify.com/?view=throttle
https://your-store.myshopify.com/collections/all?view=officeit
これは Shopify のネイティブテンプレートサフィックス機能 を使用します — ストアフロントは、その単一ページビューに対して代替テンプレートファイル(index.throttle.json)を使用してレンダリングします。何も保存されません; パラメーターなしで更新するとデフォルトに戻ります。
これを使用して:
- コミットする前に小さなオーディエンスでプリセットを A/B テスト
- ステークホルダーにデモ URL を送信(「自動車部品バージョンの当社のストアがどのように感じるかを見てください」)
- 2 つのブラウザタブでヒーロー構成を並べて比較
ホームページテンプレートの切り替え
プリセットのホームページレイアウトを 永続的に 適用するには:
- Online Store ▸ Themes ▸ Customize ▸ Home を開く。
- 上部のテンプレートセレクターで、Add template を選択するか、プリセットの
index.{preset}.jsonバリアントを選択します。 - 保存。
または、ページセットアップで関連する テンプレートサフィックス 付きのホームページを設定するか、慣れている場合は settings_data.json を直接編集します。
プリセットのホームページをそのアクセントと一緒に使用することを強制するものは何もありません。Throttle のホームページレイアウト(フィットメントファインダー優先の構成が好きだから)を、Inkline のティールアクセント(ブランドに合うから)と、OfficeIT のバルクオーダーパッドセクション(バイヤーがスプレッドシートから貼り付けるから)と一緒に使用できます。Vertex は構 成可能です。
アクセントカラーオーバーライドの仕組み
各プリセットは assets/demo-{preset}.css に小さな CSS ファイルを出荷します:
/* assets/demo-throttle.css */
:root {
--color-accent: 236 95 36; /* ec5f24 — Throttle red-orange */
--color-on-accent: 255 255 255;
}
.finder-bar { --finder-accent: var(--color-accent); }
Starter color palette 設定が Throttle に設定されている場合、レイアウトには {% if settings.starter_palette == 'throttle' %}{{ 'demo-throttle.css' | asset_url | stylesheet_tag }}{% endif %} を介してこのファイルが含まれます。
アクセント CSS 変数 --color-accent + --color-on-accent は、すべてのコンポーネント — ボタン、ピル、バッジ、リンク、フォーカスリング、ドロップダウンハイライト、B2B グリーティングバー、ファインダードロップダウン、ヒーロー CTA — に流れます。パレットを反転すると、ストアフロント全体のアクセントが 1 つのレンダリングで反転します。
これは、以下によって 独自のプリセットをオーサリング できることも意味します:
- 既存の
demo-*.cssファイルの 1 つをコピー demo-mybrand.cssに名前変更--color-accent+--color-on-accent値を調整layout/theme.liquidで別の{% if %}分岐に接続- (オプション)
templates/index.mybrand.jsonに対応するホームページテンプレートを追加
パワーユーザーは 1 時間以内に 5 番目のプリセットを作成できます。
プリセットの選択 — 決定マトリックス
開始点を選択するためにこれを使用してください。後で何でもオーバーライドできることを忘れないでください。
| 販売する場合... | 開始する | 理由 |
|---|---|---|
| ファスナー、手工具、潤滑剤、研磨剤、ハードウェア、一般 MRO | Vertex | 汎用産業ベースライン、ファインダー不要(ファセットフィルターが仕事をします) |
| 自動車 / オートバイ / マリン / RV / パワースポーツパーツ | Throttle | フィットメントファインダーはこのバーティカルの決め手機能です |
| オフィス、IT、電子機器、コピー用品、学校 / 政府供給 | OfficeIT | バルク B2B オフィスオーダー + コーポレート IT ビジュアル言語 |
| プリンターインク、トナー、大判用紙、レプログラフィクス消耗品 | Inkline | プリンターカートリッジファインダーは、このバーティカルの #1 のバイヤーエラーを排除します |
| 清掃 / サニテーション(JanSan) | Vertex | Vertex の MRO ベースラインは JanSan にクリーンにマップされます; 特殊なファインダーは不要 |
| 技術データシート付きの工業用化学品 / 潤滑剤 | Vertex | 技術仕様テーブル + ドキュメントブロックは Vertex プリセットのコアです |
| 建設資材(木材、コンクリート、乾式壁) | Vertex | Vertex ベースライン + バルクオーダーページがうまく機能します; よりクールなパレットが欲しい場合は OfficeIT ブルーを検討 |
| カスタムロゴ印刷付き販促品 | Inkline | ファインダーがインク/トナーにとってより有用であっても、ティールアクセント + 印刷ショップビジュアル言語はカテゴリーに合致します |
| 卸売のみ(B2C なし) | Vertex または OfficeIT | どちらも機能します; ブランドに合うアクセントを選択。Storefront モード を B2B-only に切り替えます。 |
プリセットのカスタマイズ
プリセットは 開始点 です。インストール後、以下が可能です:
| カスタマイズ | 方法 |
|---|---|
| アクセントカラー | Theme settings ▸ Colors ▸ Starter palette ▸ Custom、次に独自の --color-accent を選択 |
| ロゴ | Theme settings ▸ Logo — デモロゴを独自の SVG または PNG に置き換え |
| ホームページセクションの順序 | カスタマイザー ▸ Home — セクションをドラッグして並べ替え、または 30 種類以上のセクションパレットからセクションを追加/削除 |
| ヒーロー画像 | カスタマイザーで Hero セクションをクリックし、各スライドの画像を置換 |
| ライフスタイル / 業界画像 | カスタマイザーでセクションごとに置換; 各セクションには画像ピッカーがあります |
| ファインダードロップダウンラベル + データ | (Throttle / OfficeIT / Inkline) — メタフィールド駆動データ構造については ファインダーセットアップガイド を参照 |
| タイポグラフィ | Theme settings ▸ Typography — 見出しフォント、ボディフォント、スケール比率 |
| コピー / CTA | すべてのセクションについてカスタマイザーでテキストをインラインで編集 |
| 翻訳 | Theme settings ▸ Languages — locales/*.schema.json オーバーライドを介してカスタム文字列を提供 |
カスタマイズ後、作業を Online Store ▸ Themes ▸ Theme library に 名前付きテーマ として保存できます — A/B テストの実行やビジュアル変更のステージング時に有用です。
関連資料
- 概要 — Vertex が 1 つのテーマで 4 つのプリセットを出荷する理由
- インストール — テーマインストール + セットアップ中のプリセット選択
- テーマ設定リファレンス — Colors ▸ Starter palette とプリセットごとの設定
- Markets & 多通貨 — 各プリセットはすべてのマーケットで同一に機能します
- Storefront モードガイド — Hybrid / B2B-only / B2C-only がプリセットとどのように相互作用するか
- 顧客アカウントダッシュボード — すべてのプリセットで同一(アクセントカラーのみ反転)
- RFQ ページガイド — すべてのプリセットで同一
- B2B セットアップガイド — 同じ B2B 構成が 4 つのプリセットすべてで機能します
まとめ
- Vertex は単一のテーマライセンスで 4 つのデモプリセット を出荷します: Vertex(産業アンバー)、Throttle(自動車部品レッドオレンジ)、OfficeIT(オフィス/IT ブルー)、Inkline(印刷消耗品ティール)。
- 各プリセットには独自のホームページテンプレート、ファインダー、アクセント CSS、約 9 枚のライフスタイル画像があります。
- Theme settings ▸ Colors ▸ Starter palette で 永続的に + プリセットのホームページテンプレートサフィックスを適用することで切り替えます。
- 任意のストアフロント URL に
?view=throttle | officeit | printsupplyを追加してプレビュー用に 一時的に 切り替えます。 - プリセットは開始点 — アクセントカラー、ホームページレイアウト、ファインダー、画像 、コピーはすべて独立してオーバーライド可能です。
- 5 番目のカスタムプリセットは、既存の
demo-*.cssファイルをコピーしてlayout/theme.liquidに接続することで、約 1 時間でオーサリングできます。