Ana içeriğe geç

Bulucu Bölümleri (Kademeli Açılır Menüler)

Vertex finder bölümü, kademeli açılır menü ürün keşif widget'ıdır. Alıcılar, 3 ardışık değer seçerek ihtiyaç duydukları tam parçaya daralırlar — Marka → Model → Yıl veya Marka → Kategori → Kapasite veya Yazıcı Markası → Model → Renk — ve bulucu onları filtrelenmiş koleksiyona yönlendirir.

Vertex dört demo ön ayarla birlikte gelir — Vertex (endüstriyel / MRO), Throttle (otomotiv parçaları), OfficeIT (ofis ve IT) ve Inkline (baskı malzemeleri). Üç bulucu türü vardır ve bulucu bölümü varsayılan olarak dört ön ayardan üçünde bağlıdır:

  • Throttle (otomotiv parçaları) — Marka / Model / Yıl
  • OfficeIT (ofis ve IT) — Marka / Kategori / Kapasite
  • Inkline (baskı malzemeleri) — Yazıcı Markası / Model / Renk

Vertex (endüstriyel) ön ayarı bulucusuz gelir — bunun yerine fasetli koleksiyon filtrelerine ve öngörülü aramaya dayanır.

Make/Model/Year finder above hero (Throttle preset)

Bir bölüm, üç bulucu türü

Her sektör için farklı bir bölüm yüklemezsiniz — her ön ayarda aynı bulucu bölümüdür. Her ön ayar yalnızca kendi açılır menü etiketlerini ve seçenek listelerini doldurur (Marka/Model/Yıl, Marka/Kategori/Kapasite veya Yazıcı Markası/Model/Renk). Kademeyi başka bir dikey sektöre geçirmek, bu etiketleri ve seçenekleri düzenleme meselesidir.

Marka/Model/Yıl bulucusu​

Bulucu, 3 seviyeli bir kademedir. Seviye 1'i seçin → Seviye 2'nin seçenekleri Seviye 1 seçimine göre doldurulur → Seviye 2'yi seçin → Seviye 3'ün seçenekleri doldurulur → Gönder'e tıklayın → filtrelenmiş koleksiyona gidin.

Shopify admin → Online Store → Themes → Customize'ı açın. Sayfa düzenleyicide Add section'a tıklayın ve Finder'ı seçin.

Ayarlar​

  • Heading — "Find parts for your vehicle" veya "Find toner for your printer".
  • Intro text — Kısa güvence — "Select your make, model, and year to see compatible parts.".
  • Drop-down 1 / 2 / 3 label — Her seviye için görünür etiket — örn. Make, Model, Year. Aynı bölümü istediğiniz herhangi bir kademeye dönüştürmek için bu etiketleri (artı aşağıdaki seçenek bloklarını) değiştirin.
  • Query param name (açılır menü başına) — Her seviyenin arama/koleksiyon bağlantısına eklediği URL parametresi (örn. make, model, year). Boş bırakılırsa varsayılan olarak q1 / q2 / q3.
  • Submit button label — "Find parts" veya "Find toner".
  • Form action URL — Formun gönderildiği yer. Varsayılan olarak /search; bunun yerine bir koleksiyonu filtrelemek için bir koleksiyon URL'sine (örn. /collections/all) yönlendirin.
  • Color scheme — Standart renk şeması açılır menüsü (Light / Accent band / Dark).
  • Vertical padding — Bulucu bandının üstte ve altta ne kadar boşluk alacağı.

Her açılır menünün seçenekleri, bölüme eklediğiniz seçenek bloklarından gelir — her seçim için bir blok. Bir açılır menü 2 / 3 seçeneği, yalnızca eşleşen üst seçim seçildiğinde görünmesini sağlayan bir Parent value ayarlayabilir — kademe bu şekilde daralır.

Üç bulucu türü​

1. Marka / Model / Yıl — Throttle ön ayarı​

Donanım odaklı kataloglara sahip otomotiv parça distribütörleri için.

