Ürün sayfası nasıl olmalı? ikas'ta 10 alanın kurulumu

Mağazanın geneline dair dönüşüm kararlarını e-ticaret dönüşüm oranı rehberinde topladık. Burada yalnız ürün sayfasına bakıyoruz, çünkü reklam bütçesinin büyük kısmı doğrudan bu sayfaya iniyor ve satın alma kararı burada veriliyor.

Ürün sayfasında hangi öğeler olmalı?

Ürün sayfası ziyaretçinin üç sorusunu cevaplamalı: bu ürün tam olarak ne, bana uygun seçenek hangisi, satın alırsam ne olacak. Aşağıdaki öğeler bu üç soruyu sırayla cevaplar. Sağ sütun her öğenin ikas'ta nerede kurulduğunu gösteriyor; ayrıntısı bir sonraki bölümde.

Bu sıralama bir tasarım şablonu değil, bir kontrol listesi. Moda ürününde beden tablosu, gıdada gramaj ve içerik, mobilyada ölçü en üste çıkar; hangi bilginin önde duracağına ürünün satın alma kararı karar verir. Örneğin Pastırmacı Polat'ta gramaj, içerik ve çemen seçimini ürün sayfasında birbirinden ayrı seçim grupları olarak kurduk, çünkü müşteri tezgâhta da bu üç soruyu ayrı ayrı cevaplıyor.

ikas ürün sayfasında hangi alanlar hazır gelir?

ikas'ta ürün sayfası iki yerden beslenir. Birinci kaynak ürün kaydının kendisidir, yani Ürünler bölümünde doldurduğun alanlar. İkinci kaynak temadır, yani o alanları hangi komponentin ekrana bastığıdır; hazır temada bu komponentler sabittir, özel temada ürün sayfası ürün türüne göre kurulur. Bir alanı doldurup sayfada göremiyorsan sorun genelde ikinci kısımdadır.

Aşağıdaki tabloda ürün sayfasını doğrudan etkileyen yerleşik alanları topladık.

Yeni bir mağaza kurarken bu on satırı kontrol listesi gibi kullanıyoruz. Çoğu mağazada ilk üç satır doldurulmuş oluyor, kalan yedisi boş duruyor.

ikas ürün sayfası tema editöründe nasıl düzenlenir?

Ürün kaydındaki bilgileri doldurmak ile bu bilgilerin vitrinde nasıl gösterileceğini düzenlemek iki ayrı iştir. Hazır temada ürün sayfasının görünümünü tema editöründen yönetirsin. ikas'ın tema düzenleme rehberinde ürün sayfası, editörden seçilebilen temel sayfa tiplerinden biri olarak yer alıyor. Editörde sayfa seçiciden Ürün Sayfası'na geçip ürün bilgisi, medya, yorumlar ve temanın sunduğu diğer komponentlerin sırasını değiştirirsin; ayrıntısını ikas tema editörü rehberinde anlattık.

Hazır temanın sunduğu komponentler ihtiyacı karşılıyorsa kod yazmak gerekmez. Ürün türüne göre tamamen farklı bir bilgi sırası, özel bileşen davranışı veya hazır temada bulunmayan bir akış gerekiyorsa sınır tema katmanında ortaya çıkar. ikas Studio tarafında ürün sayfası gibi sayfa tipleri ve bunların özelleştirme yapısı sayfa dokümantasyonunda açıklanıyor. Böyle bir ihtiyaçta hazır tema düzenlemesi ile sıfırdan özel tema geliştirmeyi birbirinden ayırmak gerekir.

ikas Studio'da İçerik modunun yanında Tasarım, Blueprint ve Kod modları da var. Mağaza sahibi temayı İçerik modunda yönetir; sayfanın yerleşimini ve davranışını değiştiren diğer modlar tema geliştiricisine açıktır (ikas Studio Genel Bakış).

ikas ürün sayfasına video ekleme nasıl yapılır?

