Ana içeriğe geç

Başlık, Alt Bilgi ve Site Kromu

Krom, mağazanızı saran her şeydir — duyuru çubuğu, başlık (logo, gezinme, arama, hesap, sepet), oturum açmış şirket alıcıları için otomatik görünen B2B karşılama çubuğu ve alt bilgi. Vertex'te bu kromun her parçası kutudan çıkar çıkmaz B2B duyarlıdır: bir şirket alıcısı oturum açtığı anda değiştiriciler, rozetler ve temsilci pill'leri otomatik olarak görünür ve oturum açmadığında cilalı bir B2C düzenine zarif bir şekilde geriler.

Vertex desktop header — logo, nav, search, account, cart

Otomatik olarak uygulanan iki başlık düzeni

Bir "B2B başlığı" ile "B2C başlığı" arasında seçim yapmak zorunda değilsiniz. Vertex bir başlık oluşturur — ve bir şirket alıcısı oturum açtığı anda amber B2B karşılama çubuğunu üzerine katmanlar. Misafirler temiz beyaz başlığı alır; oturum açmış alıcılar aynı başlığı artı şirket rozetlerini, NET koşulları pill'ini, vergi muafiyeti göstergesini ve sevkiyat değiştiricisini alır.

Duyuru çubuğu​

Bölüm dosyası: sections/announcement-bar.liquid

Ana başlığın üstündeki APEX tarzı üst çubuk — solda metin, isteğe bağlı sol simge (kamyon / şimşek / kilit), telefon numarası, sosyal simgeler ve sağda kapatılabilir bir ×. İki renk şeması kutudan çıkar: koyu ve amber.

Ayarlar​

AyarTürNotlar
MetinZengin metinKısa değer mesajı — "500 dolar üzeri siparişlerde ücretsiz kargo", "Nitelikli alıcılar için NET-30 mevcuttur". Satır içi bağlantıları destekler.
Sol simgeSeçimtruck · lightning · lock · none. Metinle bir SVG glif'ini eşleştirir.
Telefon numarasıMetinSağa hizalanmış telefon pill'i. Mobilde aramak için dokunma (tel: bağlantısı).
Instagram URLURLMarka sosyal simgesi. Yalnızca doldurulursa oluşturulur.
LinkedIn URLURLLinkedIn simgesi.
X (Twitter) URLURLX simgesi.
YouTube URLURLYouTube simgesi.
Renk şemasıSeçimdark (varsayılan) veya amber.

Bağlantı blokları​

Duyuru çubuğuna küçük metin bağlantıları itmek için Bağlantı blokları ekleyin — Özel Teklifler, Bayi olun, Kaynaklar. Her blok bir label ve bir url alır.

Kapatılabilir​

Sağdaki × düğmesi, geçerli ziyaretçi için duyuru çubuğunu kapatır. Durum, assets/announcement-dismiss.js aracılığıyla localStorage'a kalıcı hale getirilir, böylece çubuk ziyaretçi site verilerini temizleyene kadar gizli kalır.

Amber şemasını ne zaman kullanmalı

Amber şeması, B2B karşılama çubuğunun vurgu rengiyle eşleşir. Duyurunuz bir B2B değer önermesi olduğunda kullanın (NET-30 koşulları, bayi kaydı, RFQ). Genel pazarlama için koyu şemayı kullanın.

Ana başlık​

Bölüm dosyası: sections/header.liquid

Birincil gezinme yüzeyi — logo, marka metni, birincil menü, isteğe bağlı ikincil menü, öngörülü arama, yerel ve para birimi değiştiricileri, hesap ve sepet.

Ayarlar​

