ikas tema tasarımı ve özel tema geliştirme

ikas, Türkiye’de pek çok markanın online mağazasını üzerinde kurduğu bir e-ticaret altyapısı. Ürün, stok, sipariş, ödeme ve kargo tarafını altyapı üstleniyor; ziyaretçinin gördüğü ve satın alma kararını verdiği kısım ise tema. Biz ikas mağazaları için tema tasarlıyor, geliştiriyor ve mevcut temaları iyileştiriyoruz.

Bu bizim için dışarıdan bakılan bir konu değil: kendi kadın ayakkabı markamız Limeo’nun online mağazası limeo.shop ikas üzerinde çalışıyor. Bunun yanında ikas’ın kod bileşenleriyle moda ve ayakkabı mağazaları için bir tema geliştiriyoruz. Aşağıda yazanlar bu iki işten çıkardığımız notlar.

ikas teması nedir, ne yapar?

Tema, mağazanızın görünen yüzüdür: ana sayfa, kategori ve ürün listeleri, ürün detay sayfası, sepet, arama ve bilgi sayfaları. ikas’ta temalar bölümlerden (section) oluşur. Her bölümün editörde değiştirilebilir ayarları vardır: başlık, görsel, renk, kaç sütun gösterileceği, hangi kategorinin listeleneceği gibi. Mağaza sahibi bu bölümleri tema editöründe sürükleyip sıralar, açar, kapatır ve içini doldurur.

Önemli ayrım şu: ürünleriniz, siparişleriniz ve müşterileriniz temanın içinde değil, ikas panelinde durur. Tema bu veriyi okur ve gösterir. Bu yüzden tema değiştirmek mağazayı baştan kurmak demek değildir; doğru yapıldığında ziyaretçi açısından yalnızca vitrin değişir.

Hazır tema mı, özel tema mı?

Hazır temalar yeni açılan mağazaların çoğu için iyi bir başlangıçtır ve editörden ciddi ölçüde özelleştirilebilir. Özel temaya ihtiyaç genellikle şu durumlarda doğar:

• Ürününüz hazır temanın varsaymadığı bir bilgi istiyor: beden tablosu, malzeme bilgisi, kombin önerisi, teslimat süresi rozeti gibi.
• Mağazanız aynı temayı kullanan diğer mağazalardan ayırt edilemiyor; marka kimliğiniz vitrinde kayboluyor.
• Ürün kartı ya da ürün sayfası, müşterinizin başka kanallarda alıştığı düzenden farklı ve bu ziyaretçiyi yavaşlatıyor.
• Editörde yapılabilecek her ayar denendiği halde mobilde sayfalar yavaş ya da kalabalık kalıyor.
• Kampanya, koleksiyon veya içerik sayfaları için her seferinde geçici çözümler üretiliyor.

Bunların hiçbiri yoksa özel tema yerine mevcut temanın ayarlarını ve içeriğini düzenlemek daha doğru olabilir. Bunu ilk görüşmede açıkça söylüyoruz.

İyi bir ikas temasında nelere bakılır?

Önce mobil

E-ticaret ziyaretçilerinin büyük kısmı mağazaya telefondan gelir. Tasarım masaüstünde çizilip mobile sıkıştırılınca ürün görselleri küçülür, düğmeler parmağa göre değil fareye göre kalır, filtreler kullanılamaz hale gelir. Biz tasarıma telefon ekranından başlıyoruz.

Ürün kartı

Listeleme sayfasında ziyaretçinin karar verdiği yer ürün kartıdır. Görsel oranı ürüne uygun olmalı (ayakkabı ve giyimde dikey oranlar ürünü daha iyi gösterir), fiyat ve indirim tek bakışta okunmalı, renk seçenekleri kartta görünmeli, kargo bedava veya hızlı teslimat gibi bilgiler kartın üzerinde yer almalı. Türkiye’de alışverişçilerin çoğu pazaryerlerindeki kart düzenine alışkın; bu alışkanlığa yakın durmak ziyaretçinin işini kolaylaştırır.

Ürün detay sayfası

Varyant seçimi (numara, beden, renk) hatasız ve anlaşılır olmalı; stokta olmayan seçenek seçilebilir görünmemeli. Beden veya numara bilgisi, iade koşulları ve teslimat süresi sepete eklemeden önce görülebilmeli. Görseller büyütülebilir ve mobilde kaydırılabilir olmalı.

Hız

