ikas özel tema nasıl yapılır? Adım adım geliştirme süreci

Bu yazıda süreci hem mağaza sahibinin hem geliştiricinin göreceği adımlarla, ikas'ın resmi dokümanlarına ve kendi projelerimizde uyguladığımız sıraya göre anlatıyoruz. Tipik bir özel tema projesi 4-6 hafta sürer; hizmetin kapsamı için ikas özel yazılım tema sayfasına bakabilirsin.

Hazır temayı özelleştirmek mi, özel tema yazmak mı?

ikas'ta tema iki seviyede değişir. Hazır temada Satış Kanalları > Temalarım > Özelleştir yolundan açılan tema editöründe renk, yazı tipi, görsel ve bölüm sırasını kod yazmadan değiştirirsin; neler yapılabildiğini tema editörü yazısında anlattık. Özel tema ise bölümlerin ve davranışların kodla yeniden yazılmasıdır; aşağıdaki adımlar bu ikinci yolu anlatıyor.

Hazır tema ile başlamak çoğu mağaza için doğru karar. ikas'ın tema editörü renk, yazı tipi, bölüm sırası ve içerik alanlarında ciddi esneklik veriyor. Özel tema konuşmaya başladığımız an, editörün sınırına gelinen an oluyor. Bunu üç soruyla ölçüyoruz:

• Ürün sayfasında müşterinin karar vermesi için gereken bilgi, hazır temanın verdiği sırayla gösterilemiyor mu? Beden ve renk seçimi, taksit bilgisi, soğuk zincir uyarısı, kullanım videosu gibi alanlar hazır kalıba sığmıyorsa cevap evet.
• Kampanya dönemlerinde ekip her seferinde geliştiriciye mi soruyor? Yönetilebilir alan eksikliği zamanla en pahalı sorun oluyor.
• Mobilde hız ve akış markanın hedeflediği yerde mi? Hazır temaya eklenen her uygulama ve her özel kod parçası mobil skoru biraz daha aşağı çekiyor.

Üç sorudan ikisine evet diyorsan özel tema kapsamı çıkarmaya değer. Yalnızca görünüm değişecekse, yani renk, yazı tipi ve bölüm düzeni yeterliyse, bunu hazır tema üzerinde ikas tema tasarımı ile 1-2 haftada çözmek daha doğru. Mağaza yayındaysa ve sorunun temadan mı, katalogdan mı, ödeme akışından mı kaynaklandığı belli değilse, kodlamaya geçmeden önce bir ikas danışmanlığı çalışmasıyla öncelik sırası çıkarılabilir.

ikas Studio nedir?

ikas Studio, ikas'ın tema geliştirme ortamıdır. Dört modu vardır: İçerik, Tasarım, Blueprint ve Kod. Tasarım modunda bölümler görsel bir canvas üzerinde kod yazmadan tasarlanır, Blueprint modunda iş mantığı node tabanlı akışlarla kurulur, Kod modunda ise bölüm ve bileşenler yerel bilgisayarda Preact ile yazılır. İçerik modu, hazırlanan bölümlerin sayfalara yerleştirildiği ve içeriğin yönetildiği yerdir; mağaza sahipleri yalnız bu moda erişir. Bu yüzden geliştirici, mağazanın değiştirmek isteyeceği her şeyi İçerik modundan sunacak şekilde planlar.

ikas Studio'yu kullanmak için ikas Partners hesabı gerekir. ikas'ın dokümanında Kod modu beta olarak geçiyor; akış ve özellikler değişebiliyor. ikas Studio'da özel temaları Kod modunda yazıyoruz.

ikas'ta özel tema geliştirmenin iki yolu

İki yol da ikas'ın kendi tema altyapısında çalışır; sepet, ödeme, üyelik ve panel ikas'a ait kalır, yazılan şey vitrindir. Hangi yolu seçtiğimiz projeye göre değişir.

Burada bir ayrımı açıkça söylemek gerekiyor: piyasada "özel tema" adıyla sunulan işlerin çoğu hazır bir temanın renk, bölüm ve kod parçalarıyla özelleştirilmesi. Temayı ikas'ın kendi dokümantasyonundan yola çıkarak ikas Studio Kod modunda Preact ile ya da Next.js tabanlı ikas tema altyapısında React bileşenleriyle geliştiriyoruz; her iki yolda da TypeScript kullanıyoruz ve hazır temanın bölüm ve davranış sınırlarına bağlı kalmıyoruz. Bu yapının pratik sonucu şu: mağaza ekibi yayından sonra da ikas'ın sunduğu içerik düzenleme ekranında çalışmaya devam ediyor, sadece bölümler markaya özel oluyor.

