ファインダーセクション(カスケードドロップダウン)
Vertex の Finder セクションは、カスケードドロップダウン式の商品発見ウィジェットです。バイヤーは連続する 3 つの値 — Make → Model → Year、または Brand → Category → Capacity、または Printer Brand → Model → Color — を選択することで、必要な部品まで正確に絞り込みます。すると、ファインダーはフィルタリングされたコレクションへ案内します。
Vertex には 4 つのデモプリセット が付属します — Vertex(産業 / MRO)、Throttle(自動車部品)、OfficeIT(オフィス & IT)、Inkline(印刷消耗品)です。ファインダータイプは 3 つ あり、Finder セクションは 4 つのうち 3 つのプリセットにデフォルトで組み込まれています:
- Throttle(自動車部品) — Make / Model / Year
- OfficeIT(オフィス & IT) — Brand / Category / Capacity
- Inkline(印刷消耗品) — 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 — Throttle プリセット
フィットメント駆動のカタログを持つ 自動車部品ディストリビューター 向け。
カスケード:
- 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 — OfficeIT プリセット
オフィス、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 に設定)。
このカスケードは Inkline 印刷消耗品プリセットにあらかじめ設定されているため、印刷消耗品のストアフロントは、すぐに使えるトナーファインダーをそのまま手に入れられます — デモのオプションを自社のプリンターラインナップに差し替えるだけです。
カスケードの仕組み
ファインダーの選択肢は、セクションに追加するオプションブロックから取得されるため、すべてがページに組み込まれています。そこから:
- ページ読み込み時、レベル 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タグを付ける必要があります。
→ 3 つのデモプリセット(Throttle、OfficeIT、Inkline)には、すでに完全に設定されたファインダーが付属しています — 1 つを複製して、独自のラベルとオプションに差し替えてください。
ファインダーを配置する場所
| 配置場所 | 最適な対象 |
|---|---|
| ホームページ上部、ヒーローのすぐ下 | ファインダー 自体 がホームページのバリュープロップとなる業種(自動車部品、印刷消耗品) |
| ヒーロー内(サイドパネルとして) | ヒーロー画像がバリュープロップを担い、ファインダーが並行する CTA となる業種 |
| 注目コレクションの下 | ファインダーが複数の閲覧パスの 1 つに過ぎない業種 |
| 専用のファインダーページ | ファインダーが主要なナビゲーション手段となる業種 — ヘッダーのセカンダリメニューからリンク |
Throttle と Inkline のプリセットはファインダーをヒーローの下に配置します。OfficeIT プリセットはヒーロー内に小型バリアントを使用します。
B2B + ファインダー
サインイン済み B2B バイヤーの場合、ファインダーはフィルタリングされたコレクションへ案内します — そしてそのコレクションは、バイヤーの B2B カタログスコープ を尊重します。つまり Ford F-150 検索は、バイヤーのカタログ内の F-150 部品のみを、バイヤーのボリューム価格階層を適用して表示します。
ファインダー自体はカタログでフィルタリングしません — そのフィルタリングは、着地後にコレクションページで行われます。これは正しい分離です: ファインダーは正しい商品ファミリーに絞り込み、コレクションは正しい価格でバイヤーが購入できるものだけを表示します。
ファインダーデータ品質のヒント
- エントリーでは 一貫した大文字小文字を使用 してください(常に Ford、決して FORD や ford ではない) — カスケードは文字列を完全一致で照合します
- エントリー値で 末尾の空白を避けてください — 目に見えない空白でもカスケードが壊れます
- すべてのエントリーで 3 段すべてを入力してください — 不完全なエントリーは、欠落したレベル以降のすべてのユーザーでカスケードを壊します
- 対象コレクションには適切なデフォルトを設定してください — 部分的な選択を送信した(または選択が一致しない)バイヤーはここにランディングします
次のステップ
- デモプリセットガイド → — ターンキーの出発点としての Throttle、OfficeIT、Inkline
- ホームページマーケティング → — ホームページフロー内でファインダーを配置する場所
- 商品ページセクション → — バイヤーの完全な旅程のために、技術仕様とドキュメントがファインダーとどう組み合わさるか
- テーマ設定リファレンス → — デモプリセットの切り替え