Shopify temaları, kod yazmadan pek çok değişikliği tema editöründen yapmanıza izin verir. Ancak markanıza özel bir ürün sayfası düzeni, yeni bir bölüm ya da ürün verisine göre değişen içerikler istediğinizde Shopify’ın şablon dili Liquid devreye girer. Shopify tema özelleştirme işini doğru yapmak, hem bugünkü ihtiyacı çözmek hem de temanın ileride güncellenebilir kalmasını sağlamak demektir. Bu yazıda Shopify tema yapısını, Liquid’in temel mantığını, kod düzenlemenin güvenli yolunu ve hangi işin editörle, hangisinin kodla yapılması gerektiğini anlatıyoruz.
Shopify’ı genel olarak tanımıyorsanız önce Shopify nedir yazımıza göz atabilirsiniz. Bu yazı, mağazası açık olan ve temasını bir adım ileri taşımak isteyenler için hazırlandı.
Shopify tema düzenleme: Editör mü, kod mu?
Shopify’da tema değişikliklerinin büyük kısmı iki yoldan yapılır:
- Tema editörü (özelleştir): Bölümleri (section) ve blokları ekleyip çıkarabilir, sıralarını değiştirebilir, renk, yazı tipi ve metin gibi ayarları düzenleyebilirsiniz. Kod bilgisi gerekmez.
- Kod düzenleme: Tema dosyalarını doğrudan düzenleyerek yeni bölümler, bloklar veya mantık eklersiniz. Liquid, HTML, CSS ve JavaScript bilgisi gerekir.
Altın kural şudur: Editörle yapılabilen bir değişikliği kodla yapmayın. Kodla yapılması gereken bir değişikliği ise editörden yönetilebilir hale getirin. Yani yeni bir bölüm yazıyorsanız, metinleri ve görselleri koda gömmek yerine ayarlar aracılığıyla editörde düzenlenebilir kılın. Böylece pazarlama ekibiniz her küçük değişiklik için geliştiriciye ihtiyaç duymaz.
Shopify tema yapısı: Hangi klasör ne işe yarar?
Shopify’ın geliştirici dokümanına göre bir tema şu ana klasörlerden oluşur:
| Klasör | Ne içerir? |
|---|---|
| layout | Tüm sayfaları saran ana dosya (theme.liquid); başlık, alt bilgi ve bölüm grupları burada yer alır |
| templates | Her sayfa türünün neyi göstereceğini belirler; JSON şablonlar bölümleri bir araya getirir |
| sections | Mağaza sahibinin editörden yönetebildiği, yeniden kullanılabilir içerik modülleri |
| blocks | Bölümlerin içine eklenip çıkarılabilen, sıralanabilen küçük modüller |
| snippets | Tema içinde tekrar kullanılan Liquid kod parçaları; editörde görünmez |
| assets | Görsel, CSS ve JavaScript dosyaları |
| config | Tema ayarlarını tanımlayan ve saklayan JSON dosyaları |
| locales | Tema metinlerinin çeviri dosyaları |
Güncel Shopify temalarında sayfa şablonları çoğunlukla JSON formatındadır. Bu yapı, bir sayfanın hangi bölümlerden oluştuğunu tanımlar ve bölümlerin editörden eklenip sıralanabilmesini sağlar. Özelleştirme yaparken bu yapıya uyum, temanın esnek kalmasının anahtarıdır.
Shopify Liquid nedir? Temel kavramlar
Liquid, Shopify’ın mağaza verisini (ürün, koleksiyon, sepet, müşteri gibi) sayfaya yerleştirmek için kullandığı şablon dilidir. Üç temel yapı taşı vardır:
- Nesneler (objects): Çift süslü parantez içinde yazılır ve veriyi ekrana basar. Örneğin {{ product.title }} ürün adını, {{ product.price | money }} ise ürün fiyatını mağazanın para birimi biçiminde gösterir.
- Etiketler (tags): Süslü parantez ve yüzde işaretiyle yazılır ve mantık kurar. Örneğin {% if product.available %} ile ürün stoktaysa bir içerik, değilse başka bir içerik gösterilebilir; {% for %} döngüsüyle bir koleksiyondaki ürünler listelenebilir.
- Filtreler (filters): Dikey çizgiyle nesneye eklenir ve çıktıyı biçimlendirir. Fiyatı para birimiyle göstermek, görseli belirli bir boyutta çağırmak veya metni kısaltmak filtrelerle yapılır.
Bölümlerin editörde hangi ayarları göstereceği ise bölüm dosyasının sonundaki şema (schema) kısmında tanımlanır. Bir metin alanı, görsel seçici veya renk ayarı eklemek istediğinizde bu şemaya yeni bir ayar eklersiniz; editörde girilen değer Liquid ile sayfaya basılır.
E-ticaretinizi birlikte kuralım ve büyütelim
Shopify, pazaryerleri, e-fatura ve reklam ölçümlemesini tek elden kuruyoruz. Sorunuzu WhatsApp'tan yazın ya da formu doldurun, sizi arayalım.
Shopify kod düzenleme: Güvenli çalışma düzeni
Canlı temada doğrudan kod düzenlemek, bir yazım hatasının tüm mağazayı bozmasına yol açabilir. Güvenli bir düzen için şu adımları izleyin:
- Temanın kopyasını oluşturun: Online Mağaza > Temalar bölümünden canlı temanızı çoğaltın ve tüm değişiklikleri bu kopya üzerinde yapın.
- Önizlemede test edin: Kopya temayı önizleyerek farklı sayfa türlerinde ve mobilde kontrol edin.
- Yerel geliştirme ve sürüm kontrolü kullanın: Shopify CLI ile temayı bilgisayarınıza çekip yerel ortamda geliştirebilir, değişiklikleri Git gibi bir sürüm kontrol sistemiyle takip edebilirsiniz. Böylece her değişikliğin kaydı tutulur ve gerektiğinde geri dönülebilir.
- Değişiklikleri belgeleyin: Hangi dosyada neyi neden değiştirdiğinizi kısa notlarla kaydedin.
- Yayına alın ve izleyin: Kopyayı yayınladıktan sonra satış, hata ve hız metriklerini birkaç gün yakından takip edin.
Sık yapılan Shopify tema özelleştirmeleri
Ürün sayfasına özel bilgi alanları eklemek
Malzeme, bakım talimatı, ölçü tablosu veya teslim süresi gibi ürüne özel bilgiler için metafield kullanmak en temiz yoldur. Metafield, ürüne ek veri alanı tanımlamanızı sağlar; bu alan güncel temalarda çoğu zaman kod yazmadan, editördeki dinamik kaynak bağlantısıyla sayfaya eklenebilir. Daha karmaşık gösterimler için Liquid ile özel bir blok yazılır.
Yeni bir bölüm oluşturmak
Kampanya bandı, marka hikayesi, karşılaştırma tablosu gibi temada olmayan bir içerik modülü için yeni bir bölüm dosyası yazılır. Bölüm, şema ayarlarıyla editörden yönetilebilir hale getirilir ve istenen sayfa şablonlarına eklenebilir.
Koleksiyon ve ürün kartlarını özelleştirmek
Ürün kartında indirim yüzdesi, stok uyarısı veya varyant renkleri göstermek gibi değişiklikler genellikle kart için kullanılan snippet dosyasında yapılır. Bu snippet birçok sayfada kullanıldığı için değişikliğin tüm sayfalara etkisini test edin; koleksiyon, arama sonuçları ve önerilen ürünler alanları aynı kartı kullanıyor olabilir.
Farklı ürünler için farklı şablon kullanmak
Belirli ürün grupları için farklı bir sayfa düzeni gerekiyorsa yeni bir ürün şablonu oluşturup bu ürünlere atayabilirsiniz. Örneğin set ürünler ile tekil ürünlerin sayfa düzeni farklı olabilir.
Örnek: Ürün sayfasına ücretsiz kargo mesajı eklemek
Liquid’in mantığını somut bir örnekle görelim. Amaç, ürün sayfasında “Bu ürün ücretsiz kargo kapsamında” ya da “Ücretsiz kargo için X TL daha ekleyin” gibi bir mesaj göstermek olsun. İş şu adımlarla yapılır:
- Yeni bir blok dosyası oluşturun: Mesajı ürün bilgi bölümüne eklenebilen bir blok olarak yazın; böylece editörden istenen konuma taşınabilir.
- Eşiği ayar olarak tanımlayın: Ücretsiz kargo eşiğini koda yazmak yerine blok şemasına bir sayı ayarı olarak ekleyin. Pazarlama ekibi eşiği değiştirdiğinde koda dokunmaya gerek kalmaz.
- Koşulu Liquid ile kurun: Bir if etiketiyle ürün fiyatını eşikle karşılaştırın; fiyat eşiğin üzerindeyse birinci mesajı, değilse aradaki farkı money filtresiyle biçimlendirerek ikinci mesajı gösterin.
- Metinleri çeviri dosyasına taşıyın: Mağazanız birden fazla dilde satış yapıyorsa mesaj metinlerini locales dosyalarında tutun.
- Test edin: Eşiğin altında ve üstünde fiyatı olan ürünlerde, indirimli ürünlerde ve farklı para birimlerinde mesajın doğru göründüğünü kontrol edin.
Bu küçük örnek, iyi bir özelleştirmenin üç özelliğini gösterir: editörden yönetilebilir, metinleri çevrilebilir ve kodu tek bir dosyada toplanmış.
Çok dilli mağazalarda tema metinleri
Yurt dışına satış yapan mağazalarda tema içindeki sabit metinler (buton yazıları, uyarılar, form etiketleri) çeviri dosyaları üzerinden yönetilir. Özel kod yazarken metinleri doğrudan HTML içine yazmak, o metnin diğer dillerde çevrilmeden kalmasına yol açar. Yeni bir bölüm veya blok eklediğinizde içindeki her metnin çeviri anahtarıyla çağrıldığından ya da editör ayarı olarak tanımlandığından emin olun.
Shopify section ve uygulama blokları
Pek çok Shopify uygulaması temaya kod eklemek yerine uygulama bloğu (app block) olarak çalışır; bu bloklar editörden istenen bölüme eklenip kaldırılabilir. Uygulama kaldırıldığında blok da temadan kalkar ve geride kod kalmaz. Uygulama seçerken uygulama bloğu desteğine bakmak, temanızı temiz tutmanın kolay bir yoludur. Eski yöntemle tema dosyalarına kod ekleyen uygulamaları kaldırdıktan sonra geride kalan kodu kontrol edin.
Neler tema Liquid’i ile özelleştirilemez?
Ödeme sayfası (checkout), güvenlik nedeniyle tema kodundan ayrı çalışır. Ödeme adımlarının görünümü ve içeriği, Shopify’ın checkout ayarları ve uzantıları ile yönetilir; daha derin özelleştirmeler Shopify Plus planında sunulur. Bu yüzden “ödeme sayfasına bir alan ekleyelim” gibi talepler tema Liquid’i ile değil, uygun uzantı veya uygulamalarla çözülür. Ölçüm kodlarını da tema dosyalarına eklemek yerine Shopify’ın Customer events altyapısıyla yönetin; ayrıntılar için Shopify’da GA4 ve Meta Pixel kurulumu yazımıza bakabilirsiniz.
Özelleştirme ve tema güncellemeleri
Tema geliştiricileri temalarını düzenli olarak günceller. Tema dosyalarında yaptığınız değişiklikler arttıkça, yeni sürüme geçmek zorlaşır; çünkü güncelleme sırasında özel kodun yeni sürüme yeniden taşınması gerekir. Bu riski azaltmak için:
- Özel kodu mümkün olduğunca ayrı bölüm, blok ve snippet dosyalarında tutun; temanın ana dosyalarını az değiştirin.
- Yaptığınız değişikliklerin listesini, dosya adlarıyla birlikte tutun.
- Güncellemeyi önce kopya bir temada deneyin.
Özelleştirmenin hıza ve SEO’ya etkisi
Her yeni bölüm, script ve stil dosyası sayfa ağırlığını artırır. Özel kod eklerken görselleri doğru boyutta çağırın, gereksiz JavaScript eklemeyin ve yalnızca ihtiyaç duyulan sayfada yüklenmesini sağlayın. Başlık hiyerarşisini (her sayfada tek bir ana başlık) ve ürün yapılandırılmış verisini bozmadığınızdan emin olun. Arama motoru tarafını e-ticaret SEO kontrol listesi yazımızda anlattık.
Özelleştirmeye uygun tema nasıl seçilir?
Özelleştirme ihtiyacı, tema seçimiyle başlar. Ne kadar çok özellik temada hazır gelirse o kadar az kod yazarsınız. Tema seçerken şu soruları sorun: Tema güncel bölüm ve blok yapısını kullanıyor mu? İhtiyaç duyduğunuz sayfa düzenleri (ürün karşılaştırma, ölçü tablosu, set ürün) hazır geliyor mu? Tema geliştiricisi düzenli güncelleme ve destek sağlıyor mu? Demo mağazada hız ölçümü nasıl? Temanın sunduğu özellikleri listeleyip ihtiyaç listenizle karşılaştırdığınızda, özel geliştirme gerektirecek işler de netleşir ve bütçe planlaması kolaylaşır.
Tema özelleştirmesini kendiniz mi yapmalısınız?
Renk, yazı tipi, bölüm sırası ve metin değişiklikleri için tema editörü yeterlidir ve ekibiniz bunu kolayca öğrenebilir. Yeni bölüm yazmak, ürün verisine göre değişen mantık kurmak, performans iyileştirmesi yapmak veya birden fazla şablonu yeniden düzenlemek ise Liquid, HTML, CSS ve JavaScript deneyimi gerektirir. Bu tür işlerde hatalı bir değişiklik satışları doğrudan etkileyebileceği için deneyimli bir ekiple çalışmak daha güvenlidir.
Shopify’ı kendiniz yönetmek ve temel tema düzenlemelerini öğrenmek istiyorsanız birebir Shopify eğitimi seçeneğimiz de bulunuyor; eğitim takvimi ve kayıt için eğitim kayıt sayfamıza bakabilirsiniz.
Sonuç
Shopify tema özelleştirmede başarı, editörle yapılabilecek işi editöre bırakmak, kodla yapılan işi ise editörden yönetilebilir, belgelenmiş ve güncellenebilir şekilde yazmaktır. Değişiklikleri her zaman kopya bir temada yapın, sürüm kontrolü kullanın ve yayından sonra hız ile satış metriklerini izleyin. Bu disiplinle yapılan özelleştirmeler, temanızı markanıza uygun hale getirirken bakım yükünü de kontrol altında tutar ve gelecekteki tema güncellemelerini zahmetsiz hale getirir. Ekibinizin hangi değişiklikleri kendi başına yapabileceğini, hangilerinin geliştirici gerektirdiğini de baştan belirleyin.
Markanıza özel bölümler, ürün sayfası düzenlemeleri veya tema performans iyileştirmesi için Shopify tema özelleştirme ve Shopify geliştirme hizmetlerimizi içeren e-ticaret yazılım danışmanlığı sayfamızı inceleyebilirsiniz.
Sık Sorulan Sorular
Shopify Liquid nedir?
Liquid, Shopify'ın ürün, koleksiyon, sepet ve müşteri gibi mağaza verilerini sayfaya yerleştirmek için kullandığı şablon dilidir. Nesneler veriyi gösterir, etiketler mantık kurar, filtreler ise çıktıyı biçimlendirir.
Shopify temasında kod nasıl düzenlenir?
Önce canlı temanızın kopyasını oluşturun ve değişiklikleri bu kopyada yapın. Basit düzenlemeler için yönetim panelindeki kod düzenleyiciyi, kapsamlı işler için Shopify CLI ile yerel geliştirme ve sürüm kontrolünü kullanın. Kopyayı test ettikten sonra yayınlayın.
Shopify section nedir?
Section, mağaza sahibinin tema editöründen ekleyip çıkarabildiği, sıralayabildiği ve ayarlarını düzenleyebildiği içerik modülüdür. Bölümlerin içine bloklar eklenebilir; editörde görünen ayarlar bölüm dosyasının şema kısmında tanımlanır.
Shopify ödeme sayfası Liquid ile düzenlenebilir mi?
Hayır. Ödeme sayfası tema kodundan ayrı çalışır ve Shopify'ın checkout ayarları ile uzantılarıyla yönetilir. Daha derin ödeme sayfası özelleştirmeleri Shopify Plus planında sunulur.
Tema güncellemesinde özel kodlarım kaybolur mu?
Yeni tema sürümüne geçtiğinizde özel kodun yeni sürüme yeniden taşınması gerekir. Özel kodu ayrı bölüm, blok ve snippet dosyalarında tutmak, değişiklik listesi saklamak ve güncellemeyi önce kopya temada denemek bu süreci kolaylaştırır.