İçeriğe geç

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

Sektörünüze uygun tema nasıl seçilir?

Tema yalnızca renk değildir: üstbilgiden ürün kartına, ana sayfa bölümlerinden mobil menüye kadar bir mağazanın nasıl dolaşılacağını belirler. Bu rehber, sektörünüze göre hangi tür temanın uygun olduğunu ve seçimi nasıl deneyeceğinizi anlatır.

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

Bu yazıda

Tema seçimi çoğu zaman "hangi renk hoşuma gidiyor?" sorusuyla başlar. Oysa tema, mağazanızın nasıl dolaşılacağını belirler: üstbilginin nerede durduğunu, aramanın ne kadar öne çıktığını, ürün kartının neler gösterdiğini, ana sayfanın hangi bölümlerle açıldığını ve telefonda menünün nasıl çalıştığını. Renk ve yazı tipini ise sonradan değiştirebilirsiniz.

Sepetya içindeki her tema yapısal olarak farklıdır: kendi üstbilgisi, kendi açılış düzeni, kendi ürün kartı ve kendi imza bölümleri vardır; yalnızca renkleri değişmiş bir kopya değildir. Bu yazıda sektörünüze göre hangi tür temanın size uyacağını, seçimi nasıl deneyeceğinizi ve sonradan fikrinizi değiştirirseniz neyin yerinde kalacağını anlatıyoruz. Temaların güncel listesi ve fiyatları tema sayfasında yer alıyor; burada adlardan değil düzenlerden söz ediyoruz.

Önce katalogunuza ve müşterinize bakın

Sektör başlığından önce üç soruya cevap verin:

  • Müşteri ne arıyor? Belirli bir ürünü arayan müşteri aramayı ve kategori menüsünü ister; ilham arayan müşteri büyük görseller ve koleksiyonlar ister.
  • Katalog kaç çeşit ürün içeriyor? Birkaç yüz çeşitli ürünü olan mağaza hızlı gezinme araçlarına, yirmi ürünlü bir marka mağazası ise güçlü bir hikâyeye ihtiyaç duyar.
  • Elinizde nasıl fotoğraflar var? Büyük, sinematik görseller isteyen bir tema kötü fotoğrafları acımasızca gösterir; kompakt kartlı bir tema ise yetersiz fotoğrafı daha iyi taşır.

Sektöre göre tema türleri

Aşağıdaki tablo, Sepetya temalarının sektörlere göre kurgulanmış düzenlerini özetliyor. Tema adları değişebildiği için burada adları değil, düzenleri yazdık.

SektörUygun düzenBu düzende neler var?
Giyim, ayakkabı, aksesuarModa dergisi düzeniGörselin üzerinde duran şeffaf başlık, tam ekran kampanya slaytı, iri başlıklar, "görünümü satın al" noktaları ve çerçevesiz dikey ürün kartları.
Geniş kataloglu, çok kategorili mağazaBüyük mağaza düzeniKategori seçmeli geniş arama, "Tüm kategoriler" menüsü, kategori listeli kampanya açılışı, günün fırsatı ve her zaman görünen "Sepete ekle" düğmeli kartlar.
Elektronik, bilgisayar, teknolojiTeknik vitrin düzeniKoyu başlıkta geniş arama ve dikey sekmeli kategori menüsü, ürünü koyu bir sahnede öne çıkaran slayt, stok durumu ve tek dokunuşla sepete ekleme düğmeli kartlar.
Kozmetik, kişisel bakımSakin, yuvarlak hatlı düzenCilt tipine göre kısayollar, ürün bağlantılı bakım rutini, içerik sözlüğü ve onaylı yorumlar.
Ev, mobilya, dekorasyonGaleri düzeniOda fotoğrafı üzerinde "görünümü satın al" noktaları, oda görselli mega menü, odalara göre mozaik, malzeme ve işçilik anlatımı, "siparişten evinize" adımları.
Gıda, market, şarküteri, organik ürünHızlı market düzeniTeslimat bilgi şeridi, ara toplamı gösteren sepet düğmesi, yapışkan reyon çipleri, birim fiyatlı ve adet seçicili ürün kartları, mobilde alt menü ve kayan sepet özeti.
Takı, saat, lüks aksesuarKoyu "maison" düzeniGörselin üzerinde şeffaf başlık, "Menü" ile açılan yan panel, tam ekran açılış, numaralı koleksiyonlar, işçilik anlatımı, bütçeye ve kişiye göre hediye bulucu ve randevu bandı.
Çocuk, oyuncak, hobiNeşeli ama düzenli düzenYaşa göre alışveriş baloncukları, hediye bulucu, ebeveyn rehberi ve mobilde alt menü.