Bazen "headless" kelimesi de gündeme geliyor. ikas'ta Headless Themes, partner panelinde Next.js, TypeScript ve MobX tabanlı tema altyapısının adı; ikas dışında barındırılan ayrı bir vitrin ve Storefront API bağlantısı anlamına gelmiyor. Bu temalar React bileşenleriyle geliştiriliyor, ikas'ta yayınlanıyor ve izin verilen mağazalarda kullanılıyor. Biz projeye göre bu altyapıyı ya da Preact tabanlı ikas Studio Kod modunu kullanıyoruz.

ikas özel tema 9 adımda nasıl yapılır?

1. Keşif: ürün yapısı, satış akışı ve yazılı kapsam.
2. Tasarım: önce mobil ekran, sonra masaüstü; her görsel alanının oranı.
3. Hesap ve mağaza: ikas Partners hesabı, geliştirme mağazası ve tema kaydı.
4. Geliştirme ortamı: ikas Studio Kod modu ya da Next.js tabanlı tema projesi.
5. Bileşenler: önce ortak parçalar, sonra ürün kartı, ürün, kategori ve sepet.
6. Editör alanları: mağazanın değiştireceği metin, görsel ve listeler.
7. Test: gerçek sipariş akışı, mobil hız, yapısal veri, düzenlenebilir alanlar.
8. Yayın: tema partner panelinden mağazaya gönderilir, mağaza tarafında yayınlanır.
9. Teslim: doküman, editör eğitimi, sürüm ve bakım planı.

Adım 1: Keşif ve yazılı kapsam

İlk görüşmede tasarım konuşmuyoruz, satış mantığını konuşuyoruz. Ürün yapısı nasıl: tek varyantlı mı, beden-renk matrisi mi, gramaj mı? Müşteri hangi bilgiyle karar veriyor? Kampanyalar nasıl yürüyor, hangi entegrasyonlar var, başka bir platformdan taşınacak veri var mı? Mevcut mağazanın ölçüm verisi varsa ürün sayfasından sepete, sepetten ödemeye geçiş oranlarına birlikte bakıyoruz.

Bu görüşmenin çıktısı yazılı kapsam. Hangi sayfalar tasarlanacak, hangi bölümler editörden yönetilebilir olacak, hangi işler kapsam dışı, teslim tarihi ne. Teklif alırken kime gidersen git, bu yazılı kapsamı iste; sonradan çıkan belirsizliklerin çoğu bu belgenin olmamasından kaynaklanıyor.

Özel tema kapsamına hangi sayfalar dahil edilmelidir?

Özel tema başlamadan önce yalnız ana sayfa ve ürün sayfasını değil, mağazada müşterinin karşılaşacağı bütün temel yüzeyleri listelemek gerekir. ikas'ın resmi tema düzenleme rehberinde ana sayfa, ürün, kategori, sepet, hesap, siparişler, adres, marka, favoriler, iletişim, 404 ve benzeri sayfa türleri ayrı ayrı gösteriliyor. Özel tema kapsamında bunların hangisinin markaya özel tasarlanacağı, hangisinin mevcut platform davranışıyla kullanılacağı keşif aşamasında belirlenmelidir.

Her sayfanın sıfırdan farklı görünmesi gerekmez. Header, footer, ürün kartı, form alanları ve içerik bileşenleri ortak bir sistem içinde tekrar kullanılabilir. Buna karşılık ürün sayfası, kategori, sepet veya hesap gibi farklı görevleri olan ekranların ihtiyaçları ayrı değerlendirilir. Farklı katalog ve sektörlerde bu kararların nasıl değiştiğini yayındaki projelerde görmek mümkündür.

Adım 2: Tasarım, önce mobil

Kurduğumuz mağazaların trafiğinin büyük kısmı telefondan geliyor, bu yüzden tasarımı önce mobil ekranda kuruyoruz ve masaüstünü sonra genişletiyoruz. Ürün kartında fotoğraf ve fiyatın yanında hangi bilginin görüneceğine ürün türüne göre karar veriyoruz: giyimde beden ve renk, gıdada gramaj ve teslimat bilgisi, mobilyada kullanım biçimi ve taksit. Tarzım Süper'de renk ve beden akışını, Massada'da taksit ve kullanım bilgisini, Atabarı'nda soğuk zincir ve ücretsiz kargo bilgisini karar noktasına bu aşamada taşıdık.

