İçeriğe geç

Mağaza tasarımı ve dönüşüm

Tema editöründe çalışma düzeni: taslak, önizleme, yayın

Vitrin tasarımını değiştirirken en çok korkulan şey, ziyaretçinin yarım kalmış bir sayfayı görmesidir. Tema editörü taslak üzerinde çalışır: siz yayınlayana kadar vitrin olduğu gibi kalır.

Sepetya Editör EkibiYayın tarihi: 6 dk okumaGüncellendi:

Bu yazıda

Vitrin tasarımına dokunurken en büyük korku, ziyaretçinin yarım kalmış bir sayfa görmesidir. Sepetya tema editörü bu yüzden taslak üzerinde çalışır: yaptığınız her değişiklik taslağa kaydedilir, vitrin siz "Yayınla" diyene kadar olduğu gibi kalır. Bu yazıda editörün çalışma düzenini, bölüm ve blok mantığını, iki kişinin aynı anda çalışmasında ne olduğunu ve her an nasıl geri dönebileceğinizi anlatıyoruz.

Tema seçimi ayrı bir konudur; sektörünüze uygun düzeni nasıl seçeceğinizi tema seçimi yazısında anlattık.

Editörün üç bölmesi

Editör üç bölmeden oluşur ve küçük ekranda bu bölmeler sekmeye dönüşür:

  • Sayfa yapısı (sol): seçili sayfa şablonunun bölümleri ve bölümlerin altındaki bloklar. Bir öğeye tıkladığınızda ayarları sağda açılır.
  • Önizleme (orta): taslağın canlı görüntüsü. Masaüstü, tablet ve mobil arasında geçiş yapabilir, "Yeni sekmede önizle" ile tam ekran da bakabilirsiniz.
  • Ayarlar (sağ): seçili bölümün ya da bloğun ayarları. Hiçbir şey seçili değilken tema ayarlarını (renk, yazı tipi, genel görünüm) açabilirsiniz.

Üstte iki seçici bulunur: sayfa şablonu (ana sayfa, kategori, ürün, sepet, blog, blog yazısı, arama, hesap sayfaları gibi) ve içerik dili. Şablon başına ayrı düzen kurarsınız; yani ana sayfada yaptığınız değişiklik ürün sayfasını etkilemez. Çok dilli mağazada metin alanlarını dil başına yazarsınız, yerleşim ise diller arasında ortaktır.

Önizlemede örnek kayıt yoksa editör bunu söyler: "Mağazanızda henüz yayında ürün yok" gibi bir not görürseniz, o şablonu düzenlemek için önce bir ürün, kategori ya da blog yazısı eklemeniz gerekir. Vitrin adresi hazır değilse önizleme de gösterilemez.

Bölümler ve bloklar

Sayfalar bölümlerden kurulur; bazı bölümlerin içinde sıralanabilen bloklar olur (bir "öne çıkanlar" bölümünün içindeki kartlar gibi). "Bölüm ekle" dediğinizde o şablona eklenebilecek bölümlerin galerisi açılır; galeride arama yapabilir, her bölümün kaç ayarı ve hangi blokları olduğunu görebilirsiniz. Seçtiğiniz bölüm varsayılan ayarlarıyla eklenir.

  • Sıralama: bölümleri yukarı ve aşağı taşıyarak sayfanın akışını kurarsınız.
  • Çoğaltma: bir bölümü çoğaltıp içeriğini değiştirmek, sıfırdan kurmaktan hızlıdır.
  • Gizleme: bir bölümü silmek yerine gizleyebilirsiniz; ayarları durur, istediğinizde geri açarsınız. Kampanya bölümleri için ideal.
  • Sabit bölümler: sayfanın ana içeriği olan bölümler (ürün sayfasındaki ürün alanı, blog listesi gibi) kaldırılamaz ve gizlenemez; yalnız ayarları değişir.
  • Sınırlar: bir şablona eklenebilecek bölüm sayısı ve bir bölüme eklenebilecek blok sayısı sınırlıdır; sınır dolduğunda editör bunu söyler. Sayfayı bölümle doldurmak yerine az ve işini yapan bölümle kurmak hem müşteri hem hız için iyidir.

Ayar alanları doğrulanır: renk #RRGGBB biçiminde olmalı, bağlantılar geçerli olmalı, liste alanları belirli bir öğe sayısını geçmemeli, tarih alanları mağazanın saat diliminde girilir. Geçersiz bir değer girdiğinizde editör "Bazı ayarlar geçersiz" der ve hangi alanın sorunlu olduğunu gösterir.

Metinler: bölüm ayarı mı, vitrin metni mi?