Video için ayrı bir alan yok, video da görsellerle aynı yere yüklenir. Ürünü aç, Medya bölümüne git, dosyayı sürükle bırak ya da gözat butonuyla seç. ikas dokümanına göre görseller için 10 MB, videolar için 25 MB yükleme sınırı bulunuyor ve yüklediğin görseller otomatik olarak webp formatına çevriliyor (Basit Ürün Oluşturma ve Düzenleme). Paket üründe görsel sınırı 7 MB olarak geçiyor, bu yüzden aynı dosyayı her ürün tipinde kullanacaksan görseli baştan küçültmek işini kolaylaştırır.

25 MB sınırı kısa videolar için yeterli, uzun tanıtım filmleri için değil. Biz ürün sayfasına koyduğumuz videoyu on beş saniyenin altında tutuyoruz ve tek bir soruyu cevaplatıyoruz: ürün gerçekte ne kadar büyük, dokusu nasıl, nasıl kullanılıyor. Kutu açılışı ve kullanım anı, stüdyo çekiminden daha çok işe yarıyor.

Görsellerde dikkat ettiğimiz üç nokta

• Tüm görselleri aynı en boy oranında hazırlıyoruz, çünkü karışık oranlar galeri geçişinde zıplamaya yol açıyor.
• İlk görseli ürünün tamamını gösteren kare yapıyoruz, detay ve ölçek karelerini sonraya bırakıyoruz.
• Görsel alt metnini boş bırakmıyoruz, bu alan hem erişilebilirlik hem görsel araması için kullanılıyor (SEO Alanları).

Ürün görsellerinin tema içindeki oran ve ölçü tarafını ikas tema görsel boyutları rehberinde ayrıca ele aldık.

Videodan sepete eklemek için ne gerekir?

Medya alanına yüklediğin video galerideki görsellerin arasında oynar. Ürünün hareketini anlatmak gereken kategorilerde video ana anlatım aracına dönüşür; Massada'da kullanım videosunu ürün sayfasında galeri, renk seçenekleri ve fiyatla aynı karar akışına koyduk.

Videoyu ürünle eşleştirip ziyaretçinin videodan çıkmadan varyant seçip sepete eklemesini istiyorsan iki yol var: temada buna uygun bir komponent ya da bu işi kodsuz yapan bir App Store uygulaması. Videodan doğrudan sepete ekleten bir video uygulaması da geliştirdik; videoları panelden yükleyip her videoya bir ürün bağlıyorsun. Hangi yolu seçersen seç, videonun sayfa hızına etkisini mobilde ölç.

Ürün videolarını reklamda da kullanmak istiyorsan Meta kataloğuna dikkat et: ikas'ın dokümanına göre Facebook ve Instagram mağaza özelliği Türkiye'de kullanılamıyor, katalog şu an dinamik reklamlar için bağlanıyor (Facebook Katalog Entegrasyonu).

ikas'ta varyantlı ürün nasıl kurulur?

Varyant, ürün sayfasındaki en kritik etkileşimdir. Ziyaretçi burada takılırsa sepete ekle butonuna hiç gelmez. ikas'ta varyantı ürün oluşturma ekranındaki Varyant Ekle butonundan kurarsın. Varyant Türü Adı alanına Renk ya da Beden gibi bir ad yazarsın, Seçim Stili olarak Liste veya Renk/Görsel seçersin, ardından değerleri girersin (Varyantlı Ürün Oluşturma ve Düzenleme).

Seçim stili küçük görünen ama sonucu değiştiren bir karardır. Renk için Liste stilini seçersen müşteri yazıyı okuyup rengi hayal etmek zorunda kalır. Renk/Görsel stilini seçersen rengi doğrudan görür. Beden ve hafıza gibi metinsel değerlerde ise Liste daha okunaklı kalıyor.

Her varyant için ayrı görsel, satış fiyatı, indirimli fiyat, SKU, barkod ve stok miktarı tanımlayabilirsin. Desi ve HS kodu alanları varsayılan olarak gizli geliyor, Ayar butonuyla açılıyor. Medya alanına yüklediğin görseller ve videolar varyantlar oluşturulduğunda tüm varyantlara otomatik ekleniyor, sonra varyant adının solundaki alandan tek tek düzenliyorsun.

