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 tek bir demo (endüstriyel / MRO) ile gelir ve aynı bulucu bölümü, ondan oluşturduğunuz otomotiv yedek parça, ofis ve IT ve baskı malzemeleri yapılandırmalarını çalıştırır. Kurabileceğiniz üç bulucu türü vardır:

  • Otomotiv yedek parça — Marka / Model / Yıl
  • Ofis ve IT — Marka / Kategori / Kapasite
  • Baskı malzemeleri — Yazıcı Markası / Model / Renk

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

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

Her sektör için farklı bir bölüm yüklemezsiniz — her yapılandırmada aynı bulucu bölümüdür. Her yapılandırma 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 — otomotiv yedek parça yapılandırması​

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 — ofis ve IT yapılandırması​

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 bir baskı malzemeleri yapılandırmasının belirleyici özelliğidir, böylece kurduğunuzda bir baskı malzemesi mağazası anahtar teslim bir toner bulucusu alır — yalnızca örnek seçenekleri 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.

→ Her bulucu türü (otomotiv yedek parça, ofis ve IT, baskı malzemeleri) aynı üç adımı izler — kademeniz için etiketleri ayarlayın, her seçim için bir seçenek bloğu ekleyin ve kendi değerlerinizi yerleş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

Otomotiv yedek parça ve baskı malzemeleri yapılandırmaları bulucuyu hero altına yerleştirir. Ofis ve IT yapılandırması 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​