Matter
Tasarım sisteminin ürünün kendisi olduğu bir tema.
- Platform
- Shopify Online Store 2.0
- Teknolojiler
- Shopify · Liquid · Tailwind CSS · JavaScript · Section Rendering API · Theme Check
- Rolüm
- Tema mimarisi, tasarım sistemi, Liquid section ve blokları, erişilebilirlik, performans ve Theme Store paketlemesi.
Genel bakış
Matter, Shopify Theme Store için tasarlanmış, mobilya ve ev dekorasyonu mağazalarına yönelik premium bir tema. İlk preset'i gerçek bir mobilya mağazasının kataloğundan doğdu: oda bazlı gezinme, geniş ürün aileleri ve bolca pratik detay.
Problem
Mobilya mağazaları büyük ve üzerinde düşünülen ürünler satıyor. Alışveriş yapanlar oda oda geziyor, ölçüleri ve malzemeleri karşılaştırıyor; teslimat ve garanti konusunda içleri rahat etmek istiyor. Çoğu tema ya sıradan görünüyor ya da mağaza sahibi bir rengi veya bölümü değiştirdiği anda dağılıyor.
Yaklaşım
Tasarım sisteminden başlamak. Renkler, tipografi, boşluklar ve bileşen tarifleri tema ayarlarından CSS değişkenleri olarak geliyor; böylece mağaza sahibi nasıl yapılandırırsa yapılandırsın her bölüm tutarlı kalıyor.
Ardından mağazayı faz faz inşa etmek: kabuk, kartlar, koleksiyon sayfaları, ürün sayfası, ana sayfa bölümleri. Her biri yayına çıkmadan önce yerleşik bir stil rehberi görünümünde görünür oluyor.
Mühendislik
Liquid, JSON şablonlar ve tema blokları; build aşamasında derlenen Tailwind CSS v4 ve bir JavaScript framework'ü yerine küçük custom element'ler.
E.01
Sunucuda render edilen etkileşimler
Tahmine dayalı arama, sepet güncellemeleri, ürün varyantları ve koleksiyon filtreleri Shopify'ın Section Rendering API'si ile yeniden render ediliyor; HTML her zaman doğru kaynak olarak kalıyor.
E.02
Tema ayarlarından token'lar
Mağaza ayarları, yardımcı sınıfların okuduğu --ds-* CSS değişkenlerine dönüşüyor; böylece derlenen stil dosyası yalnızca kaynak değiştiğinde değişiyor.
E.03
Blok tabanlı ürün sayfası
Satın alma alanı yeniden sıralanabilen bloklardan oluşuyor (varyant seçici, fiyat ve stok, teslimat, güven, özellikler, yorumlar); yanında video, 3D ve AR destekleyen bir galeri var.
E.04
Klavye öncelikli kalıplar
Tahmine dayalı arama combobox ve listbox kalıbını izliyor; menüler, çekmeceler ve diyaloglar tamamen klavyeyle kullanılabilecek şekilde tasarlandı.
E.05
Theme Store'a hazırlık
Doğrulama sürecinde Theme Check çalışıyor, preset listeleri şablonlardan üretiliyor ve bir paketleme betiği Theme Store paketini hazırlıyor.
Rolüm
Mimariyi tasarladım ve temayı geliştirdim: tasarım sistemi, section ve bloklar, etkileşimler, liste ve paketleme araçları.
Sonuç
Ellinin üzerinde yapılandırılabilir bölüm, birden fazla preset ve paketlenmiş bir sürüm içeren, Shopify Theme Store için hazırlanan eksiksiz bir Online Store 2.0 teması.
Seçili görseller
