Ürün Sayfası (PDP) Bölümleri
Vertex ürün şablonu teknik kataloglar için inşa edilmiştir — parça numaralarını, teknik özellikleri, veri sayfalarını, MOQ'ları, kasa paketlerini ve hacim fiyatlandırmasını önemseyen alıcılar. Her B2B temas noktası (hacim kademeleri, oturum açma gerektiren fiyatlandırma, miktar kuralları, satış temsilcisi kartı, sevkiyat yeri, NET koşulları rozeti) tek bir tamamlayıcı uygulama olmadan PDP'de satır i çi olarak oluşturulur.
Aynı product.json şablonu hem misafirler hem de oturum açmış B2B alıcıları için oluşur. Fiyatlar, rozetler, miktar kuralları ve satış temsilcisi kartı otomatik olarak müşterinin şirket katalogunu ve ödeme koşullarını yansıtır — paralel dosyalar olarak "B2B ürün şablonu" ve "B2C ürün şablonu" gerekmez.
main-product
Bölüm dosyası: sections/main-product.liquid
PDP'nin kendisi — galeri, başlık, fiyat, varyant seçici, miktar girişi, ATC ve her B2B duyarlı yüzey tek bir bölümde yığılmış. Aşağıdaki her blok özelleştiricide yeniden sıralayabileceğiniz bir main-product bölüm bloğudur.
Galeri
- Listeleme kartlarında görüntü rollover ile ana görüntü (2+ görüntü gerekli)
- Ana görüntünün altında küçük resimler
- Yakınlaştırmak için tıkla (lightbox)
- Mobil: noktalı kaydırılabilir atlı karınca
Başlık + meta
- Ürün başlığı
- Satıcı (gösterilirse)
- Sevkiyat yeri etiketi — ürün başına
vertex.ships_frommetafield'ı veya tema genelinde varsayılan - MPN satırı —
vertex.mpnayarlandığında başlığın altında "MPN: 1N4148" görüntülenir
Fiyat bloğu
Fiyatlandırma yüzeyi varsayılan olarak B2B duyarlıdır:
- Hacim fiyatlandırma kademeleri — Shopify'ın
quantity_price_breaks'inden sunucu tarafından oluşturulur. Alıcılar satır içi "1–9: 4,50 $ · 10–49: 4,10 $ · 50+: 3,80 $" görür. Varyantınquantity_price_breaks_count > 0olduğunda otomatik oluşturulur. - Oturum açma gerektiren fiyatlandırma — Hide prices until customer logs in tema ayarı etkinleştirildiğinde, misafirler için fiyatlar "Fiyatı görmek için oturum açın" + bir oturum açma bağlantısı ile değiştirilir.
- B2B karşılaştırma fiyatı — B2B katalog fiyatı mağaza fiyatından düşük olduğunda üzeri çizili görüntü.
Varyant seçici
Stilize düğmeler olarak oluşur (renk için swatch'lar, boyut için boyut düğmeleri, diğer eksenler için açılır menü). Stoğu tükenmiş varyantlar görsel olarak devre dışı bırakılır (üzeri çizilir) ancak alıcının alternatifleri görmesi için seçilebilir kalır.
Miktar girişi
Miktar kuralları hem istemci tarafında hem de sunucu tarafında uygulanır:
| Kural | Davranış |
|---|---|
| MOQ (minimum) | MOQ'nun altına azaltılamaz. Satır içi mesaj: "Minimum sipariş: 12". |
| Maksimum | Maksimumun üzerine artırılamaz. Satır içi mesaj: "Maksimum: 144". |
| Kasa paketi artışı | Kasa paketi boyutuyla adımlar. Manuel giriş, küçük bir toast bildirimi ile bir sonraki geçerli değere yuvarlanır. |
B2B kataloğuna bağlı alıcılar şirkete özgü miktar kurallarını alır; misafirler mağaza kurallarını alır. Her ikisi de Shopify'ın yerel API'sinden gelir — Vertex sadece onları oluşturur.
Sepete ekle + Hemen satın al
- Sepete ekle — standart ATC, ön sipariş etkin değilse stok dışıyken devre dışı
- Hemen satın al — Shopify'ın hızlandırılmış ödeme düğmeleri (Shop Pay, Apple Pay, Google Pay, PayPal). Shopify Ayarları üzerinden isteğe bağlı.
- Ön sipariş — varyant sipariş edilebilir olduğunda, "Tükendi"yi "Ön sipariş" ile değiştirir (Shopify'ın yerel envanter takibini kullanır)
- Stoğa girdiğinde haberdar et — varyant tükendiğinde ve ön sipariş kapalıyken, bir e-posta katılım formu gösterir (yerel, ek uygulama yok)
Satış temsilcisi kartı
Oturum açmış B2B alıcıları için, PDP'de şirketin atanmış temsilcisini gösteren bir satış temsilcisi kartı görünür:
- Ad (
vertex.rep_name'den) - E-posta (
vertex.rep_email'den,mailto:bağlantısı olarak) - Telefon (
vertex.rep_phone'dan,tel:bağlantısı olarak)
Yalnızca en az bir temsilci alanı doldurulduğunda ve müşteri customer.b2b? olduğunda oluşturulur.
İçerik haritası
Ürünün birincil koleksiyonundan otomatik oluşturulur. BreadcrumbList JSON-LD yayar.
Teknik özellik tablosu bloğu
tech-specs bloğu — vertex.tech_specs liste metafield'ından temiz bir 2 sütunlu teknik özellik tablosu oluşturur. Boyutlar, ağırlık, malzeme, voltaj, kapasite, sertifikalar için kullanın.
→ Doldurma için Metafield kurulum kılavuzu'na bakın.
Belgeler ve indirmeler bloğu
documents bloğu — ürün metafield'larından PDF indirmeleri listesi oluşturur:
- Veri sayfası (
vertex.datasheet) - MSDS (
vertex.msds) - Broşür (
vertex.brochure) - Teknik sayfa (
vertex.tech_sheet) - Kurulum kılavuzu (
vertex.install_guide) - Garanti kartı (
vertex.warranty)
Hiçbir belge eklenmediğinde ürün başına otomatik gizler.
Fiyat geçmişi açıklaması
price-history bloğu — vertex.price_history metafield'ından (tarih+fiyat girişleri listesi) okunan açılabilir "Fiyat geçmişi" bölümü. Piyasa eğilimlerini izleyen endüstriyel alıcılar için faydalı.
Stok sayacı (düşük stok göstergesi)
stock-counter bloğu — varyant başına aciliyet ipucu. Yalnızca envanterini takip ettiğiniz varyantlar için görünür ve stok düşük stok eşiğine (10 birim) düştüğünde "Yalnızca N kaldı" uyarısına geçer. Eşik 10'a sabit kodlanmıştır — bir tema ayarı değildir. Tam envanteri rakiplere açıklamadan eylem teşvik eder.
Şu durumlardan birini oluşturur:
- 10'dan fazla stokta: "Stokta"
- 10 veya altında: "Yalnızca 4 kaldı"
- Sipariş edilebilir (sıfır, ancak satışa devam ayarlı): "Back-ordered — ships in 7–10 days"
- Tükendi (sıfır, sipariş edilemez): "Tükendi" (stoğa girdiğinde haberdar et formu ile)
Hide prices until customer logs in açık olduğunda, tüm fiyat bloğu (hacim kademeleri ve karşılaştırma dahil) misafirler için bir "Fiyatı görmek için oturum açın" istemi ile değiştirilir. Miktar kuralları, stok sayacı ve satış temsilcisi kartı, alıcıların ürünün oturum açmaya değer olup olmadığına karar verebilmesi için yine görünür.
product-tabs
Bölüm dosyası: sections/product-tabs.liquid
PDP içeriğini sekmeler arasında bölen bölüm bloğu. Uzun teknik özellikli ürünlerde görsel dağınıklığı azaltmak için product.json şablonunuzda bunu main-product'ın altına bırakın.
Sekme başına blok ayarları: başlık, içerik (zengin metin / dosya / video).
Yaygın sekme desenleri:
- Açıklama — ana pazarlama metni
- Teknik özellikler — teknik özellik tablosunun ötesindeki genişletilmiş teknik özellikler
- Veri sayfası — gömülü PDF görüntüleyici
- Sevkiyat ve İadeler — lojistik bilgileri
- Video — gömülü YouTube / Vimeo
Sekmeler tam klavye erişilebilirliği için yerel <details> + <summary> kullanır. İlk sekme varsayılan olarak açıktır; başka birini açmak, bölümün Birden fazla aç ayarına bağlı olarak diğerlerini otomatik olarak kapatır (akordeon modu) veya açık tutar (anahtar modu).
related-products
Bölüm dosyası: sections/related-products.liquid
PDP altında öneri şeridi. Aynı koleksiyon veya aynı etiketli ürünlerden çeker.
Ayarlar:
| Ayar | Notlar |
|---|---|
| Başlık | Örn. "Müşteriler ayrıca görüntüledi" veya "Bunları da beğenebilirsiniz". |
| Kaynak | same_collection (varsayılan) · same_tag · manual. |
| Maksimum ürün | 4 (varsayılan) / 6 / 8 / 12. |
| Fiyatı göster | Anahtar. Oturum açma gerektiren fiyatlandırma kurallarına uyar. |
| Satıcıyı göster | Anahtar. |
B2B katalog alıcıları için yalnızca alıcının kataloğundaki ürünler yüzeye çıkar (Shopify yerel filtreleme — Vertex bunu uçtan uca destekler).
recently-viewed
Bölüm dosyası: sections/recently-viewed.liquid
localStorage takipli ürünler (alıcı başına 12'ye kadar). PDP'nin altında yüzeye çıkar ve ana sayfaya bir şerit olarak bırakılabilir.
Nasıl çalışır
- Her ürün görüntüleme bir
vertex_recently_viewedlocalStorage anahtarına eklenir (FIFO, 12 ile sınırlandırılmıştır) - Bölüm bu anahtarı istemci tarafında okur ve her ürünün kart işaretlemesini getirir
- Alıcı tarayıcı site verilerini temizlediğinde temizlenir — istek listesi değil, Shopify'a kalıcı değil
Ayarlar
- Başlık — "Son görüntülenenler"
- Maksimum ürün — 4 / 6 / 8 / 12
- Boşsa gizle — anahtar, varsayılan açık (alıcının görüntüleme geçmişi olmadığında tüm bölüm kaybolur)
Kalıcı bir istek listesi bir Shopify uygulaması gerektirir — Vertex, son görüntülenenleri kesinlikle oturum/tarayıcı kapsamında tutarak Theme Store politikasına uyumlu kalır. Karşılaştırma aynı desendir (bkz. Yalnızca B2B bölümleri).
sticky-cart
Bölüm dosyası: sections/sticky-cart.liquid
Yalnızca mobil alıcı ana ATC'yi geçtikten sonra görünen yapışkan ATC çubuğu. Alıcılar teknik özellik tablosunda derinleştiğinde bile sepete ekle bir dokunma uzaklıkta kalır.
Neyi oluşturur
- Ürün görüntü küçük resmi (sol)
- Seçili varyant başlığı + fiyatı
- Miktar girişi
- ATC düğmesi (sağ)
Ayarlar
- Yalnızca mobilde göster — varsayılan açık (masaüstünün gezinme için yapışkan başlığı vardır; mobil yapışkan ATC'den daha fazla dönüşüm artışı kazanır)
- Varyant başlığını göster — anahtar
- Renk şeması
Bölüm ana ATC üzerinde bir IntersectionObserver kullanır — yalnızca ana ATC görünüm alanından çıktığında oluşturulur ve görünüm alanına geri kaydırıldığında kaybolur.
B2B etkileşim kopya kağıdı
| Yüzey | Misafir | Oturum açmış B2C | Oturum açmış B2B |
|---|---|---|---|
| Fiyat bloğu | "Hide prices until customer logs in" açıksa gizli | Mağaza fiyatı | B2B katalog fiyatı + hacim kademeleri |
| Hacim fiyatlandırma kademeleri | Gizli | Gizli | Görünür (sunucu tarafından oluşturulmuş) |
| Miktar kuralları | Mağaza MOQ/maks | Mağaza MOQ/maks | Şirket katalog MOQ/maks |
| Satış temsilcisi kartı | Gizli | Gizli | Görünür (temsilci alanları doldurulduğunda) |
| NET koşulları rozeti | Gizli | Gizli | Karşılama çubuğunda görünür (PDP'de değil) |
| Ön sipariş ATC | Etkin olduğunda görünür | Etkin olduğunda görünür | Etkin olduğunda görünür |
| Stoğa girdiğinde haberdar et formu | Tükenince görünür | Tükenince görünür | Tükenince görünür |
| Stok sayacı | Görünür | Görünür | Görünür |
| Son görüntülenenler | Görünür (localStorage) | Görünür (localStorage) | Görünür (localStorage) |
Sırada ne var
- Yalnızca B2B bölümleri → — Toplu sipariş, RFQ, karşılaştırma, B2B özellik tanıtımı
- Satış artırma bölümleri → — Stok sayacı, stoğa girdiğinde haberdar et, hızlı görüntüleme
- Başlık, alt bilgi ve krom → — Başlık, alt bilgi, B2B karşılama çubuğu
- B2B kurulum kılavuzu → — B2B'yi etkinleştir + satış temsilcisi metafield'larını doldur
- Metafield kurulum kılavuzu → — Veri sayfaları, MPN, sevkiyat yeri, teknik özellikler