Varyantlı ürün yüklerken yaptığımız üç düzeltme

• Her renge kendi görselini atıyoruz, çünkü varyant seçildiğinde galerinin değişmemesi güven kırıyor.
• Stoğu biten bedeni gizlemek yerine görünür bırakıp pasif gösteriyoruz, böylece müşteri mağazada o bedenin var olduğunu biliyor.
• Renk gerçekten ayrı bir ürün gibi aranıyorsa ürün kaydındaki "Bu ürün için varyant değerlerini marka ve kategori sayfalarında ayrı göster" seçeneğini açıyoruz, böylece her renk listede kendi kartıyla çıkıyor.

Ürün açıklaması nasıl yazılır? Özel alanlar ve kişiselleştirme

Açıklamayı dört parçada kur

Ürün açıklamasına her şeyi yığmak yerine okurun sırayla sorduğu sorulara göre dört parça kullan:

1. Ne ve kime: ilk iki cümlede ürünün ne olduğunu ve kime uygun olduğunu söyle.
2. Neden bu ürün: iki üç maddeyle ayırt edici özelliği yaz; genel övgü yerine ölçülebilir bilgi ver (kumaş oranı, gramaj, kapasite).
3. Nasıl kullanılır: kullanım, bakım ya da kurulum adımı varsa kısa maddeler.
4. Teknik bilgi: malzeme, ölçü, menşe gibi tekrar eden bilgiler açıklamada değil Özel Alanlar'da dursun; böylece yüzlerce üründe tek yerden güncellenir.

Açıklama alanı HTML düzenlemeyi destekliyor; panelde AI ile Oluştur butonuyla açıklama üretme seçeneği de var (Basit Ürün Oluşturma ve Düzenleme). Üretilen metni bu dört parçaya göre kısaltıp kendi ürün bilginle düzeltmeden yayına alma.

Özel alanlar ve ürün kişiselleştirme

Tekrar eden bilgiler için Özel Alanlar var. Ürünler > Tanımlamalar > Özel Alanlar yolundan tanımlıyorsun ve Doğru-Yanlış, Seçim, Renk, Tarih, Tarih ve Saat, HTML, Resim, Çoklu Seçim, Sayı, Ürün, Tablo ve Yazı tiplerinden birini seçiyorsun. Özel alanlar ürün açıklamasının altında ya da temaya bağlı olarak belirlenen başka bir yerde, bazı durumlarda açılır pencere biçiminde gösteriliyor (Özel Alanlar). Beden tablosunu Tablo tipiyle kurmak, aynı görseli yüzlerce ürüne tek tek yüklemekten çok daha kolay yönetiliyor.

Ürün Kişiselleştirmeleri ise farklı bir ihtiyaca bakıyor. Ürünler > Tanımlamalar > Ürün Kişiselleştirmeleri yolundan Evet/Hayır, Seçim, Renk Seçimi, Tarih Seçimi, Dosya Yükleme, Yazı ve Paragraf tiplerinde alanlar kuruyorsun. "Bu kişiselleştirme zorunlu olsun" seçeneğini açtığında alan doldurulmadan ürün sepete eklenemiyor. "Bu kişiselleştirme ücretli olsun" seçeneğiyle Sabit Fiyat ya da Ürün Fiyatının Yüzdesi olarak ek ücret tanımlayabiliyorsun (Ürün Kişiselleştirme). İsim baskısı, hediye notu ve tarih seçimi gibi talepler böylece WhatsApp yerine siparişin içine giriyor.

ikas'ta ürün yorumları nasıl açılır?

Ürün yorumları ikas'ta bir otomasyon olarak geliyor. Satış Kanalları > kullandığın satış kanalı > Otomasyonlar alanına gidip Ürün Yorumları otomasyonunun yanındaki Aktive Et butonuna basıyorsun. Otomasyon, siparişi tamamlayan müşteriye gönderim ya da teslimat sonrasında belirlediğin gün sayısında yorum daveti e-postası gönderiyor. Gelen yorumları Onayla, Reddet ve Cevapla seçenekleriyle yönetiyorsun. Cevaplama ve yoruma görsel ekleme paket şartına bağlı; destek makalesi ile paket sayfası farklı paket adı verdiği için kendi paketinde paket sayfasından kontrol et. Müşteri yoruma görseli yalnız kendisine gelen e-postadan ekleyebiliyor, sitedeki formdan ekleyemiyor (Ürün Yorumları Otomasyonu).