Hiçbir düzen sektörünüze zorunlu değildir; moda temasında oyuncak satmak mümkündür. Ama sektör için kurgulanmış düzen, o sektörün müşterisinin beklediği araçları (cilt tipi kısayolu, yaşa göre alışveriş, birim fiyat, oda görselleri) zaten içerir; sıfırdan bölüm eklemekten kurtarır.

Her sektörün kendi işleyişini ayrı birer rehberde anlattık: giyim, gıda, kozmetik, takı ve saat, elektronik, ev ve mobilya ile oyuncak ve çocuk ürünleri. Katalogunuz büyükse kategori yapısı ve filtreler rehberi de düzen seçimini etkiler. Tema editörünün tüm yeteneklerini mağaza tasarımı sayfasında görebilirsiniz.

Karışık katalogda ne yapmalı?

Birden çok sektörde satış yapıyorsanız (örneğin ev gereçleri, küçük elektronik ve spor ürünleri) en güvenli başlangıç, kategori seçmeli arama ve "Tüm kategoriler" menüsü sunan büyük mağaza düzenidir; müşteri neye baktığını kategoriyle daraltır. Tek bir ürün grubuna odaklanan, marka hikâyesi güçlü bir mağazaysanız sektörünüze özel düzen daha iyi çalışır.

Süslü bölümler için içeriğiniz var mı?

Her tema, kendi imza bölümleriyle gelir ve bunların bir kısmı sizden içerik bekler: ebeveyn rehberi için metin, içerik sözlüğü için madde açıklamaları, randevu bandı için gerçek bir randevu bilgisi, "siparişten evinize" adımları için teslimat bilgisi. Tema editöründe bu bölümleri kapatabilir ya da silebilirsiniz. Kural basit: dolduramayacağınız bir bölümü ana sayfada boş ya da yarım bırakmayın. Ana sayfanın üst kısmı için hangi bölümün uygun olduğunu ana sayfa slaytı yazımızda anlattık.

Demo mağaza, kitaplık ve önizleme: seçimi nasıl denersiniz?

  1. Demo mağazayı açın. Online Mağaza › Temalarım altındaki tema galerisinde her temanın dolu içerikli bir demo mağazası vardır. Demo mağazadaki ürünler ve görseller örnek içeriktir ve demo mağazada sipariş verilemez. Hangi bölümlerin neye benzediğini gezerek görün, telefonunuzdan da açın.
  2. Kitaplığınıza ekleyin. Beğendiğiniz temayı kitaplığa ekleyin. Kitaplıktaki temaları yayına almadan düzenleyebilir ve önizleyebilirsiniz. Ücretli temalar tek seferlik lisansla satın alınır.
  3. Kendi ürünlerinizle önizleyin. "Önizle" ile temayı kendi mağazanızın ürünleri ve sayfalarıyla görün; ziyaretçiler bu sırada yayındaki temayı görmeye devam eder.
  4. Stili ve ayarları seçin. Her temanın hazır renk stilleri vardır; tema editöründe renkleri, yazı tiplerini ve bölümleri değiştirirsiniz.
  5. Yayınlayın. Yayınla dediğinizde tema vitrinde hemen görünür. Şu anki tema kitaplıkta kalır; istediğiniz zaman geri dönebilirsiniz.

Tema değiştirince neler korunur? Ürünleriniz, kategorileriniz, sayfalarınız, menüleriniz ve blog yazılarınız temadan bağımsızdır; tema yalnızca onların nasıl göründüğünü belirler. Ana sayfa bölümleri ve renk ile yazı tipi ayarları ise temaya aittir: yeni tema kendi hazır ana sayfasıyla gelir, eski temanızın ayarları kitaplıkta durmaya devam eder.

Temayı yayınlamadan önce üç yere bakın

  1. Ana sayfa bölümleri. Tema kendi hazır ana sayfasıyla gelir. Bölümlerin sırasını sektörünüze göre düzenleyin, işinize yaramayanları kapatın.
  2. Ürün kartı. Tema ayarlarındaki "Ürün kartı" grubunda görsel oranını (kare, dikey, yatay), kart görünümünü (sade, çerçeveli, dolgulu, gölgeli), puan, marka, ikinci görsel, hızlı sepete ekle, eski fiyat, "Yeni" rozeti ve birim fiyat gösterimini tek tek açıp kapatırsınız. Giyimde dikey görsel oranı, markette birim fiyat anlamlıdır. Eski fiyat gösteriyorsanız dürüst aciliyet yazımızdaki önceki fiyat notlarına bakın.
  3. Menü ve alt bölüm. Ana menüyü ve alt bölüm menüsünü kategori yapınıza göre kurun; alt bölümde bülten formu ve ödeme ikonlarının görünüp görünmeyeceğine karar verin.