Vitrindeki yazılar iki yerden gelir ve bunu bilmek çok vakit kazandırır. Bir bölüme ait başlık, açıklama ve düğme etiketi o bölümün ayarındadır; editörde seçtiğiniz içerik diline yazılır, başka dile geçtiğinizde o dilin metnini ayrıca yazarsınız. Buna karşılık "Sepete ekle", "Stokta yok", "Siparişi tamamla" gibi vitrinin kendi arayüz metinleri bölüm ayarı değildir; Online Mağaza › Lokalizasyon › Vitrin metinleri sayfasından dil başına değiştirilir. Yani bir düğmenin yazısını editörde bulamıyorsanız, o bir arayüz metnidir. Aynı şekilde ürün adı, kategori adı ve sayfa içerikleri de temaya değil katalog ve içerik kayıtlarına aittir; editör onları yalnız gösterir.

Renk, yazı tipi ve hazır stiller

Tema ayarlarında temanın hazır stillerinden birini seçebilir, sonra renkleri (zemin, yüzey, vurgu, birincil renk, metin renkleri), Google yazı tiplerini, başlık kalınlığını ve harf biçimini değiştirebilirsiniz. Her ayarın yanındaki "varsayılana dön" seçeneği yalnız o alanı eski hâline getirir. Logo ve site ikonu temaya değil mağazaya aittir; Ayarlar › Genel altından yüklenir ve bütün temalarda aynı kalır.

Editörde olmayanlar: menü, sayfa, duyuru çubuğu

Editör temanın görünümünü kurar; vitrinin içeriği ise kendi sayfalarında yönetilir. İlk günlerde en çok vakit kaybettiren şey, bir ayarı yanlış yerde aramaktır:

Ne değiştirmek istiyorsunuz?Nerede?
Bölümler, renkler, yazı tipleriOnline Mağaza › Temalarım › Tema editörü
Üst menü ve alt bilgi bağlantılarıOnline Mağaza › Menüler
Hakkımızda, iletişim gibi sayfalarOnline Mağaza › Sayfalar
Blog yazıları ve kategorileriOnline Mağaza › Blog
Duyuru çubuğu, sosyal medya bilgileri, çerez izni, özel kodlarOnline Mağaza › Vitrin ayarları
Logo, site ikonu (favicon), vitrin şifresiAyarlar › Genel
Dil, para birimi ve vitrin metinleriOnline Mağaza › Lokalizasyon

Bu ayrımın pratik faydası şu: menüye yeni bir bağlantı eklemek için temayı yayınlamanız gerekmez, menü değişiklikleri doğrudan vitrine yansır. Tema editöründeki değişiklikler ise yayınlanana kadar bekler.

Taslak, kaydetme ve yayınlama

Editörde kaydet düğmesi aramanıza gerek yok: değişiklikler taslağa kaydedilir ve üstteki durum göstergesi size nerede olduğunuzu söyler.

GöstergeAnlamı
Kaydedilmemiş değişiklikSon düzenleme henüz taslağa yazılmadı
Kaydediliyor…Taslak kaydediliyor
Taslak kaydedildiTaslak güncel; vitrin hâlâ eski görünümde
Yayındaki sürümle aynıTaslak ile yayındaki görünüm arasında fark yok
KaydedilemediBağlantı ya da doğrulama sorunu; son değişikliği kontrol edin

"Geri al" ve "İleri al" ile adımlar arasında gezinebilirsiniz. Hazır olduğunuzda "Yayınla" dediğinizde editör onay ister ve taslaktaki tüm değişiklikler ziyaretçilere aynı anda görünür. Kitaplıktaki bir temada yayınlanmamış değişiklikler varsa tema listesinde "Yayınlanmamış değişiklikler" olarak işaretlenir, böylece yarım kalan iş gözden kaçmaz.

İki kişi aynı anda çalışırsa

Siz düzenlerken aynı tema başka bir oturumda ya da başka bir personel tarafından kaydedilirse editör "Tema başka bir yerde değiştirildi" uyarısı verir. İki seçeneğiniz olur: sunucudaki son hâli yüklemek (buradaki kaydedilmemiş değişiklikler kaybolur) ya da kendi değişikliklerinizi onun üzerine yazmak. Birden fazla kişiyle çalışıyorsanız basit bir kural işinizi görür: aynı anda aynı şablonu iki kişi düzenlemesin; biri ana sayfada çalışırken diğeri ürün sayfasında çalışsın.

Kimin düzenleyebileceğini personel yetkileri belirler: "Temaları görüntüleme" yetkisi olan bakabilir, "Tema düzenleme ve yayınlama" yetkisi olan değiştirip yayınlayabilir. Ajansınız ya da tasarımcınız varsa ona sahiplik yerine yalnız bu yetkiyi veren bir personel hesabı açmak en temiz yoldur; yaptığı değişiklikler denetim kaydında adıyla görünür.

Denemek, geri dönmek, taşımak

