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 EkibiYayın tarihi: 7 dk okumaGüncellendi:

Bu yazıda
- Araştırma ne diyor?
- Slayt mı, tek görsel mi, kutular mı?
- Ana görselde video kullanmak
- Kampanya kutuları nasıl kurulur?
- Slayt kullanacaksanız: Sepetya neyi sizin yerinize yapar?
- Örnek kurgu: üç slayt
- Slayt hazırlarken kontrol listesi
- Slayt metinlerinde dürüst kalın
- Karar vermeden önce kendi mağazanızı izleyin
- Kaynaklar
Ana sayfanın en üstünde dönen büyük görseller, yani slayt (karusel), e-ticaret sitelerinin en tanıdık öğelerinden biridir. Birçok mağaza sahibi onu varsayılan olarak ekler: "Hepsini göstereyim, kim neye bakarsa baksın." Sorun şu ki ziyaretçilerin çoğu o 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. Kısa cevap şu: slayt yasak değil, ama varsayılan seçim de olmamalı.
Araştırma ne diyor?
E-ticaretin kullanılabilirliği üzerine çalışan Baymard Institute, ana sayfa slaytlarını büyük ölçekli kullanıcı testlerinde inceledi ve sonuçlarını 2019'da yayımladı. Öne çıkan bulgular şunlar:
- ABD ve Avrupa'nın en büyük e-ticaret sitelerinin masaüstü sürümlerinin %33'ünde ana sayfa slaytı vardı.
- Ana sayfa slaytı kullanan sitelerin %46'sında slaytın uygulaması kullanılabilirlik sorunları taşıyordu.
- Test katılımcıları, slaytlar bir tur dönmeden başka bir sayfaya geçiyor ya da sayfayı aşağı kaydırıyordu. Yani çoğu ziyaretçi bütün slaytları görmez; ilk slayt diğerlerinden çok daha fazla görünür.
- Slaytlar reklama benzediği için bazı ziyaretçiler onları hiç okumaz (banner körlüğü). Baymard, önemli bir özelliğe yalnızca slayt üzerinden ulaşılmaması gerektiğini söylüyor.
- Aynı içeriği ana sayfada sabit bölümler olarak göstermek, Baymard'ın testlerinde slayt kadar iyi çalıştı ve doğru uygulaması çok daha kolay.
Sınırlarını bilin: Bu çalışma büyük ABD ve Avrupa sitelerini kapsıyor ve 2019 tarihli. Türkiye'deki ziyaretçilerinizi ya da bugünün alışkanlıklarını ölçmüyor. Kesin bir kural olarak değil, ciddi bir uyarı olarak okuyun.
Slayt mı, tek görsel mi, kutular mı?
Sepetya temalarında ana sayfanın üst kısmı için başlıca dört hazır bölüm var. Hangisini seçeceğiniz, ne anlatmak istediğinize bağlı.
| Durumunuz | Uygun bölüm | Neden |
|---|---|---|
| Tek güçlü bir mesajınız var (yeni sezon, tek büyük kampanya) | Ana görsel (Hero) | Mesaj hemen görünür, dönen içerik yoktur. |
| Eşit önemde iki ila beş duyurunuz var | Kampanya kutuları | Hepsi aynı anda görünür; ziyaretçi ilgisini çekene gider. |
| Çok sayıda kategoriniz var | Vitrin açılışı (kategori menülü) | Solda kategori listesi, ortada kampanya slaytı, sağda iki küçük kampanya kartı bulunur; kategorilere ulaşmak slayta bağlı kalmaz. |
| Aynı alanda sırayla göstermeniz gereken birkaç duyuru var | Slayt gösterisi | En çok altı slayt koyabilirsiniz; aşağıdaki kurallarla kullanın. |
Küçük ve orta ölçekli mağazalarda çoğu zaman ilk ikisi iş görür: bir ana görsel ve altında kampanya kutuları ya da öne çıkan kategoriler. Slayt, gerçekten birden çok duyuruyu aynı yerde taşımanız gerektiğinde mantıklıdır. Temalar bu bölümleri farklı yorumlar; sektörünüze göre tema seçimi için sektörünüze uygun tema nasıl seçilir yazımıza bakın.
Ana görselde video kullanmak
Ana görsel (Hero) bölümüne, görselin yerine MP4 bağlantısıyla bir arka plan videosu da ekleyebilirsiniz. Video sessiz ve döngülü oynar; işletim sisteminde hareket azaltma tercihi açık olan ziyaretçilere ise görsel gösterilir. Videoyu kısa ve hafif tutun: Baymard, ziyaretçilerin bir saniyeden uzun yüklenen, görsel ağırlıklı içerikten çabucak sıkıldığını bildiriyor.
Kampanya kutuları nasıl kurulur?
- Tema editöründe ana sayfaya "Kampanya kutuları" bölümünü ekleyin.
- Düzeni seçin: iki eşit kutu, üç eşit kutu, bir büyük ve iki küçük ya da bir büyük ve dört küçük.
- Her kutuya görsel, başlık, kısa metin, düğme etiketi ve bağlantı girin. Yazının kutudaki konumunu (üst, orta, alt) ve karartma oranını ayarlayın.
- En önemli duyuruyu büyük kutuya koyun ve her kutuda tek mesaj verin.
Bir bölümde en çok beş kutu olabilir. Telefonda farklı görünsün isterseniz her kutu için ayrı bir telefon görseli de yükleyebilirsiniz.
Slayt kullanacaksanız: Sepetya neyi sizin yerinize yapar?
Baymard, ana sayfa slaytları için on gereksinim sıralıyor. Aşağıdaki tablo, bunların hangisini Sepetya slaytlarının kendiliğinden yaptığını ve hangisini sizin üstlenmeniz gerektiğini gösteriyor.
| Gereksinim | Sepetya içinde |
|---|---|
| İlk slaytı özenle seçin | Sıralamayı siz belirlersiniz. İlk slayt en çok görülendir; en geniş kitleye hitap eden mesajı oraya koyun. |
| Önemli içeriğe yalnızca slayttan ulaşılmasın | Sizin sorumluluğunuzda: slayttaki her bağlantıya menüden ya da ana sayfadaki başka bir bölümden de ulaşılabilmeli. |
| Belirgin manuel kontroller | Önceki ve sonraki okları ile her slayt için bir nokta bulunur. Otomatik geçiş çalışıyorsa görünür bir duraklat düğmesi de eklenir. |
| Makul geçiş süresi: 5–7 saniye, yazısı çok olan slaytlarda 10 saniyeye kadar | Varsayılan 6 saniyedir; 4 ile 10 saniye arasında ayarlanır. |
| Fareyle üzerine gelince durma | Fare slaytın üzerindeyken ya da klavyeyle odak slaytın içindeyken geçiş durur. |
| Etkileşimden sonra otomatik geçişi bırakma | Ok, nokta ya da kaydırma kullanılınca otomatik geçiş durur. Ziyaretçi isterse oynat düğmesiyle yeniden başlatabilir. |
| Mobilde otomatik geçiş olmasın | Otomatik geçiş yalnızca fareyle gezilen cihazlarda çalışır; dokunmatik cihazlarda slaytlar parmakla kaydırılır. |
| Mobil hareketleri destekleyin | Slaytlar yana kaydırılarak gezilir. |
| Slayt yazısı okunaklı olsun | Başlık, yazı ve düğmeler görsele gömülü değil, ayrı alanlardır. Telefon için ayrı bir görsel yükleyebilir, karartma oranını ayarlayabilirsiniz. |
| İçerik hızlı yüklensin | İlk slaytın görseli öncelikli yüklenir, diğerleri gerektikçe. Görseller AVIF ve WebP biçimlerinde, farklı genişliklerde sunulur. |
Bu davranış, temanın slaytı nasıl göstereceğinden bağımsızdır: temalar slaytı kaydırma ya da yumuşak geçişle, nokta, çubuk ya da sayaçla gösterebilir, ama duraklatma ve durma kuralları aynı kalır. Ek olarak, işletim sisteminde hareket azaltma tercihi açık olan ziyaretçilerde otomatik geçiş hiç başlamaz.
Bu kurallar yalnızca iyi uygulama değil. Erişilebilirlik yönergesi WCAG 2.2, kendiliğinden başlayan ve başka içerikle birlikte sunulan hareketli ya da kendini güncelleyen içeriği kullanıcının duraklatabilmesini, durdurabilmesini veya gizleyebilmesini ister (2.2.2 ölçütü, A düzeyi). Otomatik geçen bir slayt bu kapsama girebilir; görünür bir duraklat düğmesi bu ihtiyacı karşılar.
Örnek kurgu: üç slayt
Aşağıdaki tablo yalnızca bir örnektir; kendi kataloğunuza göre değiştirin. Mantık şu: ilk slayt en geniş kitleye, sonrakiler daha dar ilgilere hitap eder ve her slaytın hedefi menüden de erişilebilir bir sayfadır.
| Sıra | Mesaj | Düğmenin gittiği yer |
|---|---|---|
| 1 | Yeni sezon koleksiyonu | "Yeni gelenler" kategorisi |
| 2 | Seçili ürünlerde indirim (önceki fiyat kuralına uygun) | İndirimli ürünlerin listesi |
| 3 | Hediye önerileri | "Hediye" kategorisi |
Slayt hazırlarken kontrol listesi
- Slayt sayısını az tutun. Çoğu ziyaretçi bütün slaytları görmediği için sonraki slaytların görülme şansı düşüktür; üç dört slayt çoğu mağaza için yeterlidir.
- İlk slayta en geniş kitleye hitap eden mesajı koyun: genel kampanya, yeni ürünler ya da mevsim.
- Her slaytta tek mesaj ve tek ana düğme olsun; başlığı kısa tutun.
- Başlığı ve metni görselin içine gömmeyin, slayt alanlarına yazın. Böylece yazı okunur, çevrilebilir ve telefonda da net kalır.
- Telefon için ayrı bir görsel yükleyin. Tek görsel kullanırsanız ürünü ya da konuyu merkeze yakın tutun; küçük ekranlarda kenarlar kırpılır.
- Karartma oranını, yazı görselin en açık yerinde bile okunacak şekilde ayarlayın.
- Masaüstü slayt görselini en az 1920 piksel genişlikte yükleyin. Sepetya, yüklediğiniz görselden 160 ile 2560 piksel arasında farklı genişlikte sürümler üretir ve tarayıcı ekrana uygun olanı seçer.
- Slayttaki her hedefe menüden ya da ana sayfanın başka bir bölümünden de ulaşılabildiğini kontrol edin.
- Slaytları masaüstünde, telefonda ve klavyeyle (Tab tuşuyla) deneyin.
Slayt metinlerinde dürüst kalın
Slayttaki başlık ve metinler reklam niteliğindedir. "Yüzde 30 indirim" ya da "Son 3 gün" gibi ifadelerin gerçeği yansıtması gerekir:
- İndirim ve önceki fiyat: Ticari Reklam ve Haksız Ticari Uygulamalar Yönetmeliği'nin 14. maddesine göre, 1 Ağustos 2026'dan itibaren mal satışına ilişkin reklamlarda indirimden önceki fiyat, indirimin başlangıç tarihinden önceki on gün içinde uygulanan en düşük fiyattır. Ayrıntıyı dürüst aciliyet ve gerçek stok uyarıları yazımızda anlattık.
- Geri sayım ve bitiş tarihleri: Gerçek bir kampanya bitişine bağlı olmayan geri sayım koymayın. Sahte geri sayım ve sahte stok azlığı mesajları karanlık tasarım örnekleridir (karanlık tasarımlar yazımıza bakın).
- Fiyat notu: Slayta bir ürün bağladığınızda ("Fiyatı gösterilecek ürün" alanı) bazı temalar "… TL'den başlayan fiyatlarla" notunu ürünün güncel fiyatıyla gösterir. Fiyatı elle yazmak yerine bu alanı kullanırsanız slayttaki fiyat ürün sayfasındaki fiyattan ayrışmaz.
- Kısa özellikler: "Su geçirmez, 2 yıl garanti" gibi kısa özellik etiketlerine yalnızca doğru ve belgeleyebileceğiniz bilgileri yazın.
Karar vermeden önce kendi mağazanızı izleyin
Baymard'ın bulguları yön gösterir, ama mağazanızın ziyaretçileri farklı davranabilir. Ana sayfanın üst bölümünü değiştirdiğinizde, birkaç hafta boyunca ana sayfadan ürün ve kategori sayfalarına geçişi ve satışları önceki döneminizle karşılaştırın. Aynı anda başka bir şeyi (fiyat, kampanya, reklam bütçesi) değiştirmemeye çalışın; aksi hâlde sonucun nedenini ayıramazsınız.
Ana sayfayı sade tutmak ve ziyaretçinin kategoriye, ürüne hızlıca ulaşmasını sağlamak çoğu zaman slaytın süsünden daha çok iş görür. Slayt ve kampanya kutularını tema editöründe kendi mağazanızda deneyebilirsiniz: ücretsiz deneyin.
Bu yazı hukuki/mali danışmanlık değildir.
Kaynaklar
- Baymard Institute: 10 UX Requirements for Homepage Carousels (30 Nisan 2019)
- W3C WCAG 2.2: Başarı Ölçütü 2.2.2 Duraklat, Durdur, Gizle (Pause, Stop, Hide)
- Ticari Reklam ve Haksız Ticari Uygulamalar Yönetmeliğinde Değişiklik Yapılmasına Dair Yönetmelik (Resmî Gazete, 1 Temmuz 2026, sayı 33297; 14. madde)
- slayt
- ana-sayfa
- tasarim
- donusum