AyarTürNotlar
LogoGörüntüÖnerilen: SVG veya 2x PNG. Logo maksimum yüksekliği sayısal ayarı tarafından belirlenen maksimum yüksekliğe sınırlandırılır.
Marka metni geçersiz kılmaMetinLogo olmadığında kullanılan isteğe bağlı metin (örn. "Vertex Supply"). Başlık yazı tipinde oluşturulur.
Birincil menüBağlantı listesiAna gezinme. Her ana menü öğesi alt öğeleri tarafından yönlendirilen bir açılır menü alır.
Alt menü stiliSeçimauto · mega · dropdown. Auto, bir ebeveynin 8+ alt öğesi olduğunda veya ızgara düzeni algılandığında mega seçer; aksi takdirde düz bir açılır menü oluşturur.
İkincil menüBağlantı listesiSağa hizalanmış yardımcı gezinme (Özel teklifler · Kılavuzlar · Hizmetler · SSS). Birini seçmezseniz secondary-menu bağlantı listesi tanıtıcısı tarafından otomatik algılanır.
Arama yer tutucusuMetinÇevrilebilir. Varsayılan "Ürün, SKU veya parça numarasına göre ara".
Yerel değiştiriciyi gösterOnay kutusuVarsayılan açık. Masaüstü başlığında ve mobil çekmecedeki dil pill'ini gizler/gösterir.
Para birimi değiştiriciyi gösterOnay kutusuVarsayılan açık. Para birimi pill'ini gizler/gösterir. Tek pazarlı B2B alıcılar bile hangi para birimiyle ödediğini her zaman bilmek için bilgilendirici olarak görür.
Kaydırmada yapışkanOnay kutusuKaydırırken başlığı görünüm alanına sabitler.

Menünün sağında ne oluşturulur​

Soldan sağa sırayla: öngörülü arama girişi, dil pill, para birimi pill, satış temsilcisi pill (B2B için otomatik gösterilir), Hesap, Sepet sayacı.

Satış temsilcisi pill, şirketin vertex.rep_name, vertex.rep_email, vertex.rep_phone metafield'larından çekilir. Doldurma ayrıntıları için B2B kurulum kılavuzu'na bakın.

Mega menü ve basit açılır menü karşılaştırması​

Alt menü stili, menu_style ayarı tarafından ana menü öğesi başına kararlaştırılır. İki format:

  • Mega menü — isteğe bağlı simgeler ve özel bir marka ızgarası ile çok sütunlu ızgara panelleri. Kategoriye göre alışveriş, Markaya göre alışveriş, Endüstriler — 8+ alt öğeli veya görsel alt kategorili ebeveynler için kullanın.
  • Basit açılır menü — düz liste. Hakkımızda, Kaynaklar, Hesap — bir avuç sayfalı ebeveynler için kullanın.

auto olarak ayarlandığında, Vertex ebeveynin ≥ 8 alt öğesi varsa mega seçer; aksi takdirde basit açılır menü.

B2B karşılama çubuğu​

Bölüm dosyası: sections/b2b-greeting-bar.liquid

Oturum açmış şirket alıcıları için ana başlığın üstünde duran amber bant. Satıcı ayarı yok — müşteri durumuna göre otomatik oluşturulur.

Ne zaman görünür​

Üçü de doğru olmalıdır:

  1. customer.b2b? — müşteri bir B2B (şirket) alıcısıdır, B2C hesabı değil
  2. customer.current_company — en az bir şirkete bağlıdırlar
  3. settings.storefront_mode != 'b2c' — tema Yalnızca B2C moduna sabitlenmemiş

Herhangi biri başarısız olursa (misafir, Yalnızca B2C modu, şirket eklenmemiş) karşılama çubuğu hiç oluşturulmaz.

Neyi gösterir​

  • Şirket adı — "{company.name} olarak oturum açıldı"
  • NET koşulları rozeti — şirketin ödeme koşulları metafield'ından NET-30 / NET-60 / NET-90
  • Vergi muafiyeti rozeti — Shopify'ın yerel şirket vergi durumundan
  • Dil pill — REP tarzı avatar + ISO kodu + chevron
  • Para birimi pill — REP tarzı avatar + ISO kodu + chevron
  • Sevkiyat değiştirici — alıcının bir konumu olduğunda statik etiket; birden fazla olduğunda tam açılır menü
Duyarlı davranış

≤ 1169px ekranlarda karşılama çubuğu daralır ve içeriği hamburger çekmecesinin hesap bölümüne taşınır. Amber bant yalnızca ≥ 1170px (masaüstü) görünür, böylece mobil dikey alan için arama çubuğuyla savaşmaz.

→ Tam özellik yüzeyi için Yalnızca B2B bölümleri'ne bakın.

Alt bilgi​

Bölüm dosyası: sections/footer.liquid

Site alt bilgisi — menü, sosyal, e-posta, ödeme simgeleri, bülten, yasal bağlantılar.

Ayarlar​