Editör cesaretle denemeniz için kurulmuştur; her adımda geri dönüş yolu var:

  • Kitaplıkta çoğaltın: aynı temayı çoğaltıp "Kitaplıktaki adı" alanına "Ana sayfa denemesi" gibi bir ad verin. Yayına almadan düzenleyip önizlersiniz; beğenirseniz yayınlarsınız. Bu ad yalnız panelde görünür.
  • Varsayılana dönün: yalnız o şablonu, yalnız tema ayarlarını ya da tümünü varsayılana döndürebilirsiniz. Taslaktaki değişiklikler silinir; yayındaki görünüm, siz yeniden yayınlayana kadar değişmez.
  • Tema dosyası: temanın ayarlarını ve şablonlarını JSON olarak dışa aktarabilirsiniz. Dosyayı sonra ya yeni bir tema olarak kitaplığa ekler ya da mevcut bir temanın taslağına aktarırsınız; taslağa aktarmak vitrini etkilemez, yayınlayana kadar bekler. Dosya aynı temadan üretilmiş olmalıdır ve boyutu 1 MB'ı geçemez.

Bu üçlü, "deneyip beğenmezsem ne olacak?" sorusunu ortadan kaldırır: deneme kitaplıkta durur, yayın kararı sizde kalır.

Yayınlamadan önce son üç kontrol

  1. Telefon: önizlemeyi mobile alıp ana sayfayı, kategoriyi, ürün sayfasını ve sepeti gezin. Ayrıntılar için mobilde ürün sayfası yazısına bakın.
  2. Üst kısım: sayfanın ilk ekranında ne göründüğünü kontrol edin; slayt kullanıyorsanız ana sayfa slaytı yazısındaki kuralları gözden geçirin.
  3. Boş bölüm yok: doldurmadığınız bölümleri gizleyin. Yarım kalmış bir bölüm, hiç olmayan bir bölümden kötüdür.

Editör kontrol listesi

  • Düzenlemeye başlamadan önce doğru sayfa şablonu ve içerik dili seçildi.
  • Değişiklikler taslakta; durum göstergesi "Taslak kaydedildi" diyor.
  • Kullanılmayan bölümler silinmek yerine gizlendi.
  • Geçersiz ayar uyarısı kalmadı (renk, bağlantı, liste alanları).
  • Önizleme masaüstü, tablet ve mobilde gezildi.
  • Büyük denemeler için tema kitaplıkta çoğaltıldı ve adlandırıldı.
  • Yayınlamadan önce ana sayfa, kategori, ürün, sepet ve blog şablonları kontrol edildi.
  • Birden fazla kişi çalışıyorsa kimin hangi şablonda olduğu belli.
  • Yayın sonrası vitrin gizli pencerede açılıp ziyaretçi gözüyle görüldü.
  • Gerekirse tema dosyası dışa aktarılıp yedek olarak saklandı.

Editörü kendi ürünlerinizle denemek için ücretsiz başlayın; tema güncellemelerinin nasıl geldiğini güncellemeler yazısında anlattık.

  • tema-editoru
  • taslak
  • onizleme
  • yayinlama
  • vitrin-tasarimi

Tüm yazılar

  • Ana sayfa slaytı kullanmalı mısınız?

    Ana sayfadaki dönen görseller güzel görünür ama ziyaretçilerin çoğu slaytların çoğunu hiç görmez. Bu yazıda araştırmanın ne söylediğini, slayt yerine neyi kullanabileceğinizi ve slayt kullanacaksanız hangi kuralların önemli olduğunu anlatıyoruz.

    · Sepetya Editör Ekibi

  • Mobilde ürün sayfası: dönüşümü etkileyen 10 detay

    Ziyaretçileriniz telefondan geliyorsa ürün sayfasının telefonda rahat çalışması gerekir. Bu rehber, Baymard'ın ürün sayfası araştırmasındaki on bulguyu Sepetya içinde yapabileceğiniz ayarlarla eşleştiriyor.

    · Sepetya Editör Ekibi

  • Ödeme sayfası tasarımı: sepet terkini azaltan ayarlar

    Ödeme sayfası, sepete eklenen ürünün siparişe dönüşüp dönüşmeyeceğine karar verildiği yerdir. Bu rehber gereksiz alanları azaltmayı, misafir ödeme ile hızlı kaydı ve sözleşmelerin sipariş düğmesinin üstünde nasıl gösterildiğini anlatır.

    · Sepetya Editör Ekibi

Çerezleri nasıl kullandığımızı seçin

Sitenin çalışması için gerekli çerezleri kullanırız. Analitik çerezler yalnızca izin verirseniz etkinleşir; tercihinizi istediğiniz zaman sayfanın altındaki bağlantıdan değiştirebilirsiniz.