Burada en sık atlanan adım tema tarafında. Yorumların ürün sayfasında görünmesi için temada Müşteri Yorumları ya da Ürün Değerlendirmeleri komponentinin ekli olması gerekiyor. Satış Kanalları > satış kanalın > Temalarım > Özelleştir yolundan ürün sayfasını açıp komponentin duruyor mu diye bakmak birkaç dakika sürüyor. Otomasyonu açıp komponenti eklemeyi unutan mağazalarda yorumlar birikiyor ama sayfada hiç görünmüyor.

Pazaryeri yorumları ürün sayfasına taşınabilir mi?

Pazaryerinde yorum biriktirmiş bir marka için sitede sıfırdan başlamak zor. ikas'ın yorum otomasyonu yalnız kendi sitende bırakılan yorumları toplar; pazaryerindeki yorumlar buraya kendiliğinden gelmez. Onları ürün sayfana taşımak için App Store'daki yorum aktarma uygulamalarına bakman gerekir. Seçerken üç şeyi kontrol et: ürünlerin barkod ya da SKU ile doğru eşleşip eşleşmediği, müşteri adlarının nasıl gösterildiği (KVKK ve pazaryerinin kullanım koşulları) ve yorumun hangi platformdan geldiğinin görünüp görünmediği. Pazaryeri yorumlarını ikas'a aktaran bir uygulama da hazırlıyoruz; yakında App Store'da yayında olacak.

Yorumun ürün sayfasındaki asıl değeri sayfanın kendisiyle sınırlı değil, birazdan anlatacağımız yapısal veriye de giriyor. Sayfada gösterilen yorumlarla puanın tutarlı kalması bu yüzden şart.

Stok, kargo bilgisi, kampanya etiketi ve çapraz satış

Satın alma kutusunun etrafındaki küçük bilgiler, ürün fotoğrafı kadar iş görüyor. Bunları da ikas içinden kurabiliyorsun.

Stoğu biten üründe sayfayı boş bırakma

Tekrar Stokta otomasyonunu açtığında stoğu biten üründe Sepete Ekle butonunun yerini Stoğa Gelince Haber Ver butonu alıyor. Müşteri e-posta adresini yazarak ya da üye girişi yaparak kaydoluyor, ürüne stok girdiğinde e-posta otomatik gidiyor. Tema ayarlarındaki "Is Active Back In Stock Reminder" seçeneği kapalıysa buton ürün slaytında, kategori, marka ve arama sayfalarında görünmüyor (Tekrar Stokta Otomasyonu). Hangi ürüne kaç kişinin haber ver dediği, yeniden sipariş kararında da işine yarar; bunu ikas stok takibi rehberinde anlattık.

Kargo ve teslimat bilgisini sayfaya taşı

Kargo kurallarını Kargo Ayarları bölümünde bölgelere göre kuruyorsun, ama müşteri o kuralı sepete gelmeden bilmek istiyor. Biz teslimat süresini ve ücretsiz kargo koşulunu Özel Alanlar ile ürün sayfasına taşıyoruz. Tek bir Yazı alanı açıp tüm ürünlere aynı metni bağlamak, her ürün açıklamasına ayrı ayrı yazmaktan daha sürdürülebilir oluyor.

Ürün sayfasından sonraki sepet ve ödeme adımlarındaki sürtünmeyi terk edilmiş sepeti azaltma rehberinde ayrıca ele aldık.

Kampanya etiketi ve paket seçenekleri