Tasarım aşamasında her görsel alanı için oran ve ölçü de belirleniyor; sonradan görsel hazırlarken kimse tahmin yürütmesin diye. ikas'ın resmi tema görsel boyutları dokümanı da hazır alanların ölçülerini kontrol etmek için kullanılabilir. Bunun neden önemli olduğunu görsel boyutları yazısında anlattık. Tasarım onayı, projede süreyi en çok etkileyen iki başlıktan biri; diğeri ürün görsellerinin ve içeriklerin hazır olması. Kod yazılmadan yalnız hazır temanın görünümü markaya uyarlanacaksa bu aşama tek başına bir ikas web tasarımı işidir.

Adım 3: Partner hesabı, geliştirme mağazası ve tema kaydı

Tema geliştirmek için önce bir ikas Partners hesabı açılır. Partner panelinde Mağazalar > Mağaza Oluştur > Geliştirme Mağazası adımıyla tema için bir kaynak mağaza kurulur. ikas'ın dokümanına göre geliştirme mağazaları Scale Plus lisansıyla açılır, adlarının başına "dev-" eki gelir, gerçek satış yapılamaz ve başkasına devredilemez.

ikas Studio yolunda partner panelindeki Temalar bölümünden yeni tema oluşturulur ve bu kaynak mağaza seçilir. Next.js yolunda tema, partner panelinin Headless Themes ekranında oluşturulur; yerel projenin mağazaya bağlanması için gereken yapılandırma buradan alınır. Geliştirme sırasında mağazanın gerçek verisi gerekiyorsa partner mağazaya erişim isteği gönderir, isteği mağaza yöneticisi onaylar; şifre paylaşılmaz.

Adım 4: Geliştirme ortamını kurmak

ikas Studio Kod modunda önce ikas CLI kurulur (npm install ikas -g). Partner panelinde temanın Kod sekmesindeki başlatma komutu (ikas theme init -e ...) çalıştırılır, proje klasöründe ikas theme dev ile geliştirme sunucusu açılır ve tarayıcıda Bağlan denir. Proje Preact bileşenlerinden oluşur: her bileşenin kodu ve stili kendi klasöründedir; ortak alt bileşenler, hook'lar ve yardımcı fonksiyonlar ayrı klasörlerde durur. Tip dosyaları ve bileşen kaydı otomatik üretilir, elle düzenlenmez. CLI'nın diğer komutlarını ikas API rehberindeki ikas CLI bölümünde topladık.

Next.js yolunda proje npx create-ikas-theme@latest ile kurulur, partner panelinden alınan yapılandırma config.json dosyasına yazılır ve tema yarn dev ile yerelde çalıştırılır. Bileşenler components klasöründe React ile yazılır; sayfa dosyaları otomatik üretildiği için elle değiştirilmez.

Bu aşamada amaç hemen bütün sayfaları tamamlamak değil, temanın mağazayla bağlantısını kurmak ve temel iskeleti doğrulamaktır. Header, footer, ürün kartı gibi ortak bileşenler ile ana sayfa, kategori ve ürün sayfası gibi temel yüzeylerin hangi sırayla geliştirileceği belirlenir. Geliştirme gerçek mağazadan ayrı ilerler; ekip canlı mağazayı sürekli izlemek yerine belirli aşamalarda paylaşılan önizlemeler üzerinden geri bildirim verir.

Adım 5: Bileşen bileşen geliştirme

Geliştirme sırası her projede aşağı yukarı aynı: önce üst menü, alt bilgi, sepet çekmecesi ve arama gibi her sayfada görünen yüzeyler; sonra ürün kartı, çünkü kategori, arama, ana sayfa ve öneri bölümlerinin hepsi aynı kartı kullanıyor; sonra ürün sayfası, kategori sayfası, sepet ve içerik sayfaları. Kod TypeScript ile yazılıyor; stil bileşen bazında tutuluyor ki bir bölümdeki değişiklik diğerini bozmasın.

Bu aşamada hazır temada sıkça atlanan birkaç işi baştan koda koyuyoruz:

