Vertex — Premium B2B ve Toptan Satış Shopify Teması
Vertex; endüstriyel tedarik, MRO (bakım, onarım ve operasyon), toptan satış, ticaret ve bayi hesabı tüccarları için özel olarak geliştirilmiş premium bir Shopify Online Store 2.0 temasıdır. Shopify'ın yerel B2B özelliklerinin gerçekten bir B2B mağazası gibi görünmesini sağlamak için tasarlanmıştır — hem de tek bir yardımcı uygulama, aylık abonelik veya üçüncü taraf script olmadan.
Hacim fiyatlandırma tabloları, miktar kuralı uygulaması, NET-30 / NET-60 / NET-90 ödeme koşulları, vergiden muaf hesaplar, çok lokasyonlu şirket geçişi, B2B katalogları, teklif istekleri gibi her Shopify-yerel B2B nesnesi, sözleşmeli alıcılarınızın beklediği zarafetle işlenir. Satın alma ekipleri, tesis yöneticileri ve bayi hesapları; tam OS 2.0 kalırken McMaster-Carr, Grainger ve Fastenal'ın katalog netliğini yansıtan bir mağaza elde eder.
Kutudan çıktığı gibi B2C hazır
Vertex yalnızca B2B'ye özel değildir. Her B2B özelliği, oturum açmış bir şirket olmadığında zarif şekilde devre dışı kalır ve tek bir Mağaza modu anahtarı (Hibrit / Yalnızca B2B / Yalnızca B2C), ne kadar B2B arayüz öğesi göstereceğinize karar vermenizi sağlar. Aynı tema, ilk günden zarif bir endüstriyel tedarik B2C mağazası olarak çalışır — ikinci bir lisansa, paralel kod tabanına gerek yoktur.
Vertex kimler için
- Endüstriyel tedarik distribütörleri — bağlantı elemanları, donanım, aletler, aşındırıcılar, sıvılar
- MRO tedarikçileri — bakım, onarım, operasyon sarf malzemeleri
- Toptan satış tüccarları — kademeli fiyatlandırmaya sahip yalnızca ticaret katalogları
- Otomotiv parça distribütörleri — Marka / Model / Yıl bulucularla fitment tabanlı kataloglar
- Ofis, BT ve elektronik tedarikçileri — marka / kategori / kapasite bulucuları
- Baskı ve repro tedarikçileri — yazıcı markası / model / renk bulucuları
- B2C endüstriyel tedarik tüccarları — küçük işletmelere ve son müşterilere satış yapanlar
Alıcılarınız parça numarasıyla arama yapıyorsa, hacim indirimi bekliyorsa, bir tablodan 50 satırlık sipariş veriyorsa, NET-30 koşulları gerektiriyorsa veya ürün sayfasında satır içi dokümantasyon (veri sayfaları, MSDS, sertifikalar) istiyorsa — Vertex onlar için tasarlandı.
Tam özellik kataloğu
Bu bölüm, Vertex v1.0.0'daki her özelliğin kesin listesidir. Her giriş, varsa kendi özel kılavuzuna bağlantı verir.
Yerel B2B (uygulama yok, abonelik yok)
| Özellik | Ne yapar |
|---|---|
| Hacim fiyatlandırma tabloları | Shopify'ın quantity_price_breaks özelliğinden sunucu tarafında işlenen kademeli fiyatlandırma. Alıcılar her miktar kademesi için birim fiyatı PDP, sepet ve toplu sipariş sayfasında görür. |
| Miktar kuralı uygulaması | MOQ (minimum sipariş miktarı), maksimum sipariş miktarı ve koli paketi artırımları istemci tarafında (UI koruması) ve sunucu tarafında (Shopify yerel) doğrulanır. |
| Giriş gerektiren fiyatlandırma | Tek bir tema ayarı anahtarı, misafirler için her fiyatı gizler ve yerine "Fiyatları görmek için giriş yapın" yazısını koyar. Alıcılar fiyatları yalnızca oturum açtıktan sonra görür. |
| NET-30 / NET-60 / NET-90 koşulları | Şirketin ödeme koşulları metafield'ından otomatik algılanır. Amber karşılama çubuğunda ve ödeme adımında rozet olarak görünür. |
| Vergi muafiyeti rozetleri | Shopify'ın yerel şirket vergi durumundan otomatik algılanır. PDP, sepet ve karşılama çubuğunda görünür. |
| Çok lokasyonlu şirket geçişi | Birden fazla şirkete bağlı alıcılar, mobil çekmecede özel bir açılır menüden bunlar arasında geçiş yapabilir. |
| Sevkiyat adresi değiştirici | Alıcının yetkili sevkiyat adresleri arasında tek tıkla geçiş. Amber B2B karşılama çubuğunda (masaüstü) ve mobil çekmecenin hesap bölümünde stilize bir açılır menü olarak işlenir. |
| B2B katalog kapsamı | Alıcılar yalnızca Shopify'ın yerel B2B Katalogları özelliği aracılığıyla şirketlerinin kataloğuna atanmış ürünleri + fiyatları görür. Vertex bunu uçtan uca destekler. |
| Toplu yapıştır-sepete-ekle hızlı sipariş sayfası | Özel /pages/bulk-order şablonu. Alıcılar bir tablodan SKU,miktar satırları yapıştırır; sayfa her satırı kataloğa göre doğrular ve tüm sepeti tek tıkla ekler. Geçersiz SKU'lar satır içinde işaretlenir. |
| Hızlı yeniden sipariş | Geçmiş siparişlerde "Yeniden sipariş ver" düğmesi. Tüm siparişi bir kerede VEYA müşteri hesap panosundan satır satır yeniden sipariş eder. |
| Teklif İste (RFQ) sayfası | Shopify'ın yerel iletişim formu modelini kullanan özel /pages/rfq şablonu. Tüccara e-posta gönderir; teklif yönetim uygulamasına gerek yoktur. |
| Satış temsilcisi iletişim kapsülü | vertex.rep_name, vertex.rep_email, vertex.rep_phone metafield'larından çekilen şirket başına satış temsilcisi bilgisi. Masaüstü başlığında yapışkan bir kapsül (≥1170px) ve mobil çekmecenin altında tam genişlikte bir kart (<1170px) olarak işlenir. |
| B2B karşılama çubuğu | Oturum açıldığında alıcının şirket adını, NET koşulları rozetini, vergi muafiyeti rozetini, dil / para birimi / sevkiyat adresi değiştiricilerini gösteren başlık üstündeki amber şerit. Misafirler ve Yalnızca B2C modu için otomatik gizlenir. |
| B2B özellik tanıtım şeridi | B2B'ye özel özellikleri (hacim fiyatlandırma, toplu sipariş, RFQ, NET-30) öne çıkaran ana sayfa şeridi — misafirlere pazarlama metni olarak görünür. |
| B2B farkındalıklı müşteri panosu | /account hesap şablonu B2B alıcılarını algılar ve şirket bilgilerini, ödeme koşullarını, hızlı yeniden siparişi ve satış temsilcisi iletişim kartını gösterir. |
Ürün sayfası (PDP) — teknik kataloglar için tasarlanmıştır
| Özellik | Ne yapar |
|---|---|
| Teknik özellik metafield tabloları | Özel tech_spec_row metaobject + vertex.* metafield'ları PDP'de temiz bir teknik özellik bloğu işler. Boyutlar, ağırlık, malzeme, sertifikalar, voltaj, kapasite gibi bilgileri kapsar. |
| Belgeler ve indirmeler | Ürün başına PDF bağlantıları otomatik olarak "Belgeler" bloğunda işlenir: veri sayfası, MSDS, broşür, teknik sayfa, kurulum kılavuzu, garanti kartı. Hiçbir belge eklenmediğinde ürün başına otomatik gizlenir. |
| Fiyat geçmişi açıklaması | İsteğe bağlı vertex.price_history metafield'ı (tarih+fiyat girişleri listesi) PDP'de katlanabilir bir "Fiyat geçmişi" bloğu işler. |
| Sevkiyat noktası etiketi | Ürün başına vertex.ships_from metafield'ı (veya tema geneli varsayılan) başlığın altında görünür — bölgesel depoları olan distribütörler için yararlıdır. |
| Stok sayacı (düşük stok göstergesi) | PDP'de varyant başına stok sayacı, yapılandırılabilir eşik. Tam envanteri rakiplere göstermeden aciliyet duygusu yaratır. |
| Yeniden stokta uyarısı | Stokta olmayan varyantlarda e-posta abonelik formu. Yerel, ek uygulama yok. |
| Ön sipariş ATC düğmesi | Geri siparişe açık olarak işaretlenmiş varyantlar "Tükendi" yerine "Ön sipariş" düğmesi gösterir. Shopify'ın yerel envanter takibini kullanır. |
| Yan yana ürün karşılaştırma | Yapışkan karşılaştırma çubuğu 4'e kadar ürünü takip eder; özel /pages/compare şablonu tam bir teknik özellik karşılaştırma tablosu işler. Yalnızca oturum içi — istek listesi değildir. Tamamen Shopify Theme Store politikasına uygundur. |
| Hızlı görüntüleme modalı | Ürün kartlarındaki "Hızlı görüntüleme" düğmesi, listelemeyi terk etmeden ürün galerisi, varyant seçici, miktar girişi ve ATC içeren bir modal açar. |
| Ürün sekmeleri | PDP için özel bir bölüm bloğu, ürün içeriğini sekmelere böler (Açıklama / Teknik Özellikler / Veri Sayfası / Kargo / Video). |
| Son görüntülenenler | localStorage'da takip edilen ürünler (alıcı başına 12'ye kadar); PDP'nin altında görünür. Alıcı tarayıcı verilerini temizlediğinde silinir. |
| İlgili ürünler | PDP altında aynı koleksiyon veya aynı etiket önerileri. |
| Ürün kartlarında resim üzerine gelme | Bir ürünün 2+ resmi olduğunda, listeleme kartının üzerine gelindiğinde ikinci resim gösterilir. |
Başlık, gezinme, yerelleştirme
| Özellik | Ne yapar |
|---|---|
| Duyuru çubuğu | Bağlantı yuvaları, sosyal simgeler, telefon ve sağda kapatılabilir × (localStorage'da saklanır) içeren APEX tarzı üst çubuk. İki düzen: koyu veya amber. |
| İki başlık düzeni (otomatik uygulanır) | Misafir: logolu + tahminli arama + dil / para birimi kapsülleri + Giriş/Kayıt + Sepet içeren beyaz ana başlık. Oturum açmış B2B: aynısı + üstünde şirket rozetleri ve değiştiricilerle amber karşılama çubuğu. |
| Mega menü | İsteğe bağlı simgeler ve özel bir "Markaya göre alışveriş" ızgarası (ince çizgili ızgara) içeren çok sütunlu açılır paneller. |
| Basit açılır menü alternatifi | Tüccar her ana menü öğesi için düz bir liste tercih ettiğinde. Otomatik algılanır veya ayar başına zorlanabilir. |
| Sağa hizalanmış ikincil gezinme | Özel teklifler / Kılavuzlar / Hizmetler / SSS — bir secondary-menu bağlantı listesi varsa handle ile otomatik algılanır. |
| Tahminli arama katmanı | Ürünler / koleksiyonlar / sayfalar / önerilen sorgular resim küçük resimleriyle. vertex.mpn metafield'ı aracılığıyla üretici parça numaralarını tanır. |
| Kaydırırken yapışkan başlık | Yönetici anahtarı — başlığı görünüm penceresine sabitler. |
| REP-kapsül tarzı değiştiriciler | Dil + para birimi, 2 satırlık metin yığını (kaş yazısı + ISO kodu) ve şevron ile küçük dairesel bayrak avatarı kapsülleri olarak işlenir. Mobil çekmece, tek elle erişim için 2 sütunlu bir ızgarada aynı kapsülleri tam genişlikte içerir. |
| Özel açılır paneller | Hiçbir yerde yerel <select> yok. Dil, para birimi ve sevkiyat adresi; hover durumları, geçerli seçim vurgusu, onay simgesi, geçişli görünme animasyonu, karşılıklı dışlama, dışarı tıklama-kapatma, Escape-kapatma ile paylaşılan <details> + özel panel sistemi kullanır. |
| Shopify Markets üzerinden çoklu para birimi | Tek bir pazara sabitlenmiş B2B alıcıları için bile para birimi kapsülü işlenir — bilgilendirme amaçlıdır, böylece her zaman hangi para birimiyle ödeme yaptıklarını görürler. |
| 5 dil ile gelir | İngilizce (varsayılan), Fransızca, İtalyanca, Almanca, İspanyolca — locales/ içinde tam UI dizgileri + şema dizgileri. |
| Tam RTL desteği | <html dir> Arapça, İbranice, Farsça, Urduca, Yidiş, Kürtçe, Dhivehi, Peştuca için otomatik döner. Yerelleştirme tema ayarı aracılığıyla zorlanabilir. |
| Tablet farkındalıklı kesme noktası | <1170px'de (mobil + tablet) hamburger çekmecesi devralır. ≥1170px'de tam masaüstü gezinme gösterilir. |
→ Mağaza modu kılavuzu · Markets ve çoklu para birimi kılavuzu
Pazarlama bölümleri (ana sayfa paletinde 30+)
| Bölüm | Amaç |
|---|---|
| Hero | Otomatik ilerleme, nokta gezinmesi, editöryal kompozisyona sahip çok slaytlı döner. Varsayılan, en hızlı LCP için 1 slaytla gelir. |
| Öne çıkan koleksiyon | Ürün ızgarası; Theme Store uyumluluğu için @app bloklarını kabul eder. |
| Koleksiyon listesi | Resim kaplamalı kategori ızgarası. |
| Resimli metin | Editöryal eşleşme (metin + resim, 50/50 veya asimetrik). |
| Çoklu sütun | 2–4 sütunlu ızgara (simgeler + metin + isteğe bağlı bağlantı). |
| Zengin metin | Ortalanmış giriş / hakkında bloğu. |
| CTA banner | Footer üzerine binme efektiyle alt bilgi öncesi harekete geçirici mesaj; müşteri durumu başına metin (misafir vs B2B). |
| Bülten | Abonelik düğmesiyle e-posta abonelik formu. |
| SSS | Açıklama tabanlı akordeon; zengin snippet'ler için otomatik olarak FAQPage JSON-LD yayar. |
| Logo listesi | Solma ızgara çizgileriyle kayan marka logoları. |
| Referanslar | Avatar bindirme başlık işlemli puanlı kartlar. |
| İstatistik çubuğu | Koyu modda KPI şeridi (ör. "40.000+ SKU · NET-30 · 24 saat Sevkiyat · ISO 9001"). |
| Sektörler ızgarası | Editöryal kart ızgarası (ör. HVAC, İmalat, Tesisler). |
| Kaynak merkezi | İndirilebilirler listesi — veri sayfaları, MSDS, broşürler. |
| Basın haberleri | Logo şeridi + alıntılar. |
| Zaman çizelgesi | Hakkımızda sayfası için kronoloji (yıl + kilometre taşı). |
| Hizmetler ızgarası | Hizmet teklifleri için resim kaplamalı kartlar. |
| Geri sayım sayacı | Günler / saatler / dakikalar / saniyeler — tanıtım amaçlı. |
| Öne çıkan paketler | İndirim rozetli özel paket kartları. |
| Marka/Model/Yıl bulucu | Kademeli açılır menüler (Throttle ön ayarı) — veya Marka/Kapasite (OfficeIT) veya Yazıcı Markası/Model/Renk (Inkline). |
| Promosyon banner | localStorage kalıcılığıyla kapatılabilir üst banner. |
| Promosyon popup'ı | Otomatik açılma + çıkış niyeti + localStorage; tüccar tarafından yapılandırılabilir tempo. |
| Hızlı sipariş pedi | Satır içi yapıştır-sepete-ekle pedi (tam toplu sipariş sayfasının ana sayfaya hazır versiyonu). |
| Son görüntülenenler (ana sayfa) | PDP ile aynı widget, ana sayfada şerit olarak görünür. |
| İlgili ürünler | PDP'de çapraz satış şeridi. |
| Yapışkan sepet çubuğu | Yalnızca mobile özel yapışkan ATC şeridi. |
| Çift markalar + hızlı sipariş | Marka logoları + hızlı sipariş pedini birleştiren 50/50 birleşik bölüm. |
| Çift kaynaklar + SSS | İndirilebilirler + SSS'yi birleştiren 50/50 birleşik bölüm. |
Tek temada 4 demo mağaza
| Ön ayar | Sektör | Vurgu | Bulucu |
|---|---|---|---|
| Vertex | Endüstriyel / MRO tedarik | Amber #fbbf24 | — |
| Throttle | Otomotiv parçaları | Kırmızı-turuncu #ec5f24 | Marka / Model / Yıl |
| OfficeIT | Ofis, BT ve elektronik | Mavi | Marka / Kategori / Kapasite |
Her ön ayar kendi ana sayfasını, koleksiyon şablonunu, ürün şablonunu ve oluşturulmuş hero resimlerini içerir. Ön ayarları özelleştiriciden değiştirin — mağazanın tamamı yeniden renklendirilir ve yeniden işlenir.
Gönderilen şablonlar (Online Store 2.0)
Gerekli Shopify şablonları (her biri mevcut): index.json, product.json, collection.json + list-collections.json, cart.json, search.json, blog.json + article.json, page.json, 404.json, password.json, gift_card.liquid.
Müşteri hesap takımı: customers/account.json (B2B farkındalıklı), activate_account.json, addresses.json, login.json, order.json (satır satır + tam sipariş yeniden sipariş ile), register.json, reset_password.json.
Özel sayfa şablonları — herhangi bir yeni sayfaya bırakın: page.about.json, page.contact.json (2 sütun), page.faq.json, page.rfq.json, page.bulk-order.json, page.compare.json, page.services.json, page.special-offers.json.
Performans
- Saf ES modülleri — paketleyici yok, framework yok, jQuery yok, çalışma zamanında sıfır üçüncü taraf script
- Bölüm başına CSS —
section-{name}.cssyalnızca ona sahip bölüm tarafından yüklenir. Küresel mega paket yok. layout/theme.liquidiçinde satır içi tasarım token'ları bir oluşturma engelleyici CSS isteğini ortadan kaldırır- Birden çok genişlikte WebP hero resimleri
<picture><source srcset>aracılığıyla font-display: optionalgövde + başlık fontlarında LCP'yi hızlı tutmak için- Sunucu tarafında işlenen fiyatlandırma — JS asla fiyatları yeniden hesaplamaz, yalnızca geliştirir
- Temel gövde + başlık fontlarını önceden yükleme,
fonts.shopifycdn.com'a önceden bağlantı - Arkaplan resmi hero yaklaşımı + 1 slayt varsayılan ön ayar = mobilde geri kazanılmış LCP
- Kaydedilen Lighthouse: Performans 65–100 mobil, 90+ masaüstü
Erişilebilirlik (WCAG 2.1 AA)
- Her yerde klavye ile çalıştırılabilir (özel açılır menüler yerel
<details>/<summary>kullanır; mega menüde ok tuşu gezinmesi) - Her etkileşimli öğede görünür odak (focus-visible stil halkası)
- Boyunca 4.5:1 minimum kontrast; palet test edilmiştir
- Mobilde 24 px minimum dokunma hedefleri
- Etiketli girişler + ARIA rolleri (
role="menu",menuitemradio,aria-checked,aria-current) - İçeriğe atla bağlantısı
- Otomatik RTL geçişi, isteğe bağlı manuel geçersiz kılma ile
SEO ve sosyal
- Tam JSON-LD şema grafiği — Organization, WebSite + SearchAction, BreadcrumbList (PDP), Product (GTIN, shippingDetails, returns ile), BlogPosting, ContactPage + LocalBusiness, FAQPage, ItemList (koleksiyon)
- Open Graph + Twitter card meta her sayfada (
og:image,og:locale,og:image:alt,twitter:image,twitter:site) rel="next"/rel="prev"koleksiyon + blog sayfalandırmasındafetchpriority="high"ilk koleksiyon kart resminde (LCP kazancı)- Site geneli
noindex12 yardımcı sayfa türünde (hesap, arama, vb.) - hreflang yayınlanan tüm 5 yerel için otomatik yayılır
- Favicon SVG yedek + ayarlardan geçersiz kılınabilir PNG yuvası olarak gelir
- Google Merchant Center alanları — GTIN, kargo ayrıntıları, iadeler
Gizlilik ve uyumluluk
- Özel çerez banner'ı yok — Shopify'ın yerel Müşteri Gizliliği banner'ını kullanır (daha iyi Lighthouse Best Practices puanı, bakımı yapılacak daha az kod, politika sürprizi yok)
- Theme Store politikasına uygun — tema dosyalarının içinde üçüncü taraf izleme yok, ortaklık bağlantısı yok, tasarımcı kredisi yok
Kutuda olmayanlar (henüz)
Doğru beklentileri belirlemek için:
- PO yükleme (ödeme olarak satın alma siparişi PDF'leri) — Shopify'ın bir yardımcı uygulama olmadan ilgili yerel API'yi sunmasına bağlıdır. v1.1 için planlandı.
- Onay iş akışı (ödeme öncesi çok adımlı dahili onaylar) — aynı bağımlılık. v1.1 için planlandı.
- İstek listesi — kasıtlı olarak gönderilmedi. Ürün karşılaştırma, Theme Store politikası gereği yalnızca oturum içidir; kalıcı istek listeleri bir uygulama gerektirir.
- Canlı sohbet — Shopify'ın yerel Chat'ini veya seçtiğiniz herhangi bir üçüncü taraf uygulamasını öneriyoruz.
Hızlı başlangıç
- Vertex'i kurun Shopify Theme Store'dan (Online Store ▸ Themes ▸ Add theme)
- Yerel B2B'yi etkinleştirin (Settings ▸ Customer accounts ▸ Enable B2B). Bu olmadan, B2B arayüz öğeleri otomatik gizlenir — tema yine zarif bir B2C teması olarak çalışır.
vertexmetafield ad alanını doldurun — veri sayfaları, MPN, satış temsilcisi iletişim bilgileri, sevkiyat noktası. Bkz. Metafield kurulum kılavuzu.- Bir başlangıç paleti seçin — Customize ▸ Theme settings ▸ Colors ▸ Starter color palette. Seçim: Custom, Vertex amber, Throttle red, OfficeIT blue veya Inkline teal.
- Themes ▸ Customize'da özelleştirin ve Yayınlayın.
Sırada ne var
- Kurulum → — Adım adım kurulum + B2B etkinleştirme
- Tema ayarları referansı → — Tema Ayarlarındaki her ayar açıklanmıştır
- Bölüm kurulum kılavuzları → — Her bölümü nasıl yapılandıracağınız
- Özellik kılavuzları → — B2B kurulumu, metafield'lar, Mağaza modları, Markets, demo ön ayarları, müşteri hesabı, RFQ
- SSS + sorun giderme → — En çok sorulan sorular yanıtlandı
- Değişiklik günlüğü → — Her sürümde yenilikler
- Destek → — Bize nasıl ulaşılır