Etiketleri Ürünler > Tanımlamalar > Etiketler yolundan oluşturuyorsun. Etiketler kampanya kurgusunda, filtrelemede, dinamik kategoride ve vergi ayarında kullanılıyor, ayrıca etiketlere ait bilgileri ürün sayfasında veya kategori sayfasında gösterebiliyorsun (Etiket Oluşturma, Düzenleme ve Kullanım Alanları). Rozet sayısını sınırlı tutuyoruz, çünkü her ürünün üstünde etiket varsa hiçbiri dikkat çekmiyor.

Paket ya da adet seçeneğini kampanya metnine değil seçim alanına koymak karşılaştırmayı kolaylaştırır; Goldmi'de adet seçenekli paket kartlarını böyle kurduk ve seçilen adedi doğrudan sepete ekle butonuna yansıttık.

Çapraz satış teklifi

Cross Sell teklifini İndirimler > Kampanya Teklifleri > Kampanya Teklifi Ekle yolundan kuruyorsun. Teklif ürün sayfasında, ödeme sayfasında ve ödeme sonrasında gösterilebiliyor. Başlık alanı yalnız senin gördüğün iç isimlendirme, Teklif Sayfası alanında önerilecek tamamlayıcı ürünleri seçiyorsun, Uygula alanında teklifi tetikleyecek ürün, kategori, marka ve etiket koşullarını tanımlıyorsun. Özellik Scale ve üzeri paketlerde kullanılıyor (Cross Sell Kampanya Teklifi Oluşturma).

Öneriyi ürün sayfası yerine sepetin içinde, sepetteki ürünlere ve ücretsiz kargoya kalan tutara göre göstermek istersen App Store'daki sepet uygulamalarına bakabilirsin. Sepette ürün önerisi, kargo eşiği ve hediye hedefini aynı akışta gösteren bir uygulama da geliştirdik.

Mobilde ürün sayfası ve hız

Çoğu mağazada trafiğin büyük kısmı mobilden gelir; kendi oranını Google Analytics 4'te cihaz kırılımından gör ve ürün sayfasını önce telefonda kur. Tema editöründe mobil görünüme geçip şu üç şeye bak: fiyat ve varyant seçimi ilk ekranda görünüyor mu, sepete ekle butonuna başparmakla rahat ulaşılıyor mu, galeri kaydırılırken sayfa zıplıyor mu.

Hız tarafında en büyük yük görsellerden geliyor. ikas görselleri webp'ye çeviriyor, ama kaynağı 10 MB sınırına dayanmış dosya yüklersen çıktı da ağır oluyor. Biz ürün görsellerini yükleme öncesi makul bir genişliğe indiriyoruz. Video için de aynı mantık geçerli, ürün sayfasındaki videoyu sessiz ve kısa tutuyoruz, otomatik oynatmayı yalnız gerçekten gerekliyse açıyoruz.

Sayfaya eklenen her üçüncü taraf script de mobil hızını düşürüyor. Kurulu uygulamaları dönem dönem gözden geçirip kullanmadıklarımızı kaldırıyoruz. Yerleşik alanlarla çözülmeyen bir ihtiyaç kaldığında ise doğru yol tema tarafında çalışmaktan geçiyor, bunun nasıl ilerlediğini ikas tema tasarımı sayfasında anlattık.

Ürün sayfası performansı nasıl ölçülür?

Ürün sayfasının doğrudan çıktısı sepete eklemedir. En basit ölçü: belirli bir dönemde ürünü sepete ekleyen ziyaretçi sayısını ürün sayfasını görüntüleyen ziyaretçi sayısına böl. Sepete ekleme oranı yüksek ama satın alma düşükse sorun ürün sayfasında değil, sepet ve ödeme adımındadır.

Google Analytics 4'te bu iki adım view_item (ürün görüntüleme) ve add_to_cart (sepete ekleme) olaylarıyla ölçülür. Kendi mağazanda hangi olayların gerçekten gönderildiğini DebugView ekranında kontrol et, raporu o olay adlarına göre kur (GA4 e-ticaret olayları).

Bu oran için herkese uyan bir hedef yok; fiyat aralığı, kategori ve trafik kaynağı sonucu çok değiştiriyor. Aynı ürün grubunda bir değişiklikten önceki ve sonraki dönemi aynı uzunlukta karşılaştır. Galeriyi, varyant yapısını ve kargo bilgisini aynı hafta değiştirirsen farkın hangi karardan geldiğini ayıramazsın. Ürün sayfası dışında mağaza genelindeki ölçümü e-ticaret dönüşüm oranı rehberinde ele aldık.