• Varyant davranışı: beden seçilince stokta olmayan renklerin pasifleşmesi, seçime göre fiyat ve görsel değişimi, tek varyantlı üründe seçim adımının hiç gösterilmemesi.
• Görsel oranı ve kırpma: her görsel alanı sabit oranda ve merkezden kırpılarak basılıyor; müşteri altı ay sonra yanlış boyutta görsel yüklese bile düzen bozulmuyor.
• Yapısal veri: ürün sayfasında Product, Offer ve BreadcrumbList, kategori sayfasında CollectionPage ve ItemList işaretlemeleri temanın kendisinden üretiliyor.
• Hız: görseller sayfaya girmeden yüklenmiyor, kaydırıcılar ve video gibi ağır parçalar mobilde ihtiyaç anında geliyor. Yayından sonra eklenen görseller, videolar ve uygulamalar skoru değiştirir; bu yüzden hızı teslimle bitmiş bir iş olarak görmüyoruz.
• Uygulama uyumu: geliştirdiğimiz ikas uygulamaları ve mağazanın kullandığı üçüncü taraf uygulamalar için vitrinde ayrılan alanlar baştan planlanıyor.

Geliştirme bir geliştirme mağazasında ilerliyor; başka bir altyapıdan veri de taşınacaksa tema geliştirme ile ikas'a geçiş aynı yayın planı içinde ele alınıyor. Belirli aşamalarda önizlemeyi paylaşıyoruz; ekip sayfaları kendi telefonunda ve bilgisayarında geziyor, geri bildirimini mesajla ya da görüşmede bölüm bazında veriyor. Yayına girmeden önce son önizlemeyi birlikte gözden geçiriyoruz.

Performans bütçesi tema geliştirme sırasında nasıl planlanır?

Performansı yalnız yayın gününde ölçmek yerine bileşen geliştirme sırasında sınırlandırmak daha kontrollü bir yaklaşım sağlar. Ana sayfadaki görsel sayısı, video kullanımı, kaydırıcılar, fontlar, üçüncü taraf kodları ve uygulamaların vitrine eklediği parçalar birlikte değerlendirilir. Her yeni bölümün yalnız tasarım karşılığı değil, mobilde oluşturduğu yük de dikkate alınır.

Görseller için tasarım aşamasında belirlenen oranların korunması bu yüzden önemlidir. ikas'ın tema görsel boyutları dokümanı hazır alanları kontrol etmek için kullanılabilir; özel temada ise aynı mantık markaya göre geliştirilen bileşenlere uygulanır. Performans hedefi tema koduyla sınırlı değildir. Sonradan yüklenen görseller, videolar ve üçüncü taraf kodları da sonucu değiştirebilir. Bu nedenle geliştirme sırasında ölçüm yapar, kontrol edebildiğimiz yükleri azaltırız.

ikas özel alanlar tema geliştirmede nasıl kullanılır?

Hazır ürün alanları her mağazanın ihtiyacını karşılamaz. Ürüne özel teknik özellik, içerik, kullanım bilgisi veya mağazanın kendi veri yapısına ait ek bilgi gerekiyorsa ikas'ın özel alanlar yapısı kullanılabilir. Özel alanın panelde oluşturulması tek başına yeterli değildir; temanın bu veriyi hangi sayfada, hangi bileşende ve hangi koşulla göstereceği de geliştirme sırasında planlanmalıdır.

Örneğin bazı ürünlerde gösterilecek ek bir özellik bloğu bütün ürün sayfalarına sabit olarak yazılmak yerine ilgili özel alanda veri varsa görünür hale getirilebilir. Böylece aynı tema farklı ürün tiplerini yönetebilir ve içerik ekibi ürün bilgisini kod değiştirmeden güncelleyebilir. Özel alan ile tema editöründeki yönetilebilir alan birbirinden farklıdır: özel alan ürün veya başka bir kayda bağlı veriyi tutar, tema editörü ise banner, başlık, görsel veya bölüm sırası gibi sunum kararlarını yönetir. Bu ayrımı baştan kurmak temanın veri yapısını daha anlaşılır tutar.

Adım 6: Bileşenleri tema editörüne bağlamak

Mağaza ekibinin yayından sonra neyi kendisi değiştirebileceğini bu adım belirler. Her bileşenin düzenlenebilir alanları kodda tanımlanır ve tema editöründe form alanına dönüşür. Metin, zengin metin, görsel ve görsel listesi, bağlantı, renk, ürün ve ürün listesi, kategori, marka ve blog gibi alan tipleri hazır gelir; hazır tiplerin yetmediği yerde özel veri tipi tanımlanır. Kampanya bandını değiştiren kişi kod görmez, başlık, görsel ve bağlantı alanlarını doldurur.

