Shopify özel tema geliştirme
Temanızı Shopify'ın tema mimarisinde sıfırdan yazar, ekibinizin tema editöründen yöneteceği bölümleri ürün yapınıza göre kuruyoruz.
Kodla yazılan, editörden yönetilen temaİlk görüşme ücretsiz
Shopify özel tema geliştirme nedir?
Shopify özel tema geliştirme, hazır bir temayı değiştirmek yerine mağazanızın şablonlarını, bölümlerini ve bloklarını Shopify'ın tema mimarisinde baştan yazmaktır. İçerik yine tema editöründen yönetilir; fark, editörde hangi bölümlerin ve ayarların bulunacağının ürün yapınıza göre tasarlanmasıdır. Sıfırdan bir tema genellikle 4-6 haftada geliştirilir ve mağazanızın kendi Shopify hesabında yayınlanır. Hazır temanın görünümünü markanıza göre düzenlemek ise Shopify tema tasarımı kapsamındadır.
Özel temada neleri yazıyoruz?
- 1
Şablonlar
Ana sayfa, ürün, koleksiyon, sepet, blog ve hesap sayfaları için şablonlar yazarız. Aynı sayfa türü için kampanya ya da ürün grubuna göre ayrı şablonlar kurulabilir.
- 2
Bölümler
Koleksiyon vitrini, kombin önerisi, ürün karşılaştırma gibi bölümleri ürün yapınıza göre yazarız. Başlık ve altbilgi bölüm gruplarıyla yönetilir.
- 3
Bloklar
Bölümlerin içinde sıralanan, yeniden kullanılabilen bloklar sayesinde ekibiniz yeni bir kampanya sayfasını editörden kendisi kurar.
- 4
Ürün verisi
Ürüne özgü bilgileri meta alan ve meta nesnelerle temaya bağlarız; bu bilgiler her üründe kendi yerinde ve aynı düzende görünür.
- 5
Ayarlar ve diller
Renk, yazı tipi ve düzen ayarları tema editöründe Türkçe görünür. Vitrin metinleri Türkçe ve İngilizce dil dosyalarında tutulur.
Gerçek proje
Bir temayı dört mağazaya tek kod tabanından yayınlanacak biçimde yazdık.
Mağaza kapandığı için adını vermiyoruz. Temayı Shopify'ın Skeleton referans temasından başlatıp Tailwind CSS ve TypeScript ile yazdık; kodu GitHub'da tuttuk ve Shopify'ın GitHub entegrasyonuyla mağazaya bağladık. Sürümleri numaralandıran, her değişikliği değişiklik notuna yazan bir yayın düzeni kurduk. Editördeki ayarların kimliklerini hiç değiştirmeme kuralı, her mağazanın kendi içeriğini yeni sürümlerde de korumak için konuldu.
- sayfa şablonu
- 17
- bölüm
- 45+
- TypeScript bileşeni
- 42
Hazır tema ne zaman yetmez, özel tema ne zaman gerekir?
Hazır tema yeterliyse
Hazır bir Shopify teması ürün yapınızı, kampanya düzeninizi ve mobil alışveriş akışınızı karşılıyorsa yeni bir tema yazmak gereksiz kapsam yaratır; bu durumda temayı markanıza göre düzenlemek yeterlidir ve bu iş Shopify tema tasarımı kapsamındadır.
Özel tema gerekiyorsa
Hazır temanın şablonları, bölümleri ya da ayarları istediğiniz sayfa yapısını kurmaya izin vermiyorsa, ekibinizin her kampanyada geliştiriciye ihtiyaç duyduğu bir düzen oluşmuşsa ya da tema kodunda yapılan değişiklikler her güncellemede kayboluyorsa özel tema gerekir.
Ücretli bir temanın kodunu değiştirmek de bir yöntemdir, ama Shopify'ın tema güncelleme kurallarına göre kod düzenlemeleri güncellemeyle çakışırsa yeni sürüme taşınmaz ve elle kopyalanması gerekir. Özel temada ise güncellemeleri siz değil, temanın geliştiricisi planlar. Liquid ile tema geliştirmenin adımlarını Shopify teması nasıl yapılır rehberimizde ayrıntılı anlattık.
Geliştirme nasıl ilerler?
Önce neyi ekibinizin, neyi kodun yöneteceğini yazarız. Geliştirme, canlı mağazanız satışa devam ederken yayınlanmamış bir temada ilerler. Sıfırdan bir tema genellikle 4-6 hafta sürer; başka bir altyapıdan taşıma ile birlikte 6-8 hafta planlanır.
Mağazayı ve ihtiyacı inceleriz
Mevcut temayı ve lisansını, uygulamaların temaya nasıl bağlandığını, Shopify planınızı ve Plus kullanıp kullanmadığınızı inceleriz; Starter planında yalnız Spotlight teması kullanılabildiği için plan seçimi baştan netleşir.
Tasarım sistemini kurarız
Renk, tipografi, düğme, ürün kartı ve form gibi bileşenleri tek bir tasarım sisteminde topluyor, sayfa tasarımlarını bu sistemle hazırlayıp onayınıza sunuyoruz.
Şablon, bölüm ve blok listesini yazarız
Hangi sayfaya hangi şablonun, hangi bölüme hangi ayarın geleceğini yazılı hale getiririz; editörde neyi yöneteceğiniz geliştirme başlamadan belli olur.
Temayı yayınlanmamış temada geliştiririz
Shopify'ın Skeleton referans temasından başlayıp Liquid, Tailwind CSS ve TypeScript ile yazarız; Shopify CLI ile çalışır, kodu GitHub'da sürümleriz. Belirli aşamalarda önizleme bağlantısı paylaşır, geri bildirimi mesajla ya da görüşmeyle alırız.
Yayından önce kontrol ederiz
Theme Check ve TypeScript denetiminden geçen temayı gerçek cihazlarda, uygulama bloklarıyla ve sepetten ödemeye kadar test sipariş akışıyla kontrol ederiz. Hız için puan vaat etmeyiz, ölçümleri birlikte inceleriz.
Yayınlar ve sürümleriz
Temayı yayınladığımızda önceki tema listenizde kalır. Sonraki değişiklikler numaralı sürümler ve değişiklik notlarıyla gelir; bir sorun olursa önceki sürüme dönülür.
Mağazanız için doğru kapsamı birlikte netleştirelim.
İlk görüşme online ve ücretsiz. Formu doldurabilir ya da WhatsApp'tan yazabilirsiniz.
Temayı Shopify'ın resmi araçlarıyla geliştiriyoruz
Araçlar, temanın uzun süre bakım alabilmesi için seçilir. Her biri Shopify'ın kendi dokümanında anlatılan yöntemlerdir.
Shopify CLI
Temayı yerelde geliştirme temasıyla açar, değişiklikleri anında önizleriz. Yükleme ve yayın da Shopify CLI üzerinden yapılır.
GitHub ile sürüm kontrolü
Tema kodu GitHub'da tutulur; Shopify'ın GitHub entegrasyonu ile mağazaya bağlanır ve her değişikliğin kaydı kalır.
Theme Check
Liquid ve JSON dosyalarını Theme Check ile denetleriz; söz dizimi hataları, eksik şablonlar ve performans sorunları yayından önce yakalanır.
Tema blokları ve bölüm grupları
Bölümleri tema blokları ve bölüm gruplarıyla kurarız; bloklar bölümler arasında yeniden kullanılabilir.
Uygulama blokları
Uygulamalar temaya uygulama blokları ve eklemelerle girer; bölümleri bu blokları kabul edecek şekilde yazarız.
Meta alan ve meta nesneler
Ürüne özgü veriyi meta alanlar ve meta nesnelerle modelleyip tema editöründe dinamik kaynak olarak bağlarız.
Neyi kod, neyi ekibiniz yönetir?
Kod, editörde nelerin değişebileceğini belirler. Günlük içerik işleri ekibinizde kalır.
| Kodda biz yazarız | Alan | Editörde siz yönetirsiniz |
|---|---|---|
| Şablonlar ve hangi bölümlerin eklenebileceği | Sayfa düzeni | Bölümleri ekleme, kaldırma ve sıralama |
| Menü, arama ve sepet davranışı | Başlık ve altbilgi | Menü bağlantıları, duyuru metni, logo |
| Bölümlerin ve blokların yapısı ve ayarları | İçerik bölümleri | Görseller, metinler, bağlantılar, blok sırası |
| Meta alanların ürün sayfasında gösterimi | Ürün bilgisi | Ürün başına beden tablosu, malzeme, bakım bilgisi |
| Renk ve yazı tipi ayarlarının tanımı | Görünüm | Renk, yazı tipi ve boşluk seçimi |
| Dil dosyaları ve çeviri anahtarları | Metinler ve diller | Vitrin metinleri ve çeviriler |
| Uygulama bloklarını kabul eden bölümler | Uygulamalar | Uygulamaları ekleme ve yerleştirme |
| Tema kapsamı dışında | Ödeme sayfası | Shopify'ın ödeme düzenleyicisinden |
Hazır tema mı, headless mı, özel tema mı?
Üçünde de ödeme Shopify'ın ödeme sayfasında alınır. Fark, mağazanın vitrin katmanını kimin ve nasıl yazdığındadır.
Hazır tema uyarlaması
Ne değişir?
Görünüm, renk, tipografi ve bölüm düzeni (tema tasarımı)
Yönetim
Tema editöründen
Güncellemeler
Tema geliştiricisinin yayınladığı sürümler; kod değişiklikleri çakışırsa taşınmaz
Barındırma
Shopify
Ne zaman uygun?
Hazır tema ürün yapınızı karşılıyorsa
Headless (Hydrogen)
Ne değişir?
Vitrinin tamamı ayrı bir uygulama olarak yazılır
Yönetim
Tema editörü yerine içerik çoğunlukla Shopify verisinden ve ayrı araçlardan gelir
Güncellemeler
Geliştirme ekibiniz yönetir
Barındırma
Oxygen ya da ayrı bir sunucu
Ne zaman uygun?
Özel tema ve uygulamalarla çözülemeyen bir vitrin ihtiyacı varsa
Özel tema
Ne değişir?
Şablonlar, bölümler, bloklar ve etkileşimler baştan yazılır
Yönetim
Tema editöründen, mağazaya göre tasarlanmış ayarlarla
Güncellemeler
Numaralı sürümlerle temanın geliştiricisi planlar
Barındırma
Shopify
Ne zaman uygun?
Hazır temanın sınırları aşılıyor, editörden yönetim isteniyorsa
Shopify özel tema maliyetini ne belirler?
Fiyatı kapsam belirler. İlk görüşmede aşağıdaki başlıkları mağazanız üzerinden netleştirir, teklifi yazılı hazırlarız.
- Şablon ve bölüm sayısı
- Kampanya, set ürün ya da koleksiyon türüne göre ayrı şablon gerektiğinde. Her yeni bölüm, editörde kendi ayarlarıyla gelir.
- Ürün verisi
- Beden tablosu, malzeme ya da bakım bilgisi gibi alanlar meta alan ve meta nesnelerle modellenecekse.
- Uygulamalar
- Kullandığınız uygulamalar temaya uygulama bloğuyla değil kodla bağlıysa; bu bağlantılar yeni temada yeniden kurulur.
- Diller ve pazarlar
- Vitrin birden fazla dilde ya da pazarda yayınlanacaksa dil dosyaları ve pazara göre içerik ayarları eklenir.
- Shopify Plus
- Müşteri türüne göre tema ya da genişleme mağazaları kullanılacaksa. Ödeme adımlarına özel alan ise uygulama kapsamına girer.
- Taşıma
- Başka bir altyapıdan geçiliyorsa veri ve 301 haritası Shopify mağaza taşıma kapsamında eklenir; süre 6-8 hafta olur.
- Shopify ve uygulama ücretleri
- Tema bedeline dahil değildir; Shopify aboneliği ve uygulama ücretleri doğrudan Shopify faturanıza eklenir.
Özel tema Shopify ödeme sayfasını değiştirir mi?
Hayır, tema ödeme sayfasını değiştirmez. Ödeme, teşekkür ve sipariş durumu sayfaları Shopify'da tema editöründen ayrı bir ödeme düzenleyicisinden yönetilir; logo, renk ve yazı tipi gibi temel ayarlar Basic ve üzeri planlarda bu düzenleyiciden yapılır.
Eskiden ödeme sayfasını düzenlemek için kullanılan checkout.liquid bilgi, kargo ve ödeme adımlarında artık desteklenmiyor; teşekkür ve sipariş durumu sayfalarında da kaldırıldı. Bilgi, kargo ve ödeme adımlarına özel alan eklemek ancak Shopify Plus'ta checkout UI extensions ile mümkün.
Bu yüzden özel tema projesinde sepete kadar olan alışveriş akışını temada kuruyoruz; Plus mağazalarda ödeme adımlarına özel alan gerekiyorsa bunu Shopify özel uygulama kapsamında ayrı ele alıyoruz.
Shopify Plus'ta özel tema: neler değişir?
Shopify Plus'ta özel tema aynı yöntemle yazılır. Fark; ödeme adımlarına uygulamayla eklenen alanlarda, toptan ve perakende müşteriye göre tema uyarlamasında ve genişleme mağazalarında ortaya çıkar.
Ödeme adımları
Bilgi, kargo ve ödeme adımlarına uygulamayla özel alan ve içerik eklemek yalnız Plus'ta mümkündür; tema bu adımları değiştirmez.
Müşteri türüne göre tema
Toptan (B2B) ve perakende müşterilere temanın farklı bölümlerini göstermek yalnız Plus'ta var; pazara göre uyarlama Advanced ve üzerinde kullanılabilir.
Genişleme mağazaları
Plus'ta her canlı genişleme mağazası için ayrı tema lisansı gerekir; özel tema bu mağazalarda aynı kod tabanından kullanılabilir.
Shopify Functions
Özel dağıtımlı bir uygulamada indirim, kargo ve ödeme yöntemi kurallarını Shopify Functions ile yazmak yalnız Plus mağazalarda mümkündür; bu iş tema değil, uygulama tarafında yapılır.
Birden fazla mağaza aynı temayı kullanabilir mi?
Evet. Aynı tema tek bir kod tabanından birden fazla Shopify mağazasına yayınlanabilir; her mağazanın içeriği, görselleri ve ayarları kendi tema editöründe kalır. Plus'ta her canlı genişleme mağazası ayrı tema lisansı ister, ama sıfırdan yazılan tema bu mağazalarda aynı kod tabanından kullanılır.
Bu düzende en önemli kural, editördeki ayarların kimliklerinin hiç değişmemesidir: bir ayarın ya da bölümün kimliği değişirse mağazalardaki içerik o ayarı bulamaz. Bu yüzden yeni özellikleri mevcut ayarları bozmadan ekliyor, her sürümü numaralandırıp değişiklik notuyla yayınlıyoruz.
Shopify'da özel tema yaptırmadan önce netleştirin
Bu soruların cevabı kapsamı belirler. İlk görüşmede birlikte üzerinden geçeriz.
Shopify planınız (Starter planında yalnız Spotlight teması kullanılabilir)
Hangi sayfa türleri için ayrı şablon gerektiği (ör. kampanya ürünleri, set ürünler)
Ürüne özgü hangi bilgilerin meta alan, hangilerinin meta nesne olacağı
Kullandığınız uygulamaların temaya blok, ekleme ya da kod olarak nasıl bağlandığı
Ödeme adımlarından beklentiniz ve bunun Plus gerektirip gerektirmediği
Satış yapacağınız diller ve pazarlar
Mevcut temanın lisansı ve üzerinde yapılmış kod değişiklikleri
Yayın günü planı ve geri dönüş için önceki temanın saklanması
Geliştiriciye verilecek erişim (personel hesabı ya da yalnız tema erişimi; ortak çalışan erişimini Shopify ajansı sayfasında anlattık)
Teslimde neler alırsınız?
Tema sizin hesabınızda yayınlanır ve orada çalışır. Sonraki değişiklikler aynı sürüm düzeniyle gelir.
Mağazanızın kendi Shopify hesabında yayınlanmış tema; önceki tema, tema listenizde taslak olarak kalır.
Numaralı sürüm ve değişiklik notu; sonraki her değişiklik yeni bir sürümle gelir.
Hangi bölümün ve ayarın tema editöründen yönetildiğini gösteren şablon, bölüm ve blok listesi.
Shopify özel tema hakkında sık sorulanlar
Kaynaklar
- Tema mimarisi için Shopify'ın tema mimarisi, JSON şablonlar, bölümler ve Liquid dokümanları; geliştirme araçları için Shopify CLI, Theme Check ve GitHub entegrasyonu sayfaları temel kaynaklardır.
- Lisans ve güncellemeler için lisanssız temalar ve tema güncelleme, performans için Shopify'ın tema performansı rehberi ve Theme Store gereksinimleri, headless karar ölçütü için özel vitrin rehberi incelenebilir.
Hazır temanın nerede yetmediğini birlikte netleştirelim.
Mevcut Shopify mağazanızı, ürün yapınızı ve yapmak istediğiniz değişiklikleri paylaşın. Özel tema gerçekten gerekiyorsa kapsamı çıkaralım; hazır tema ile çözülebilecek bir ihtiyaçsa onu da açıkça söyleyelim.