AyarTürNotlar
Alt bilgi menüsüBağlantı listesiÇok sütunlu alt bilgi gezinmesi. Her ebeveyn bir sütun başlığı olarak oluşturulur.
Instagram URLURLYalnızca doldurulursa oluşturulur.
Facebook URLURLYalnızca doldurulursa oluşturulur.
LinkedIn URLURLYalnızca doldurulursa oluşturulur.
X (Twitter) URLURLYalnızca doldurulursa oluşturulur.
YouTube URLURLYalnızca doldurulursa oluşturulur.
E-postaMetinVarsayılan boş. Doldurulduğunda iletişim sütununda bir mailto: bağlantısı olarak oluşturulur.
Ödeme simgelerini gösterOnay kutusuVarsayılan açık. Listeyi kendiniz tutmak zorunda kalmamanız için shop.enabled_payment_types kullanır.
Bülten başlığıMetinÖrn. "Ticari listeye katılın".
Bülten girişZengin metinKısa güvence metni — "Aylık bırakmalar, spam yok".
Yasal menüBağlantı listesiGizlilik · Koşullar · İade · Çerezler. Menüyü boş bırakırsanız /policies/* URL'lerinize otomatik olarak geri döner.

Bülten formu​

Bülten bloğu Shopify'ın yerel müşteri-bülten formunu kullanır, böylece aboneler Shopify müşteri listenize yazılır (newsletter accepts-marketing bayrağı ile). Üçüncü taraf entegrasyonu gerekmez.

Ödeme simgeleri etkin olanı yansıtır

Ödeme simgelerini elle seçmezsiniz — Vertex shop.enabled_payment_types'ı okur ve yalnızca Shopify'ın ödeme ayarlarında etkinleştirdiğiniz simgeleri oluşturur. Ayarlar → Ödemeler'de Apple Pay'i etkinleştirin → alt bilgide görünür. Devre dışı bırakın → kaybolur.

Öngörülü arama​

Bölüm dosyası: sections/predictive-search.liquid (header.liquid tarafından oluşturulur)

Alıcı yazarken arama girişinden açılır. Dört panel gösterir:

  1. Ürünler — görüntü küçük resmi, başlık, satıcı, fiyat. vertex.mpn metafield'ı aracılığıyla üretici parça numaralarını tanır (böylece 1N4148 araması diyotu parça numarasına göre bulur).
  2. Koleksiyonlar — başlık + görüntü.
  3. Sayfalar — başlık + URL.
  4. Önerilen sorgular — Shopify'ın yerel arama önerileri.

MPN tanıma​

Bir üründe vertex.mpn metafield'ı (tek satırlık metin) doldurursanız, öngörülü arama standart ürün başlığı / SKU / satıcının yanı sıra o alana karşı sorguları eşleştirir. Alıcıların ürün adı yerine parça numarasıyla arama yaptığı teknik kataloglar için kritiktir.

→ Doldurma ayrıntıları için Metafield kurulum kılavuzu'na bakın.

Duyarlı davranış​

Başlığın 1170px'de sert bir kesme noktası vardır — böylece iPad Pro portresi (1024px) hamburger akışında kalır ancak çoğu dizüstü bilgisayar masaüstü düzenine iner.

Görünüm alanıDüzen
< 1170pxHamburger menüsü → çekmece. Çekmece şunları içerir: birincil menü, ikincil menü, sevkiyat değiştirici, yerel + para birimi pill'leri (2 sütunlu ızgara), satış temsilcisi kartı (en altta tam genişlik), dil + oturum aç.
≥ 1170pxTam masaüstü gezinmesi. Mega menü / açılır paneller, öngörülü arama girişi, REP pill'leri, satış temsilcisi pill'i, hesap, sepet.

Özel açılır paneller (yerel <select> yok)​

Vertex hiçbir yerde sıfır yerel <select> öğesi kullanır. Dil, para birimi ve sevkiyat değiştiricileri hepsi paylaşılan bir <details> + <summary> + özel panel sistemi kullanır:

  • Hover durumları
  • Mevcut seçim vurgusu + onay simgesi
  • Solma animasyonu
  • Karşılıklı dışlama (birini açmak diğerlerini kapatır)
  • Dış-tıklama-kapatma
  • Escape-kapatma
  • Tam klavye gezinme (ok tuşları + Enter)

Uygulama assets/global.js içinde bulunur (closeAllDetails() yardımcısını arayın). Bu açılır menüleri yeniden stillendirmek details[data-vertex-dropdown] seçicilerini geçersiz kılma meselesidir — JS gerekmez.

Sırada ne var​