Vertex'in 4 Demo Mağazası — Vertex, Throttle, OfficeIT, Inkline
Bir Vertex tema lisansı. Dört üretime hazır mağaza görünümü. Her ön ayar belirli bir B2B / B2C endüstriyel dikey için ayarlanmıştır — farklı vurgu renkleri, farklı ana sayfa kompozisyonları, farklı finder'lar, farklı yaşam tarzı görselleri, farklı metin kancaları. Bunlar arasında geçiş yapmak özelleştiricide tek tıklama (kalıcı) veya bir URL parametresi (geçici önizleme) ile mümkündür.
Birden fazla dikey arasında satış yapıyorsanız — veya lansman öncesinde hangi dikeyle önde olacağınıza karar veriyorsanız — bu, mağazanız için doğru başlangıç noktasını seçen kılavuzdur.
Vertex'i dört kez satın almanız gerekmez. 4 ön ayar aynı tema dosyasında gelir. Bunları yeniden karıştırabilirsiniz de — OfficeIT ana sayfasını ama Throttle vurgu rengini seçin veya herhangi bir ön ayarı Özel palet seçiciyle geçersiz kılın. Bunlar başlangıç noktalarıdır, kilitli şablonlar değil.
Neden 4 ön ayar?
Shopify Theme Store, çeşitliliği gösteren temaları ödüllendirir. Tema dizinini tarayan bir alıcı, kendi kullanım durumuna zihinsel olarak çevirmek zorunda olduğu genel bir "B2B teması" demosu değil, kendi sektörünü bir bakışta görmek ister.
Vertex bunu, tek bir tema lisansı altında dört tam doldurulmuş demo mağaza sunarak ele alır. Her ön ayar:
- Sektöre özel ayarlanmış — renk, metin, hero kompozisyonu ve ana sayfa bölüm sırası belirli bir alıcı yolculuğu için seçilir
- Finder duyarlı — otomotiv yedek parça Make/Model/Year fitment finder'ı alır; baskı malzemeleri Printer Brand/Model/Color finder'ı alır; endüstriyel ön ayarın finder'ı yoktur (faceted koleksiyon navigasyonuna güvenir)
- Görsel olarak eksiksiz — ön ayar başına ~9 hero / yaşam tarzı / sektör ızgara görseli, hepsi o dikeyin estetiği için oluşturulmuş. Stok fotoğraf uyumsuzluğu yok.
- Bağımsız olarak temalanabilir — her ön ayarın vurgu renklerini, finder vurgularını ve her ön ayara özgü tipografi seçimlerini değiştiren kendi CSS geçersiz kılma dosyası vardır (
assets/demo-{preset}.css)
Sonuç: Vertex'i, özel tasarım yaptırmadan endüstriyel MRO mağazası, otomotiv yedek parça kataloğu, ofis malzemeleri dağıtıcısı veya baskı malzemeleri tedarikçisi olarak başlatabilirsiniz.
4 ön ayar ayrıntılı olarak
Ön ayar 1 — Vertex (varsayılan)
| Sektör | Endüstriyel tedarik, MRO, donanım, bağlantı elemanları, el aletleri, akışkanlar, aşındırıcılar |
| Vurgu rengi | Amber #fbbf24 |
| Finder | Yok — faceted filtreler + öngörücü aramaya güvenir |
| Ana sayfa hero | Kalın tipografi + atölye / depo yaşam tarzı görselleri |
| B2B kancaları | "Hacim fiyatlandırması", "NET-30 mevcut", "ISO 9001 sertifikalı", "24 saatlik sevkiyat" |
| En iyisi | Genel endüstriyel dağıtıcılar, MRO tedarikçileri, bağlantı elemanı / donanım tüccarları, alet katalogları, JanSan tedarikçileri |
Bu varsayılandır. Vertex'i Shopify Theme Store'dan yüklediğinizde, yüklenen budur. Amber vurgu, satın alma alıcılarının hemen tanıdığı sıcak, endüstriyel bir McMaster-Carr / Grainger / Fastenal görsel diline eşlenir.
Ön ayar 2 — Throttle (otomotiv yedek parça)
| Sektör | Otomotiv yedek parça, performans, satış sonrası, OEM yedek, motosiklet, deniz, powersports |
| Vurgu rengi | Kırmızı-turuncu #ec5f24 |
| Finder | Make / Model / Year fitment kademesi (3 açılır menü) |
| Ana sayfa hero | Ürün koleksiyonlarının üstünde finder'la fitment-öncelikli mesajlaşma ("Aracınız için parça bulun") |
| B2B kancaları | "Ticari fiyatlandırma", "Depo sevkiyatı", "OEM çapraz referans", "Bayi hesapları" |
| En iyisi | Otomotiv yedek parça dağıtıcıları, performans dükkanları, motosiklet / deniz / RV parçaları, ATV / UTV / powersports |
Throttle ön ayarının belirleyici özelliği fitment finder'dır — ana sayfa hero'sunda, koleksiyon sayfası kenar çubuğunda ve opsiyonel yapışkan çubuk olarak render edilen 3 adımlı kademeli açılır menü (Make ▸ Model ▸ Year). Alıcılar araçlarını bir kez seçerler; sonraki ürün görünümleri yalnızca fitment uyumlu parçalara filtrelenir.
Kırmızı-turuncu vurgu, performans / otomotiv / enerji görsel diline eşlenir — RockAuto + Summit Racing tek bir temada.
Ön ayar 3 — OfficeIT (ofis, IT, elektronik)
| Sektör | Ofis malzemeleri, IT donanımı, elektronik, fotokopi kağıdı, monitörler, klavyeler, dizüstü bilgisayarlar, toplu sarf malzemeleri |
| Vurgu rengi | Mavi (kurumsal, IT seviyesi) |
| Finder | Brand / Category / Capacity kademesi (3 açılır menü) — örn. "HP ▸ Toner ▸ 5000 sayfa" |
| Ana sayfa hero | Toplu sipariş mesajlaşması, B2B hesap kancaları, NET-30 / fatura faturalama CTA'ları |
| B2B kancaları | "Toplu indirimler", "İşletmeler için Net-30", "X $ üzerinde ücretsiz kargo", "Özel hesap yöneticisi" |
| En iyisi | Ofis malzemeleri dağıtıcıları, IT bayileri, elektronik toptancıları, okul / devlet malzemeleri, kurumsal satın alma satıcıları |
OfficeIT, toplu B2B ofis siparişleri ile öne çıkar — alıcı yolculuğu "bir fare ihtiyacım var" yerine "50 masalı bir ofisi donatmam gerekiyor"dur. Hero metni ve CTA'lar toplu sipariş, RFQ ve NET-30'u belirgin biçimde yüzeye çıkarır; ana sayfa standart öne çıkan koleksiyonun üzerinde toplu sipariş hızlı pad'ini öne çıkarır.
Mavi vurgu, alıcıların bu kategoriden beklediği kurumsal IT / Quill / Staples Business Advantage görsel diline eşlenir.
Her ön ayarın içinde neler var
Her ön ayar bu varlıkların kendi kopyalarıyla gelir:
| Varlık | Ön ayar başına varyant |
|---|---|
| Ana sayfa şablonu | templates/index.json (varsayılan Vertex) + templates/index.throttle.json, index.officeit.json, index.printsupply.json |
| Koleksiyon şablonu | templates/collection.json + bölüm sırasının farklı olduğu ön ayar başına varyantlar (örn. Throttle finder'ı filtrelerin üstüne koyar) |
| Ürün şablonu | templates/product.json + ön ayar başına varyantlar (örn. Inkline "uyumlu yazıcılar" sekmesi ekler) |
| CSS geçersiz kılma | assets/demo-{preset}.css — --color-accent, --color-on-accent, finder vurgusu, gradyan duraklarını geçersiz kılar |
| Hero görseli | Ön ayar başına ~3 hero varyantı, hepsi dikeyin estetiği için oluşturulmuş |
| Yaşam tarzı görseli | Ön ayar başına ~3 yaşam tarzı fotoğrafı (atölye / bayilik / ofis / baskı atölyesi) |
| Sektör ızgarası görselleri | Ön ayar başına ~3 sektör kartı görseli (örn. Vertex için HVAC + üretim + tesisler; Throttle için arabalar + motosikletler + tekneler) |
| Demo metni | Hero başlıkları, alt başlıklar, CTA etiketleri, referans metinleri — hepsi ön ayar başına ayarlanmıştır |
Bu, ön ayarları değiştirmenin "bir rengi değiştir ve dua et" değil, tutarlı bir mağaza değişimi olduğu anlamına gelir.
Ön ayarları nasıl değiştireceğiniz
Değiştirmek için iki yolunuz var — kalıcı ve geçici önizleme.
Kalıcı — özelleştirici aracılığıyla
- Shopify yöneticisini açın ve Online Store ▸ Themes yolunu izleyin.
- Vertex'te Customize seçeneğine tıklayın.
- Sol kenar çubuğunda Theme settings ▸ Colors seçeneğine tıklayın.
- Starter color palette bölümüne ilerleyin.
- Şunlardan birini seçin:
- Custom — tamamen özel palet (aşağıdaki manuel renk seçicilerinizi kullanır)
- Vertex — amber endüstriyel (varsayılan)
- Throttle — kırmızı-turuncu otomotiv yedek parça
- OfficeIT — kurumsal mavi
- Inkline — baskı/repro turkuaz
- Sağ üstte Save.
Vurgu rengi anında değişir. Ana sayfayı da o ön ayarın düzenine değiştirmek için aşağıdaki Ana sayfa şablonunu değiştirme bölümüne bakın.
Theme settings ▸ Colors içindeki renk ön ayarı yalnızca renkleri değiştirir. Tam ön ayar deneyimini (ana sayfa düzeni, finder, yaşam tarzı görselleri) elde etmek için, eşleşen ana sayfa şablon son ekini de uygulamanız gerekir — sonraki bölüme bakın.
Geçici — URL önizlemesi aracılığıyla
Herhangi bir mağaza URL'sinde bir ön ayarı uygulamadan önizlemek için:
| Ön ayar | Önizleme URL parametresi |
|---|---|
| Vertex | (varsayılan — parametre yok) |
| Throttle | ?view=throttle |
| OfficeIT | ?view=officeit |
Örneğin:
https://your-store.myshopify.com/?view=throttle
https://your-store.myshopify.com/collections/all?view=officeit
Bu, Shopify'ın yerel şablon son eki özelliğini kullanır — mağaza, o tek sayfa görünümü için alternatif şablon dosyasını (index.throttle.json) kullanarak render eder. Hiçbir şey kaydedilmez; parametre olmadan yenileme varsayılana geri döner.
Bunu şunlar için kullanın:
- Kararı kesinleştirmeden önce küçük bir kitleyle bir ön ayarı A/B test etmek
- Bir paydaşa demo URL'si göndermek ("mağazamızın otomotiv yedek parça versiyonunun nasıl hissedeceğine bakın")
- İki tarayıcı sekmesinde hero kompozisyonlarını yan yana karşılaştırmak
Ana sayfa şablonunu değiştirme
Bir ön ayarın ana sayfa düzenini kalıcı olarak uygulamak için:
- Online Store ▸ Themes ▸ Customize ▸ Home yolunu açın.
- Üst şablon seçicide, Add template seçeneğini seçin veya ön ayarın
index.{preset}.jsonvaryantını seçin. - Kaydedin.
Alternatif olarak, sayfa kurulumunda ilgili şablon son eki olan bir ana sayfa belirleyin veya rahatsanız doğrudan settings_data.json'u düzenleyin.
Hiçbir şey, bir ön ayarın ana sayfasını vurgusuyla kullanmaya zorlamaz. Throttle ana sayfa düzenini (fitment-finder-öncelikli kompozisyonu sevdiğiniz için) Inkline turkuaz vurgusuyla (markanıza uyduğu için) ve OfficeIT toplu sipariş pad bölümüyle (alıcılarınız elektronik tablolardan yapıştırdığı için) birlikte kullanabilirsiniz. Vertex bileşendir.
Vurgu rengi geçersiz kılma nasıl çalışır
Her ön ayar assets/demo-{preset}.css adresinde küçük bir CSS dosyası ile gelir:
/* assets/demo-throttle.css */
:root {
--color-accent: 236 95 36; /* ec5f24 — Throttle red-orange */
--color-on-accent: 255 255 255;
}
.finder-bar { --finder-accent: var(--color-accent); }
Starter color palette ayarı Throttle olarak ayarlandığında, düzen bu dosyayı {% if settings.starter_palette == 'throttle' %}{{ 'demo-throttle.css' | asset_url | stylesheet_tag }}{% endif %} aracılığıyla dahil eder.
Vurgu CSS değişkenleri --color-accent + --color-on-accent her bileşenden akar — düğmeler, pill'ler, rozetler, bağlantılar, odak halkaları, açılır menü vurguları, B2B karşılama çubuğu, finder açılır menüleri, hero CTA'lar. Paleti değiştirmek, tüm mağazanın vurgusunu tek bir render'da değiştirir.
Bu, ayrıca şunları yaparak kendi ön ayarınızı yazabileceğiniz anlamına gelir:
- Mevcut
demo-*.cssdosyalarından birini kopyalayın demo-mybrand.cssolarak yeniden adlandırın--color-accent+--color-on-accentdeğerlerini ayarlayın- Başka bir
{% if %}dalı ilelayout/theme.liquidiçine bağlayın - (Opsiyonel)
templates/index.mybrand.jsonadresinde eşleşen bir ana sayfa şablonu ekleyin
Bir güçlü kullanıcı bir saatten az sürede 5. bir ön ayar üretebilir.
Ön ayarınızı seçme — karar matrisi
Başlangıç noktasını seçmek için bunu kullanın. Unutmayın: sonradan her şeyi geçersiz kılabilirsiniz.
| Eğer satıyorsanız... | Şununla başlayın | Neden |
|---|---|---|
| Bağlantı elemanları, el aletleri, yağlayıcılar, aşındırıcılar, donanım, genel MRO | Vertex | Genel endüstriyel taban çizgisi, finder gerekmez (faceted filtreler iş görür) |
| Otomotiv / motosiklet / deniz / RV / powersports parçaları | Throttle | Fitment finder bu dikey için belirleyici özelliktir |
| Ofis, IT, elektronik, fotokopi malzemeleri, okul / devlet malzemeleri | OfficeIT | Toplu B2B ofis siparişleri + kurumsal IT görsel dili |
| Yazıcı mürekkebi, toner, geniş format kağıt, reprografik sarf malzemeleri | Inkline | Yazıcı kartuşu finder'ı bu dikeydeki 1 numaralı alıcı hatasını ortadan kaldırır |
| Temizlik / sanitasyon (JanSan) | Vertex | Vertex'in MRO taban çizgisi JanSan'a temiz şekilde eşlenir; özel finder gerekmez |
| Teknik veri sayfalı endüstriyel kimyasallar / yağlayıcılar | Vertex | Teknik özellik tabloları + dokümanlar bloğu Vertex ön ayarının çekirdeğidir |
| İnşaat malzemeleri (kereste, beton, alçıpan) | Vertex | Vertex taban çizgisi + toplu sipariş sayfası iyi çalışır; daha soğuk bir palet istiyorsanız OfficeIT mavisini düşünün |
| Özel logo baskılı promosyon ürünleri | Inkline | Turkuaz vurgu + baskı atölyesi görsel dili kategoriye uyar, finder mürekkep/toner için daha kullanışlı olsa bile |
| Yalnızca toptan (B2C yok) | Vertex veya OfficeIT | İkisi de çalışır; markanıza uyan vurguyu seçin. Storefront modunu B2B-only olarak değiştirin. |
Ön ayarı özelleştirme
Ön ayarlar başlangıç noktalarıdır. Yükledikten sonra şunları yapabilirsiniz:
| Özelleştir | Nasıl |
|---|---|
| Vurgu rengi | Theme settings ▸ Colors ▸ Starter palette ▸ Custom, ardından kendi --color-accent'inizi seçin |
| Logo | Theme settings ▸ Logo — demo logoyu kendi SVG veya PNG'nizle değiştirin |
| Ana sayfa bölüm sırası | Customizer ▸ Home — bölümleri yeniden sıralamak için sürükleyin veya 30+ bölüm paletinden bölüm ekleyin/kaldırın |
| Hero görselleri | Özelleştiricide Hero bölümüne tıklayın, her slaytın görselini değiştirin |
| Yaşam tarzı / sektör görselleri | Özelleştiricide bölüm başına değiştirin; her bölümün bir Görsel seçicisi vardır |
| Finder açılır menü etiketleri + verileri | (Throttle / OfficeIT / Inkline) — metafield odaklı veri yapısı için Finder kurulum kılavuzuna bakın |
| Tipografi | Theme settings ▸ Typography — başlık fontu, gövde fontu, ölçek oranı |
| Metin / CTA'lar | Her bölüm için özelleştiricide metni satır içinde düzenleyin |
| Çeviriler | Theme settings ▸ Languages — locales/*.schema.json geçersiz kılmaları aracılığıyla özel dizeler sağlayın |
Özelleştirdikten sonra, çalışmanızı Online Store ▸ Themes ▸ Theme library içinde adlandırılmış bir tema olarak kaydedebilirsiniz — A/B testleri çalıştırırken veya görsel değişiklikleri hazırlarken kullanışlıdır.
İlgili okuma
- Genel Bakış — Vertex neden bir temada 4 ön ayar sunar
- Kurulum — Tema kurulumu + kurulum sırasında ön ayar seçimi
- Tema ayarları referansı — Colors ▸ Starter palette ve ön ayar başına ayarlar
- Markets ve çoklu para birimi — Her ön ayar tüm pazarlarda aynı çalışır
- Storefront modu kılavuzu — Hybrid / B2B-only / B2C-only'nin ön ayarlarla etkileşimi
- Müşteri hesabı paneli — Tüm ön ayarlarda aynıdır (yalnızca vurgu rengi değişir)
- RFQ sayfası kılavuzu — Tüm ön ayarlarda aynıdır
- B2B kurulum kılavuzu — Aynı B2B yapılandırması 4 ön ayarın tümü için çalışır
Özet
- Vertex tek bir tema lisansında 4 demo ön ayarı sunar: Vertex (endüstriyel amber), Throttle (otomotiv yedek parça kırmızı-turuncu), OfficeIT (ofis/IT mavi), Inkline (baskı malzemeleri turkuaz).
- Her ön ayarın kendi ana sayfa şablonu, finder'ı, vurgu CSS'i ve ~9 yaşam tarzı görseli vardır.
- Theme settings ▸ Colors ▸ Starter palette içinde kalıcı olarak + ön ayarın ana sayfa şablonu son ekini uygulayarak geçiş yapın.
- Önizlemeler için herhangi bir mağaza URL'sine
?view=throttle | officeit | printsupplyekleyerek geçici olarak geçiş yapın. - Ön ayarlar başlangıç noktalarıdır — vurgu rengi, ana sayfa düzeni, finder, görseller ve metin bağımsız olarak geçersiz kılınabilir.
-
- özel bir ön ayar, mevcut bir
demo-*.cssdosyasını kopyalayıplayout/theme.liquidiçine bağlayarak yaklaşık bir saatte yazılabilir.
- özel bir ön ayar, mevcut bir