ikas Studio'da mağaza sahibi yalnız İçerik modunu gördüğü için bütün düzenleme seçenekleri bu moddan sunulur. Hangi alanların editörden yönetileceğini 1. adımda yazmamızın sebebi bu: alan listesi, kodun nasıl yazılacağını belirler.

Adım 7: Test

Yayın öncesi kontrol listesi kısa ama pazarlıksız:

Adım 8: Yayına alma

ikas Studio yolunda tema, Studio'daki Temayı Yönet adımıyla yayına hazırlanır: mağazalarda görünecek sayfa, bölüm ve bileşenler seçilir. Ardından partner panelinde değişiklikler paylaşılır ve mağaza, temanın izin verilen mağazalar listesine eklenir. Next.js yolunda tema önce yarn build ile derlenir, tema editöründeki Upload Theme ile yüklenir, derleme durumu tema sürümleri ekranında izlenir ve mağazaya izin verilir. ikas'ın dokümanına göre bu temalar varsayılan olarak gizlidir (Private) ve herkese açık tema listelemesi şimdilik kapalıdır.

Yayın günü mevcut mağaza kapanmıyor. Mağaza tarafında tema güncellemesi kabul edilip kaydediliyor ve tek bir tıkla yayınlanıyor. Sorun çıkarsa bir önceki tema hâlâ duruyor; geri dönüş dakikalar sürüyor. Yayın saatini trafiğin düşük olduğu bir dilime koyuyor ve ilk saatte sipariş akışını gerçek verilerle izliyoruz.

Adım 9: Teslim, sürümler ve bakım

Teslimde mağaza üç şey alır: kendi ikas mağazasında yayınlanmış tema, tema yapısını ve düzenlenebilir alanları anlatan kısa bir doküman ve editör eğitimi. Tema mağazanın kendi ikas hesabında yayınlanır, orada kalır ve bizden bağımsız çalışır; ekip içerik ve kampanya alanlarını editörden yönetir. Tema kodu kendi geliştirme kitimizi içerdiği için kaynak kodu teslim etmiyoruz ve bunu teklifte açıkça yazıyoruz.

Teslimden sonra iki tür iş çıkar: temadan kaynaklanan hatalar ve ikas altyapısındaki güncellemelere uyum bir tarafta, yeni sayfa ve yeni özellik istekleri öbür tarafta. Yeni sürümler aynı yayın yoluyla mağazaya gönderilir. Bakım koşullarımızı ikas özel yazılım tema sayfasında bulabilirsin.

En sık yapılan üç hata

• Masaüstünden başlamak. Masaüstünde güzel duran bir ürün sayfası mobilde fiyatı ikinci ekrana itiyor. Tasarım mobilden başlamalı.
• Yönetilebilirliği sona bırakmak. Hangi alanların editörden değişeceği baştan yazılmazsa, her kampanya bir geliştirici talebine dönüşüyor.
• Taşıma ile temayı ayrı düşünmek. Başka platformdan gelen mağazada URL yapısı, 301 haritası ve yeni tema tek takvimde planlanmalı; ayrı ele alındığında SEO kaybı burada yaşanıyor.

Süre

Ana sayfa, kategori, ürün ve sepet akışını içeren tipik bir ikas özel tema projesi 4-6 hafta sürüyor; mağaza başka bir platformdan taşınıyorsa ikas mağaza taşıma ile birlikte 6-8 hafta planlıyoruz. Süreyi en çok tasarım onayının ve içeriklerin hazır olma hızı belirliyor. Bu süreçle yayına aldığımız mağazaları projeler sayfasında sektör ve yapılan iş bilgisiyle görebilirsin; hazır tema düzenleme ile sıfırdan geliştirme arasındaki kapsam farkı için ikas tema tasarımı sayfasını da karşılaştırabilirsin.

Kaynaklar

• ikas Studio dokümantasyonu
• ikas Studio ile tema oluşturma rehberi
• ikas özel alanlar dokümantasyonu
• ikas tema editörü ve tema düzenleme rehberi
• ikas tema görsel boyutları
• ikas Studio Kod modu genel bakış
• ikas Studio Kod modu kurulum
• ikas Studio Kod modu proje yapısı
• Kod modunda temayı yayınlama
• Geliştirici mağazası oluşturma
• ikas Partner Mağaza Yönetimi
• ikas tema altyapısı: Introduction (Next.js)
• ikas Headless Themes (partner paneli)
• ikas tema altyapısı: Publishing a Theme
• ikas tema altyapısı: Prop Types