Shopify Tema Düzenleme: Kod Bilmeden ve Kodla Yapılabilecekler

Shopify temanızı değiştirmenin iki yolu vardır: tema düzenleyici (kod bilmeden, sürükle-bırak) ve kod düzenleyici (Liquid, HTML, CSS, JavaScript). Mağaza sahiplerinin günlük ihtiyaçlarının büyük kısmı tema düzenleyiciyle karşılanır; temada olmayan bir özellik veya tasarım gerektiğinde ise kod devreye girer. Bu rehberde hangi değişikliğin hangi yolla yapıldığını ve temayı bozmadan nasıl çalışılacağını anlatıyoruz.

Tema düzenleyici ile kod bilmeden yapılabilecekler

Online Mağaza → Temalar → Özelleştir yolundan açılan tema düzenleyici, Online Store 2.0 temalarında oldukça geniş imkân sunar:

• Genel görünüm: Logo, renkler (renk şemaları), yazı tipleri, buton stilleri, sayfa genişliği.
• Bölümler: Ana sayfaya ve diğer sayfalara banner, ürün listesi, görsel-metin, SSS, video, yorum gibi bölümler eklemek, sıralamak, kaldırmak.
• Header ve footer: Menü, duyuru bandı, logo konumu, footer sütunları ve sosyal medya bağlantıları.
• Ürün sayfası: Blokların sırası (başlık, fiyat, varyant seçici, açıklama, paylaşım), sekmeler, ürüne özel bilgi blokları.
• Şablonlar: Farklı ürün veya koleksiyon grupları için alternatif şablonlar oluşturmak.
• Dinamik içerik: Bölüm ayarlarını metafield verisine bağlamak; böylece her ürün kendi bilgisini gösterir.
• Uygulama blokları: Uygulamaların bloklarını ve app embed'lerini açıp kapatmak.

Kod gerektiren değişiklikler

• Temada olmayan yeni bir bölüm veya tasarım (örneğin özel bir karşılaştırma tablosu)
• Ürün kartının yapısını değiştirmek (rozet, ikinci görsel, renk örnekleri)
• Koşullu içerik: belirli etiketteki ürünlerde uyarı, belirli koleksiyonda farklı düzen
• Sepet ve ödeme öncesi davranışlar: zorunlu onay kutusu, ücretsiz kargo çubuğu
• Hız iyileştirmeleri: görsel yükleme, gereksiz scriptleri kaldırma
• Yapılandırılmış veri ve SEO etiketleri
• Uygulama kalıntılarının temizlenmesi

Bu değişiklikler Liquid ve temanın dosya yapısı bilgisi gerektirir. Liquid'in temel mantığı için Liquid nedir yazımıza bakabilirsiniz.

Güvenli düzenleme yöntemi

1. Kopya oluşturun: Online Mağaza → Temalar bölümünde yayındaki temanın "Çoğalt" seçeneğiyle kopyasını alın.
2. Kopyada çalışın: Değişiklikleri kopya temada yapın ve önizleme bağlantısıyla test edin.
3. Test edin: Mobil ve masaüstünde ana sayfa, ürün, koleksiyon, sepet ve arama sayfalarını gezin; bir test siparişi verin.
4. Yayınlayın: Kopya temayı yayınlayın. Sorun çıkarsa eski temaya tek tıkla dönebilirsiniz.

Kod düzenleyicide her dosyanın önceki sürümleri tutulur; yanlış bir değişikliği geri almak mümkündür. Yine de canlı temada doğrudan kod düzenlemek, ziyaretçilerin hatalı sayfa görmesi riskini taşır.

Çekirdek dosyaları değiştirmenin bedeli

Theme Store'dan alınan temalar düzenli güncellenir. Temanın ana dosyalarına (örneğin ürün sayfası veya sepet dosyaları) doğrudan kod eklenirse güncelleme bu değişiklikleri taşımaz ve her güncellemede elle yeniden uygulanması gerekir. Bu yüzden özelleştirmeleri mümkün olduğunca ayrı özel bölümler ve snippet dosyaları olarak yapmak, uzun vadede bakım maliyetini düşürür. Ayrıntılar: tema güncelleme rehberi.

Sık yapılan düzenlemeler ve yöntemleri

Ne zaman geliştirici gerekir?

• İstediğiniz değişiklik tema ayarlarında yoksa
• Bir uygulama kurduktan sonra tema bozulduysa
• Tema güncellemesi özelleştirmeleri sildiyse
• Mağaza yavaşladıysa ve sebebi bulunamıyorsa
• Markaya özel bir tasarım uygulanacaksa

Sık sorulanlar

Temanızda yapmak istediğiniz değişiklikler için özel tema geliştirme ve Liquid geliştirme hizmetlerimizi inceleyebilirsiniz.