Shopify tema tasarımı ve düzenleme
Hazır temanızı markanızın diline göre düzenliyor, ürünlerinizi anlatan bölümleri tema editöründen yönetilecek biçimde kuruyoruz.
Editörden yönetilen tasarımİlk görüşme ücretsiz
Shopify tema tasarımı nedir?
Shopify tema tasarımı, mağazanızın kullandığı hazır temayı kod yapısını baştan yazmadan markanıza göre düzenlemektir: renk ve yazı tipi, ana sayfa bölümleri, ürün kartı, koleksiyon ve ürün sayfası düzeni, mobil görünüm. Değişikliklerin çoğu tema editöründen yapılır; editörün yetmediği yerde Liquid ve CSS ile küçük eklemeler yazılır. Hazır tema uyarlaması genellikle 1-2 hafta sürer. Şablonların ve bölümlerin baştan yazılması gerekiyorsa iş Shopify özel tema geliştirme kapsamına geçer.
Hazır temayla çalışırken neleri markaya göre değiştirdiğimize yakından bakın.
- Rasquad · Ürün grupları
Rasquad'da Flawless teması üzerinde çalıştık. Ana sayfadaki The Product Edit alanında Top / Bra, Şort, Tayt, Ceket ve Şort Etek gruplarını ayrı giriş noktaları olarak kurduk; aradığı ürünü bilen müşteri koleksiyon hikâyelerini geçmeden ilgili gruba bakıyor.
- Rasquad · Koleksiyon
- Rasquad · Ürün sayfası
Tema tasarımında neleri değiştiriyoruz?
Tasarım, temanın sunduğu ayarlarla başlar. Her kararı ürünlerinizin nasıl satın alındığına göre veririz; editörde yapılamayan küçük farkları kodla tamamlarız.
Koleksiyon ve ürün kartı
Fiyat, indirim, renk seçeneği ve rozet gibi bilgilerin kartta hangi sırayla görüneceğine ürün grubuna göre karar veririz; müşteri karşılaştırmayı kartta yapar.
Başlık, menü ve altbilgi
Menü yapısını, duyuru alanını ve altbilgi bağlantılarını koleksiyonlarınıza göre kurarız; müşteri aradığı gruba iki dokunuşta ulaşır.
Ürün sayfası
Varyant, beden rehberi, teslimat ve iade bilgisini müşterinin sepete eklemeden önce aradığı yere taşırız.
Ana sayfa
Bölümlerin sırasını, koleksiyon girişlerini ve kampanya alanlarını mağazanın hangi mesajla açılacağına göre düzenleriz.
Renk ve yazı tipi
Renk şemalarını, yazı tiplerini ve düğme biçimlerini temanın kendi ayarlarında tanımlarız; yeni bir kampanya sayfası da aynı sistemle kurulur.
Mobil
Masaüstündeki bölümleri alt alta dizmek yerine telefonda hangi bilginin önce geleceğini yeniden sıralarız.
Tema editörü, kod düzenleme ve özel tema: hangisi ne zaman?
Değişikliğin nerede yapıldığı, tema güncellendiğinde ne olacağını da belirler. Bu yüzden önce editörü, gerektiğinde kodu kullanırız.
Tema editörüKod düzenlemeÖzel tema | |||
|---|---|---|---|
| Ne değişir? | Renk, yazı tipi, bölüm sırası, görseller ve temanın sunduğu diğer ayarlar | Editörde olmayan küçük düzen ve davranışlar (Liquid, CSS, JavaScript) | Şablonlar, bölümler ve bloklar baştan yazılır (Shopify özel tema) |
| Tema güncellenince | Editörde yapılan ayarlar yeni sürüme kopyalanır | Güncellemeyle çakışmayan kod değişiklikleri yeni sürüme dahil edilir, çakışanlar elle kopyalanır | Shopify güncelleme göndermez; güncellemeleri temanın geliştiricisi planlar |
| Shopify desteği | Shopify'ın ücretsiz temalarında belirli kişiselleştirmelere yardım eder | Özel kod yazmaz; önemli kod değişikliği olan temada yardımcı olmaz | Kapsam dışındadır |
| Ne zaman yeterli? | Tema, ürününüzü anlatacak bölümleri zaten sunuyorsa | Birkaç sayfada editörün karşılamadığı küçük farklar varsa | Şablonlar ve bölümler ürün yapınıza uymuyorsa |
Shopify temanızı kendiniz düzenleyebilir misiniz?
Tema editöründen
Evet. Renk, yazı tipi, bölüm sırası, görseller ve metinler Shopify yöneticisindeki tema editöründen kod yazmadan değiştirilir. Başlamadan önce temayı çoğaltıp yedek kopya almak, beğenmediğiniz bir denemeden geri dönmeyi kolaylaştırır. Editörde yaptığınız ayarlar, tema yeni sürüme güncellendiğinde de korunur.
Kodla ya da Shopify desteğiyle
Editörde olmayan bir değişiklik için tema kodunu düzenlemek gerekir; temayı kodla düzenlemenin adımları için Shopify CLI rehberimize bakabilirsiniz. Shopify'ın ücretsiz temalarından birini kullanıyorsanız Shopify Destek, Basic ve üzeri planlarda belirli kişiselleştirmeler için 60 dakikaya kadar ücretsiz tasarım desteği verir, ancak özel kod yazmaz. Ücretli temaların geliştiricileri kişiselleştirme hizmeti sunmaz; bu noktada bir Shopify iş ortağıyla çalışılır.
Bir iş ortağıyla
Biz tasarımda önce temanın kendi ayarlarını kullanır, kodu yalnız editörün yetmediği yerde değiştiririz; böylece tema güncellendiğinde elle taşınacak değişiklik az kalır. Rasquad'da Flawless temasının yapısını koruyup ana sayfayı, koleksiyon kartlarını ve ürün sayfasını markaya göre düzenledik. Waterfall'da editörün karşılamadığı yerde markaya özel yedi bölüm yazdık; bölümler tema editöründen eklenip sıralanıyor.
Tema tasarımı nasıl ilerler?
Tasarım, yayındaki temanın bir kopyasında ilerler. Hazır tema uyarlaması genellikle 1-2 hafta sürer; süreyi düzenlenecek sayfa sayısı ve içeriklerin hazır olması belirler. Başka bir altyapıdan geliyorsanız tasarım Shopify'a geçiş planının parçası olur.
Temayı ve lisansını inceleriz.
Kullandığınız temanın sürümünü, lisansını, editörde sunduğu bölümleri ve koda daha önce yapılmış değişiklikleri çıkarırız.
Öncelikleri belirleriz.
Ana sayfa, koleksiyon, ürün sayfası ve sepette müşterinin önce neyi görmesi gerektiğini ürün yapınıza göre sıralarız. Mevcut mağazayı önce ölçmek gerekiyorsa bulguları ekran görüntüleriyle raporlarız.
Taslak temada tasarlarız.
Değişiklikleri yayındaki temanın bir kopyasında yaparız; mağazanız bu sürede satışa devam eder. Belirli aşamalarda önizleme bağlantısı paylaşır, geri bildirimi mesajla ya da görüşmeyle alırız.
Önce editörü, sonra kodu kullanırız.
Renk, yazı tipi, bölüm ve blok ayarlarını tema editöründen yaparız; editörün yetmediği yerde Liquid ve CSS ile küçük eklemeler yazarız.
Kontrol edip yayınlarız.
Ürün kartı, varyant seçimi, menü ve sepeti telefonda ve masaüstünde deneriz. Tema mağazanızın kendi Shopify hesabında kalır ve orada çalışır; geliştirme sırasında kullandığımız ortak araçlar ve kendi geliştirme kitimizi içeren kaynak kod ayrıca teslim edilmez. Yayından sonra hangi alanı editörden yöneteceğinizi birlikte gözden geçiririz.
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.
Hazır tema seçerken ve lisanslarken bilinmesi gerekenler
Theme Store teması mağazaya özeldir.
Shopify Theme Store'dan satın alınan tema yalnız satın alındığı mağaza için lisanslanır. Lisanssız bir temayı özelleştiremez ve yayınlayamazsınız.
Theme Store dışından alınan temaya Shopify güncelleme göndermez.
Bu temaların yeni sürümleri Shopify yöneticisinden gelmez, güncelleme için temanın tasarımcısına başvurulur. Koda yapılan değişikliklerin kayıt altında tutulması bu yüzden önem kazanır.
Ücretli temayı satın almadan deneyebilirsiniz.
Ücretli bir temayı kendi ürünleriniz ve renklerinizle mağazanızda önizleyebilir, editörde denemeler yapabilirsiniz. Yayınlamak için satın almak gerekir ve ücretli temalar geri ödenmez.
Tasarıma başlamadan önce hazırlayın
Bu bilgiler hazırsa tasarım daha kısa sürer. Shopify'ın Türkiye'de ödeme, fatura ve kargo tarafında nasıl çalıştığını Shopify nedir rehberimizde anlattık.
Logo, renk ve yazı tipi dosyalarınız
Ürün fotoğraflarınızın oranı (dikey, kare ya da yatay)
Öne çıkacak koleksiyonlar ve kampanya alanları
Kullandığınız uygulamalar ve temaya nasıl eklendikleri
Temanın lisansı ve koda daha önce yapılmış değişiklikler
Tasarım için personel ya da ortak çalışan erişimi (nasıl verildiğini Shopify ajansı sayfasında anlattık)
Shopify tema tasarımı hakkında sık sorulanlar
Kaynaklar
- Tema editörü ve kod düzenleme için Shopify'ın temaları kişiselleştirme rehberi; güncelleme ve lisans için temaları güncelleme ve tema lisansı sayfaları; destek sınırları için tema desteği sayfası temel kaynaklardır.
- Ücretli temayı satın almadan deneme adımları Shopify'ın Shopify'a geçiş kılavuzunun tema bölümünde anlatılır. Tema yapısının teknik tarafı tema mimarisi dokümanında yer alır.
Hazır temanızı markanıza göre birlikte düzenleyelim.
Kullandığınız temayı, ürün yapınızı ve değiştirmek istediğiniz alanları paylaşın. Editörde çözülebilecek olanı, kod gerektireni ve özel tema gerektireni ayırıp kapsamı birlikte netleştirelim.