Kademe:

  1. Make — Ford, Toyota, Chevrolet, BMW vb.
  2. Model — Seçilen Markadan doldurulur (F-150, Camry, Silverado, 3 Serisi)
  3. Year — Seçilen Marka ve Modelden doldurulur (2018, 2019, 2020, ...)

Submit: Alıcıyı, o araçla etiketlenmiş ürünlere filtrelenmiş eşleşen koleksiyona götürür.

Veri kurulumu: seçimleri tema düzenleyicide doğrudan bölüme seçenek blokları olarak ekleyin:

  • Her Make için bir Drop-down 1 option (Ford, Toyota, Chevrolet…)
  • Her Model için bir Drop-down 2 option, Parent value'su ait olduğu Make'e ayarlı
  • Her Year için bir Drop-down 3 option, Parent value'su ait olduğu Model'e ayarlı

Ardından gönderilen URL'nin eşleşmesi için koleksiyonlarınızı etiketleyin (Vertex Shopify'ın yerel etiket tabanlı filtrelemesini kullanır).

2. Marka / Kategori / Kapasite — OfficeIT ön ayarı​

Ofis, IT ve elektronik distribütörleri için.

Kademe:

  1. Brand — HP, Dell, Lenovo, Apple, Cisco
  2. Category — Seçilen Markadan doldurulur (Dizüstü Bilgisayarlar, Monitörler, Yönlendiriciler, Yazıcılar)
  3. Capacity — Seçilen Marka ve Kategoriden doldurulur (8 GB / 16 GB / 32 GB · 24" / 27" / 32" · vb.)

Submit: Alıcıyı eşleşen marka ve kategori koleksiyonuna götürür.

Veri kurulumu: seçimleri tema düzenleyicide seçenek blokları olarak ekleyin — Brand başına bir Drop-down 1 option, Category başına bir Drop-down 2 option (Parent value'su Brand'e ayarlı) ve Capacity başına bir Drop-down 3 option (Parent value'su Category'ye ayarlı).

3. Yazıcı Markası / Model / Renk — baskı malzemesi varyantı​

Belirli bir yazıcıya uyması gereken toner, mürekkep ve sarf malzemeleri satan baskı malzemesi distribütörleri için.

Kademe:

  1. Printer Brand — HP, Canon, Brother, Epson, Xerox vb.
  2. Printer Model — Seçilen Markadan doldurulur (LaserJet Pro M404, PIXMA TR8620 vb.)
  3. Color — Seçilen Marka ve Modelden doldurulur (Black, Cyan, Magenta, Yellow veya Multi-pack)

Submit: Alıcıyı, o yazıcıyla uyumlu kartuşlara filtrelenmiş eşleşen koleksiyona götürür.

Veri kurulumu: seçimleri tema düzenleyicide seçenek blokları olarak ekleyin — Printer Brand başına bir Drop-down 1 option, Printer Model başına bir Drop-down 2 option (Parent value'su Brand'e ayarlı) ve Color başına bir Drop-down 3 option (Parent value'su Model'e ayarlı).

Bu kademe Inkline baskı malzemesi ön ayarında önceden yapılandırılmış olarak gelir, böylece bir baskı malzemesi mağazası kutudan çıktığı gibi anahtar teslim bir toner bulucusu alır — yalnızca demo seçeneklerini kendi yazıcı serinizle değiştirin.

Kademe nasıl çalışır​

Bulucunun seçimleri, bölüme eklediğiniz seçenek bloklarından gelir, böylece her şey sayfaya gömülüdür. Buradan:

  1. Sayfa yüklendiğinde, Seviye 1'in seçenekleri Drop-down 1 option bloklarından doldurulur
  2. Alıcı Seviye 1'i seçtiğinde, Seviye 2 Parent value'su Seviye 1 seçimiyle eşleşen seçeneklere daralır
  3. Alıcı Seviye 2'yi seçtiğinde, Seviye 3 Parent value'su Seviye 2 seçimiyle eşleşen seçeneklere daralır
  4. Gönderildiğinde, alıcı her seviyenin kendi query parametresi olarak eklendiği arama sonuçlarına veya koleksiyona götürülür

Seçenekler yüklendiğinde sayfaya gömülüdür — bu nedenle ekstra ağ isteği yoktur ve kademe anındadır.

JavaScript olmadan çalışır

İlk seviyenin seçenekleri doğrudan sayfaya gömülüdür, böylece bulucu, bir alıcının tarayıcısında JavaScript devre dışı olsa bile çalışır — yalnızca ilk seviyeyi gönderebilir ve filtrelenmiş sonuçlara inebilir. Bu, Vertex boyunca göreceğiniz aynı aşamalı geliştirme felsefesidir.

Bulucu verilerinizi ayarlama​

Her bulucu türü için şunları yapmanız gerekir:

  1. Üç açılır menü etiketini kademenize ayarlayın (örn. Marka / Model / Yıl) ve temiz URL'ler istiyorsanız her seviye için Query param name'i ayarlayın.
  2. Her seçim için bir seçenek bloğu ekleyin — her üst seviye değeri için bir Drop-down 1 option, ardından her seviyenin bir sonrakini daraltması için Parent value ayarlı Drop-down 2 ve 3 option'ları.
  3. Form action URL'yi /search (varsayılan) veya bir koleksiyona (örn. /collections/all) yönlendirin.
  4. Filtre URL'sinin eşleşmesi için koleksiyonlarınızı etiketleyin. Vertex Shopify'ın yerel etiket tabanlı filtrelemesini kullanır, bu nedenle "Ford F-150 parts" koleksiyonunda vehicle:ford-f-150 etiketi olmalıdır.

→ Üç demo ön ayar (Throttle, OfficeIT, Inkline) zaten tamamen doldurulmuş bir bulucuyla gelir — birini çoğaltın ve kendi etiketlerinizi ve seçeneklerinizi değiştirin.

Bulucuyu nereye yerleştirin​

KonumEn uygun olduğu durum
Ana sayfanın üstü, hemen hero altındaBulucunun ana sayfa değer önermesi olduğu dikey sektörler (otomotiv parçaları, baskı malzemeleri)
Hero içinde (yan panel olarak)Hero görüntüsünün değer önermesini taşıdığı ve bulucunun paralel bir CTA olduğu dikey sektörler
Öne çıkan koleksiyonun altındaBulucunun birkaç göz atma yolundan biri olduğu dikey sektörler
Özel bir bulucu sayfasındaBulucunun birincil gezinme yöntemi olduğu dikey sektörler — başlık ikincil menüden bağlayın

Throttle ve Inkline ön ayarları bulucuyu hero altına yerleştirir. OfficeIT ön ayarı hero içinde daha küçük bir varyant kullanır.

B2B + bulucu davranışı​

Oturum açmış B2B alıcıları için, bulucu filtrelenmiş koleksiyona yönlendirir — ve bu koleksiyon alıcının B2B katalog kapsamını karşılar. Bu nedenle, bir Ford F-150 araması yalnızca alıcının kataloğundaki F-150 parçalarını gösterir, alıcının hacim fiyatlandırma kademeleri uygulanır.

Bulucunun kendisi katalog tarafından filtrelemez — bu filtreleme alıcı oraya indikten sonra koleksiyon sayfasında gerçekleşir. Bu doğru ayrımdır: bulucu doğru ürün ailesine daraltır; koleksiyon yalnızca alıcının doğru fiyattan satın alabileceği şeyi gösterir.

Bulucu veri kalitesi için ipuçları​

  • Girdilerinizde tutarlı büyük harf kullanın (her zaman Ford, asla FORD veya ford değil) — kademe dizeleri tam olarak eşleştirir
  • Girdi değerlerinde boşluk bırakmayın — görünmez bir boşluk bile kademeyi bozar
  • Her giriş için 3 seviyenin tümünü doldurun — eksik girişler eksik seviyenin altındaki herkes için kademeyi bozar
  • Hedef koleksiyon için mantıklı bir varsayılan kullanın — kısmi seçim gönderen (veya seçimi eşleşmeyen) alıcılar buraya iner

Sırada ne var​