Tema, sayfanın ne kadar hızlı açıldığını doğrudan belirler. Gereğinden büyük görseller, ilk ekranda görünmeyen içeriğin hemen yüklenmesi ve gereksiz kod en sık görülen sebeplerdir. Hızlı açılan sayfa hem ziyaretçiyi tutar hem de Google’ın sayfa deneyimi değerlendirmesinde lehinize çalışır.

Arama motorları

Her sayfada tek ve anlamlı bir ana başlık, mantıklı bir başlık hiyerarşisi, görsellerde alternatif metin ve ürün bilgisinin sayfada gerçekten metin olarak bulunması temanın sorumluluğundadır. Bunlar eksikse en iyi ürün açıklaması bile gereken etkiyi göstermez. SEO ve GEO hizmetimiz bu tarafın ayrıntısını anlatıyor.

Editörden yönetilebilirlik

İyi bir tema teslim edildiği gün değil, altı ay sonra değerlendirilir. Mağaza ekibi yeni bir kampanya bandını, ana sayfadaki koleksiyonu ya da bir rengi değiştirmek için geliştiriciye ihtiyaç duymamalı. Bu yüzden her bölümün ayarlarını Türkçe, anlaşılır adlarla ve makul varsayılan değerlerle kuruyoruz; marka adı, renk veya görsel kodun içine sabitlenmiyor.

Erişilebilirlik

Yeterli renk kontrastı, klavyeyle gezilebilen menüler ve ekran okuyucuların anlayabileceği düğme etiketleri hem engelli ziyaretçiler hem de herkes için mağazayı daha kullanışlı yapar.

Moda ve ayakkabı mağazalarında özel noktalar

Limeo’yu satarken ve tema geliştirirken en çok uğraştığımız konular şunlar oldu:

• Numara ve renk üzerinden kurulan varyant yapısının kartta ve ürün sayfasında doğru gösterilmesi.
• Aynı modelin farklı renklerinin ayrı ürün gibi değil, tek ürünün seçenekleri gibi sunulması.
• Kartta birden fazla görsel: mobilde kaydırarak, masaüstünde fareyi gezdirerek ürünün farklı açılarını görmek.
• “Yeni”, “Çok satan”, “Kargo bedava” gibi rozetlerin elle değil, ürüne verilen etiketlerden otomatik gelmesi.
• Sezon geçişlerinde ana sayfanın ve koleksiyon bölümlerinin kod değişikliği olmadan güncellenebilmesi.

Nasıl çalışıyoruz

1. İnceleme. Mevcut mağazanızı, ürünlerinizi ve ziyaretçilerin nerede takıldığını birlikte inceliyoruz. Hazır temanın ayarlarıyla çözülebilecek bir şey varsa önce onu söylüyoruz.
2. Kapsam. Hangi sayfaların ve bölümlerin yeniden yapılacağını, hangilerinin olduğu gibi kalacağını yazılı olarak netleştiriyoruz.
3. Tasarım. Telefon ekranından başlayarak ana sayfa, listeleme, ürün detay ve sepet akışını tasarlıyoruz.
4. Geliştirme. Temayı ikas’ın kod bileşenleriyle (Preact ve TypeScript) geliştiriyor, her bölümü editörden ayarlanabilir kuruyoruz.
5. Deneme. Temayı gerçek ürün verisiyle, farklı ekran boyutlarında ve editörde deniyoruz; yayına almadan önce sizin onayınızı alıyoruz.
6. Teslim. Editörde hangi ayarın neyi değiştirdiğini anlatıyoruz; ekibiniz temayı kendisi yönetebilsin diye.

Bu hizmet neleri kapsar

• ikas için sıfırdan özel tema tasarımı ve geliştirme.
• Mevcut temaya yeni bölüm, ürün kartı veya ürün sayfası düzeni eklenmesi.
• Mobil görünüm ve sayfa hızı iyileştirmesi.
• Temanın arama motorları açısından gözden geçirilmesi: başlık yapısı, görsel metinleri, sayfa içi bilgi.
• Editör ayarlarının mağaza ekibinin kullanabileceği biçimde düzenlenmesi ve kısa bir kullanım anlatımı.
• İsteğe bağlı olarak katalog düzeni ve pazaryeri bağlantısı; e-ticaret ve pazaryeri hizmetimizle birlikte.

Sıkça sorulan sorular

İlgili sayfalar

• E-ticaret ve pazaryeri Üst hizmet: mağaza kurulumu ve pazaryeri bağlantısı.
• SEO ve GEO optimizasyonu Mağazanın arama motorlarında bulunması.
• Trendyol ve pazaryeri entegrasyonu Aynı kataloğu pazaryerine taşımak.
• Limeo ikas üzerinde çalışan kendi ayakkabı markamız.