ikas ürün sayfası Google'da zengin sonuç verir mi?

Önce SEO alanlarını dolduruyoruz. Ürün detay sayfasındaki SEO Alanı bölümünde Slug, Sayfa Başlığı ve Açıklama alanları bulunuyor. ikas dokümanı sayfa başlığının masaüstü sonuçlarında kırpılmaması için yaklaşık 580 piksel sınırını, açıklamanın ise yaklaşık 920 piksel sınırını öneriyor, bu da kabaca 55-60 ve 140-160 karaktere denk geliyor (SEO Alanları). Bu alanları nasıl yazacağını sitenin diğer SEO ayarlarıyla birlikte ikas SEO ayarları rehberinde anlattık.

Yapısal veriyi kendi mağazalarımızın kaynak kodundan kontrol ediyoruz. Baktığımız ikas mağazalarında ürün sayfası JSON-LD biçiminde Product, BreadcrumbList, Store ve Website verisi üretiyor. Product içinde ürün adı, açıklama, görsel, marka, SKU ve puan bilgisi yer alıyor, offers dizisinde ise her varyant için ayrı fiyat, para birimi, ürün durumu ve stok durumu çıkıyor. Puan bilgisi yalnız onaylanmış yorum varsa doluyor, yani ürün yorumları otomasyonunu açmak arama sonucunda yıldız görme ihtimalini de doğrudan etkiliyor.

Bu yapı temaya bağlı olduğu için kendi mağazanda kontrol etmeni öneriyoruz. Bir ürün sayfasının adresini Google'ın zengin sonuç testine verip Product ve BreadcrumbList çıktısını okumak yeterli. Google'ın ürün sayfaları için hangi alanları beklediğini Product yapılandırılmış verisi dokümanında görebilirsin. Tema değiştirdikten sonra aynı testi tekrarlıyoruz, çünkü yapısal veri tema katmanında üretiliyor.

Ürünlerin Google Alışveriş tarafında da görünmesini istiyorsan ürün kaydındaki Google Ürün Kategorisi alanını dolduruyor ve Satış Kanalı > Eklentiler bölümünden Google Merchant Center entegrasyonunu kuruyorsun (Google Merchant Center Entegrasyonu Nasıl Yapılır?). Marka, SKU ve barkod alanları boşsa bu tarafta eşleşme sorunları çıkıyor, bu yüzden envanter alanlarını baştan doldurmak sonradan uğraşmaktan ucuza geliyor.

Ne zaman yardım almalısın?

Yukarıdaki alanların tamamı panelden ve tema editöründen kurulabiliyor, bu yüzden önce kendin denemeni öneriyoruz. Bir alanı doldurduğun halde sayfada göremiyorsan, varyant seçimi mobilde bozuluyorsa ya da zengin sonuç testi Product verisinde hata veriyorsa iş tema katmanına geçmiş demektir. Canlı ikas mağazaları kurmuş bir ikas partneri olarak bu noktada ne yapılması gerektiğini birlikte netleştirebiliriz. Farklı ürün sayfası ve tema kurgularını projeler sayfasında da inceleyebilirsin.

Kaynaklar

• ikas Basit Ürün Oluşturma ve Düzenleme
• ikas Varyantlı Ürün Oluşturma ve Düzenleme
• ikas Özel Alanlar
• ikas Ürün Kişiselleştirme
• ikas Ürün Yorumları Otomasyonu
• ikas Facebook Katalog Entegrasyonu
• ikas Tema Düzenleme Rehberi
• ikas Panelden Ürün Oluşturma
• ikas Tema Görsel Boyutları
• ikas E-Ticaret Paketleri
• ikas Studio Genel Bakış
• ikas Studio Sayfa Tipleri ve Özelleştirmeler
• Google: Ürün Yapılandırılmış Verileri
• Google Analytics: E-ticareti ölçme