Mobil ziyaretçiler e-ticarette her şeydir: hızlı gezinme, kolay sepet erişimi, hesap ve menüye tek dokunuş… İşte bu noktada mobil uygulamalardan alışık olduğumuz “Sticky Bottom Navigation” (altta sabit menü) dönüşüm oranlarını olumlu etkileyen küçük ama güçlü bir iyileştirmedir.
Bu rehberde, İkas ve Shopify sitenize ekstra uygulama kurmadan, yalnızca bir script ile mobilde altta sabit bir menü eklemeyi anlatıyorum. Hazır kodu yapıştırıp çalıştırabileceğiniz gibi, menü öğelerini ve tasarımını da dilediğiniz gibi özelleştirebilirsiniz.
Sticky Bottom Navigation Nedir ve Neden Önemli?
Sticky Bottom Navigation, mobilde ekranın alt kısmında sabit duran ve kullanıcıya şu avantajları sağlayan bir navigasyon sistemidir:
- Anasayfa / Koleksiyon / Menü / Hesap / Sepet gibi kritik sayfalara tek dokunuş
- Mobilde “geri–ileri” yerine uygulama hissi ve daha akıcı deneyim
- Sepete erişim kolaylaştığı için daha düşük terk oranı
- Kategoriye hızlı dönüş ile daha fazla ürün görüntüleme
- Kurulumu çok hızlı, bakım maliyeti düşük
Bu Rehberde Ne Yapacağız?
Aşağıdaki özelliklere sahip bir mobil alt menü oluşturacağız:
- Sadece mobilde görünür (768px üstü otomatik gizlenir)
- Sayfanın altında sabit durur (sticky/fixed)
- İkon + metin yapısı ile modern görünüm
- Menü butonuna basınca, sitenin orijinal menüsünü tetikler (İkas/tema menüsüne dokunmadan)
1) Kurulum: Script’i Nereye Eklemeliyim?
İkas için
İkas panelinde şu yolu izleyin:
Satış Kanalları → Eklentiler → Scriptler → Script Ekle
- Script İsmi:
Mobil Alt Menü(veya dilediğiniz bir isim) - Script İçeriği: Bu yazıdaki kodu yapıştırın
- Kaydedin ve mağazanızı mobilde yenileyin.
Shopify için (uygulamasız yöntem)
Shopify’da bunu şu yöntemlerle ekleyebilirsiniz:
- Online Store → Themes → Edit Code
theme.liquiddosyasında</body>kapanışından hemen önce ekleyin
veya
- Shopify tema ayarlarında “Custom code / Custom JS” alanı varsa oradan ekleyin.
Not: Shopify’da link yapınız
collections/...veyaaccount/login,cartgibi zaten standarttır. Menü tetikleme kısmı temaya göre değişebilir.
2) Hazır Kod: Mobil Alt Menüyü Ekleyin
Aşağıdaki script, hem tasarımı hem HTML’i hem de menü tetiklemeyi tek yerde toplar. İkas Scriptler alanına ya da Shopify’da tema dosyanıza ekleyebilirsiniz.
Tavsiye: İlk kurulumda kodu aynen kullanın, çalıştığını gördükten sonra menü linklerini özelleştirin.
<script>
document.addEventListener("DOMContentLoaded", function() {
// 1. CSS Stillerini Olustur
var style = document.createElement('style');
style.innerHTML = `
/* Mobil Bar Genel Tasarim */
.ikas-custom-mobile-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #ffffff;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 99999;
font-family: 'Inter', sans-serif;
border-top: 1px solid #f1f1f1;
}
/* Link kutusu */
.ikas-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: #555555;
font-size: 10px;
flex: 1;
padding: 5px 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Ikonlar */
.ikas-nav-item svg {
width: 24px;
height: 24px;
margin-bottom: 4px;
fill: none;
stroke: #555555;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Hover/Aktif Renkler */
.ikas-nav-item:hover, .ikas-nav-item.active {
color: #2e7d32;
}
.ikas-nav-item:hover svg, .ikas-nav-item.active svg {
stroke: #2e7d32;
}
/* Masaustunde Gizle */
@media (min-width: 768px) {
.ikas-custom-mobile-nav {
display: none !important;
}
}
body {
padding-bottom: 60px;
}
`;
document.head.appendChild(style);
// 2. HTML Yapisini Olustur
var navBarHTML = `
<div class="ikas-custom-mobile-nav">
<a href="/" class="ikas-nav-item">
<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
<span>Anasayfa</span>
</a>
<a href="/collections/ozel-url" class="ikas-nav-item">
<svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span>Ozel URL</span>
</a>
<div id="trigger-mobile-menu" class="ikas-nav-item">
<svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
<span>Menü</span>
</div>
<a href="/account/login" class="ikas-nav-item">
<svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<span>Hesabım</span>
</a>
<a href="/cart" class="ikas-nav-item">
<svg viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
<span>Sepetim</span>
</a>
</div>
`;
document.body.insertAdjacentHTML('beforeend', navBarHTML);
// 3. Menü Tetikleme Fonksiyonu
setTimeout(function() {
var triggerBtn = document.getElementById('trigger-mobile-menu');
if(triggerBtn) {
triggerBtn.addEventListener('click', function(e) {
e.preventDefault();
// İkas tema menüsünü tetikle
var originalMenuBtn = document.querySelector('#header .left button');
if(originalMenuBtn) {
originalMenuBtn.click();
triggerBtn.style.color = "#2e7d32";
} else {
console.log('Hata: Orijinal menü butonu bulunamadı. Lütfen site yapısını kontrol edin.');
}
});
}
}, 1000);
});
</script>3) Kodun Mantığı: Neyi Nereye Ekliyor?
Bu script 3 şey yapıyor:
A) Stil (CSS) Ekler
ikas-custom-mobile-nav sınıfı ile mobilde alt menüyü sabitler.
Ayrıca body { padding-bottom: 60px; } ile menünün sayfa içeriğini kapatmasını engeller.
B) Menü HTML’i Oluşturur
Menü linkleri direkt HTML olarak body’nin en altına eklenir:
/→ Anasayfa/collections/ozel-url→ Örnek koleksiyon/account/login→ Hesabım/cart→ Sepet
C) “Menü” Butonunu Orijinal Menüye Bağlar
Orta kısımda “Menü” itemi bir link değil, tetikleyicidir:
var originalMenuBtn = document.querySelector('#header .left button');
originalMenuBtn.click();Bu sayede, tema menüsünü bozmadan “menüyü aç” davranışını alt menüye taşıyoruz.
4) Menü Linklerini Kendi Sitenize Göre Özelleştirin
Kodda şu satırları kendi koleksiyonlarınıza göre değiştirin:
<a href="/collections/ozel-url" class="ikas-nav-item">Örnek alternatifler:
/collections/yeni-gelenler/collections/indirim/pages/iletisim/pages/hakkimizda
İkas’ta URL yapısı mağazanıza göre değişebilir. En doğrusu, ilgili sayfaya gidip tarayıcıdan URL’yi kopyalamaktır.
5) Shopify’da Menü Butonu Çalışmazsa (Çok Önemli)
Shopify temalarında menü butonunun seçicisi farklı olabilir. Eğer “Menü” tıklayınca hiçbir şey olmuyorsa:
- Mobilde siteyi açın
- Sağ tık > İncele (veya Safari/Chrome devtools)
- Menü ikonunun butonunu seçip class/ID’sini bulun
- Şu satırı ona göre güncelleyin:
var originalMenuBtn = document.querySelector('#header .left button');Örnek Shopify temalarında olabilecek seçiciler:
button[aria-controls="MobileMenu"].header__icon--menudetails[open] summary(bazı temalarda)
6) Test: Doğru Çalıştığını Nasıl Anlarım?
Mobilde şunları kontrol edin:
- Menü alt kısımda sabit mi?
- Anasayfa / Sepet / Hesabım linkleri açılıyor mu?
- Menü butonu tıklanınca orijinal menü açılıyor mu?
- Sayfanın en altına indiğinizde içerik menünün altına saklanmıyor mu?
Eğer içerik menünün altında kalıyorsa padding-bottom değerini yükseltebilirsiniz:
body { padding-bottom: 70px; } 
