ファインダーセクション(カスケードドロップダウン)
Vertex の Finder セクションは、カスケードドロップダウン式の商品発見ウィジェットです。バイ ヤーは連続する 3 つの値 — Make → Model → Year、または Brand → Category → Capacity、または Printer Brand → Model → Color — を選択することで、必要な部品まで正確に絞り込みます。すると、ファインダーはフィルタリングされたコレクションへ案内します。
Vertex は 1 つのデモ(産業用 / MRO)を出荷し、同じ Finder セクションが、そこから作る 自動車部品、オフィス & IT、印刷消耗品 の構成を支えます。セットアップできる ファインダータイプは 3 つ あります:
- 自動車部品 — Make / Model / Year
- オフィス & IT — Brand / Category / Capacity
- 印刷消耗品 — Printer Brand / Model / Color
デフォルトの Vertex(産業)デモにはファインダーが付属しません — 代わりにファセットコレクションフィルターと予測検索に依存します。
業界ごとに異なるセクションをインストールするわけではありません — どの構成でも 同じ Finder セクション です。各構成は、独自のドロップダウン ラベル と オプションリスト(Make/Model/Year、Brand/Category/Capacity、または Printer Brand/Model/Color)を埋め込んでいるだけです。カスケードを別の業種に切り替えるのは、それらのラベルとオプションを編集するだけのことです。
Make/Model/Year ファインダー
ファインダーは 3 段カスケードです。レベル 1 を選択 → レベル 1 の選択に基づいてレベル 2 のオプションが入る → レベル 2 を選択 → レベル 3 のオプションが入る → Submit をクリック → フィルタリングされたコレクションへ移動します。
Shopify 管理画面 → オンラインストア → テーマ → カスタマイズ を開きます。ページエディタで セクションを追加 をクリックし、Finder を選択します。
設定
- 見出し — 「あなたの車に合う部品を探す」 または 「あなたのプリンターに合うトナーを探す」。
- 導入テキスト — 短い安心感 — 「メーカー、モデル、年式を選択して、互換性のある部品を確認してください。」。
- ドロップダウン 1 / 2 / 3 のラベル — 各レベルの表示ラベル — 例: Make、Model、Year。これらのラベル(と下記のオプションブロック)を変更すれば、同じセクションを任意のカスケードに変えられます。
- クエリパラメータ名(ドロップダウンごと) — 各レベルが検索/コレクションリンクに追加する URL パラメータ(例:
make、model、year)。空白のままにするとq1/q2/q3がデフォルトになります。 - Submit ボタンのラベル — 「部品を探す」 または 「トナーを探す」。
- フォームアクション URL — フォームの送信先。デフォルトは
/searchです。コレクションをフィルタリングするには、コレクション URL(例:/collections/all)を指定します。 - 配色 — 標準の配色ドロップダウン(Light / Accent band / Dark)。
- 垂直パディング — ファインダー帯の上下の余白の量。
各ドロップダウンの選択肢は、セクションに追加する オプションブロック から取得されます — 選択肢ごとに 1 ブロックです。ドロップダウン 2 / 3 のオプションには Parent value を設定でき、一致する親の選択が行われたときにのみ表示されるようになります — これがカスケードが絞り込まれる仕組みです。
3 つのファインダータイプ
1. Make / Model / Year — 自動車部品の構成
フィットメント駆動のカタログを持つ 自動車部品ディストリビューター 向け。
カスケード:
- Make — Ford、Toyota、Chevrolet、BMW など
- Model — 選択した Make から入る(F-150、Camry、Silverado、3 Series)
- Year — 選択した Make と Model から入る(2018、2019、2020、...)
Submit: バイヤーを、その車両でタグ付けされた商品にフィルタリングされた、一致するコレクションへ案内します。
データ設定: テーマエディタでセクションにオプションブロックとして選択肢を直接追加します:
- 各 Make に ドロップダウン 1 のオプション(Ford、Toyota、Chevrolet…)
- 各 Model に ドロップダウン 2 のオプション を追加し、その Parent value を所属する Make に設定
- 各 Year に ドロップダウン 3 のオプション を追加し、その Parent value を所属する Model に設定
次に、送信される URL が一致するようにコレクションにタグ付けします(Vertex は Shopify ネイティブのタグベースフィルタリングを使用します)。
2. Brand / Category / Capacity — オフィス & IT の構成
オフィス、IT、エレクトロニクスディストリビューター 向け。
カスケード:
- Brand — HP、Dell、Lenovo、Apple、Cisco
- Category — 選択した Brand から入る(Laptops、Monitors、Routers、Printers)
- Capacity — 選択した Brand と Category から入る(8 GB / 16 GB / 32 GB · 24" / 27" / 32" など)
Submit: バイヤーを、一致するブランドとカテゴリーのコレクションへ案内します。
データ設定: テーマエディタでオプションブロックとして選択肢を追加します — 各 Brand にドロップダウン 1 のオプション、各 Category にドロップダウン 2 のオプション(その Parent value を Brand に設定)、各 Capacity にドロップダウン 3 のオプション(その Parent value を Category に設定)。
3. Printer Brand / Model / Color — 印刷消耗品バリアント
特定の プリンターに適合する必要があるトナー、インク、消耗品を販売する 印刷消耗品ディストリビューター 向け。
カスケード:
- Printer Brand — HP、Canon、Brother、Epson、Xerox など
- Printer Model — 選択した Brand から入る(LaserJet Pro M404、PIXMA TR8620 など)
- Color — 選択した Brand と Model から入る(Black、Cyan、Magenta、Yellow、または Multi-pack)
Submit: バイヤーを、そのプリンターに対応するカートリッジにフィルタリングされた、一致するコレクションへ案内します。
データ設定: テーマエディタでオプションブロックとして選択肢を追加します — 各 Printer Brand にドロップダウン 1 のオプション、各 Printer Model にドロップダウン 2 のオプション(その Parent value を Brand に設定)、各 Color にドロップダウン 3 のオプション(その Parent value を Model に設定)。
このカスケードは 印刷消耗品 構成の決め手となる機能です。設定すれば、印刷消耗品のストアフロントは、すぐに使えるトナーファインダーを手に入れられます — サンプルのオプションを自社のプリンターラインナップに差し替えるだけです。
カスケードの仕組み
ファインダーの選択肢は、セクションに追加するオプションブロックから取得されるため、すべてがページに組み込まれています。そこから:
- ページ読み込み時、レベル 1 のオプションがそのドロップダウン 1 のオプションブロックから入ります
- バイヤーがレベル 1 を選択すると、レベル 2 は Parent value がレベル 1 の選択と一致するオプションに絞り込まれます
- バイヤーがレベル 2 を選択すると、レベル 3 は Parent value がレベル 2 の選択と一致するオプションに絞り込まれます
- 送信時、バイヤーは検索結果またはコレクションへ案内され、各レベルがそのクエリパラメータとして追加されます
オプションは読み込み時にページに組み込まれているため、追加のネットワーク要求はなく、カスケードは即座です。
最初のレベルのオプションはページに直接組み込まれているため、バイヤーのブラウザで JavaScript が無効になっていてもファインダーは動作します — 最初のレベルだけで送信して、フィルタリングされた結果にランディングできます。これは Vertex 全体で見られるのと同じプログレッシブエンハンスメントの哲学です。
ファインダーデータのセットアップ
各ファインダータイプで、次を実行する必要があります:
- 3 つのドロップダウンラベルを設定 して、カスケードに合わせます(例: Make / Model / Year)。クリーンな URL が必要な場合は、各レベルの クエリパラメータ名 も設定します。
- 選択肢ごとにオプションブロックを追加 — トップレベルの値ごとに 1 つのドロップダウン 1 オプション、次にドロップダウン 2 と 3 のオプションを、各レベルが次のレベルを絞り込むように Parent value を設定して追加します。
- フォームアクション URL を指定 —
/search(デフォルト)またはコレクション(例:/collections/all)に向けます。 - コレクションにタグ付け して、フィルター URL が一致するようにします。Vertex は Shopify ネイティブのタグベースフィルタリングを使用するため、「Ford F-150 部品」 のコレクションには
vehicle:ford-f-150タグを付ける必要があります。
→ どのファインダータイプ(自動車部品、オフィス & IT、印刷消耗品)も同じ 3 ステップに従います — カスケードに合わせてラベルを設定し、選択肢ごとにオプションブロックを追加し、独自の値に差し替えます。
ファインダーを配置する場所
| 配置場所 | 最適な対象 |
|---|---|
| ホームページ上部、ヒーローのすぐ下 | ファインダー 自体 がホームページのバリュープロップとなる業種(自動車部品、印刷消耗品) |
| ヒーロー内(サイドパネルとして) | ヒーロー画像がバリュープロップを担い、ファインダーが並行する CTA となる業種 |
| 注目コレクションの下 | ファインダーが複数の閲覧パスの 1 つに過ぎない業種 |
| 専用のファインダーページ | ファインダーが主要なナビゲーション手段となる業種 — ヘッダーのセカンダリメニューからリンク |
自動車部品と印刷消耗品の構成はファインダーをヒーローの下に配置します。オフィス & IT の構成はヒーロー内に小型バリアントを使用します。
B2B + ファインダー
サインイン済み B2B バイヤーの場合、ファインダーはフィルタリングされたコレクションへ案内します — そしてそのコレクションは、バイヤーの B2B カタログスコープ を尊重します。つまり Ford F-150 検索は、バイヤーのカタログ内の F-150 部品のみを、バイヤーのボリューム価格階層を適用して表示します。
ファインダー自体は カタログでフィルタリングしません — そのフィルタリングは、着地後にコレクションページで行われます。これは正しい分離です: ファインダーは正しい商品ファミリーに絞り込み、コレクションは正しい価格でバイヤーが購入できるものだけを表示します。
ファインダーデータ品質のヒント
- エントリーでは 一貫した大文字小文字を使用 してください(常に Ford、決して FORD や ford ではない) — カスケードは文字列を完全一致で照合します
- エントリー値で 末尾の空白を避けてください — 目に見えない空白でもカスケードが壊れます
- すべてのエントリーで 3 段すべてを入力してください — 不完全なエントリーは、欠落したレベル以降のすべてのユーザーでカスケードを壊します
- 対象コレクションには適切なデフォルトを設定してください — 部分的な選択を送信した(または選択が一致しない)バイヤーはここにランディングします
次のステップ
- Vertex でできること → — 自動車部品、オフィス & IT、印刷消耗品の構成
- ホームページマーケティング → — ホームページフロー内でファインダーを配置する場所
- 商品ページセクション → — バイヤーの完全な旅程のために、技術仕様とドキュメントがファインダーとどう組み合わさるか
- テーマ設定リファレンス → — Starter カラーパレットによる再カラーリング