Düzeni seçtikten sonra temayı markanıza uyarlarsınız. Tema editöründe renkleri (zemin, yüzey, vurgu, birincil renk ve metin renkleri), Google yazı tiplerini, başlık kalınlığını ve harf biçimini değiştirebilirsiniz; her temanın hazır stilleri bunun için iyi bir başlangıç noktasıdır. Logo ve site ikonu (favicon) ise Ayarlar › Genel altından yüklenir ve tüm temalarda aynı kalır.

Renk seçerken güzelliğin yanında okunabilirliğe bakın. Erişilebilirlik yönergesi WCAG, normal boyuttaki metin ile zemin arasında en az 4,5:1 kontrast oranı ister; büyük metinde (18 punto ya da kalın 14 punto ve üstü) bu oran 3:1'dir. Açık gri metin üzerine beyaz zemin ya da fotoğraf üzerine yazılan açık renkli başlık bu sınırı kolayca kaçırır. Görselin üzerine yazı koyan bölümlerde karartma oranını artırmak çoğu zaman sorunu çözer.

Sık yapılan seçim hataları

  • Fotoğraflar yetersizken görsel ağırlıklı tema seçmek. Önce fotoğrafları iyileştirin ya da daha kompakt kartlı bir düzene yönelin.
  • Demo içeriği kendi içeriğiniz sanmak. Demo mağazadaki ürünler, görseller ve metinler örnektir; temanın nasıl göründüğünü gösterir, mağazanızın içeriğini değil. Kendi içeriğinizi kitaplıkta önizleyerek görün.
  • Hazır bölümleri olduğu gibi bırakmak. Sektörünüze uymayan ya da dolduramayacağınız bölümleri kapatın.
  • Telefonda denememek. Masaüstünde güzel görünen bir düzen telefonda beklenmedik biçimde uzayabilir.
  • Çok sık tema değiştirmek. Müşterileriniz mağazanızın düzenine alışır; değişiklikleri sebebini bilerek ve ölçerek yapın.

Telefondaki deneyimi mutlaka deneyin

Ziyaretçilerinizin önemli bir bölümü telefondan gelebilir. Bazı düzenler telefonda alt menü sunar (hızlı market ve çocuk düzenleri), hızlı market düzeni ayrıca kayan bir sepet özeti gösterir; diğerleri üstbilgiyi sade tutar. Demo mağazayı ve kendi önizlemenizi telefonunuzda açıp şunlara bakın: menüye ulaşmak kaç dokunuş sürüyor, ürün kartında fiyat ve stok görünüyor mu, sepete ekle düğmesi rahat basılıyor mu? Ürün sayfasının telefonda nasıl çalışması gerektiğini mobilde ürün sayfası rehberimizde ayrıntılı anlattık.

Tema seçim kontrol listesi

  • Katalog büyüklüğüm ve müşterimin arama biçimi (arama mı, gezinme mi, ilham mı) belirlendi.
  • Sektörüme göre kurgulanmış düzenlerin demo mağazaları telefonda ve bilgisayarda gezildi.
  • Fotoğraflarımın kalitesi, seçtiğim düzenin görsel beklentisini karşılıyor.
  • Temanın imza bölümlerinden dolduramayacaklarımı kapattım ya da sildim.
  • Tema kitaplığa eklendi ve kendi ürünlerimle önizlendi.
  • Renkler, yazı tipi ve logo markamla uyumlu; metinler Türkçe ve gerekiyorsa ikinci dilde hazır.
  • Yayınlamadan önce ödeme sayfasını ve ürün sayfasını gerçek bir telefonda denedim.

Ne zaman değiştirmeli?

Bir temayı yayınladıktan sonra hemen yenisine geçmek için acele etmeyin; önce mevcut temanın ayarlarıyla oynayın. Tema değiştirmenin zamanı, müşterilerin sık sık aynı noktada takıldığını gördüğünüzde gelir: menüyü bulamıyorlarsa, aramayı kullanamıyorlarsa ya da ürün kartında ihtiyaç duydukları bilgi yoksa. Tema ayarlarını dışa aktarıp (JSON) yedekleyebilir, yeni sürümler çıktığında ayarlarınızı ve bölümlerinizi koruyarak güncelleyebilirsiniz. Başlangıç adımlarının tamamı için e-ticaret sitesi nasıl kurulur rehberimize de bakın.

Temaları kendi mağazanızda denemek için ücretsiz başlayın; seçimi vermeden önce birkaç temayı kitaplığınıza ekleyip önizleyebilirsiniz.

  • tema
  • tasarim
  • sektor
  • vitrin

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.