Sekmeli koleksiyonlar
Yeni gelenler, Çok satanlar, İndirim ya da istediğiniz koleksiyonlar tek bölümde, sekmeli ızgarada; her sekmede Tümünü gör bağlantısı. Erişilebilir sekmeler.
- Kategori
- Ürün ve koleksiyon keşfi
- Kullanım yeri
- Ana sayfa, Açılış sayfaları, Koleksiyon
- Okuduğu veri
- Koleksiyonlar ve ürünleri
- Boyut
- 39 KB, küçük bir betik içerir
- Lisans
- MIT, müşteri işlerinde ücretsiz
Kısaca
Sekmeli koleksiyonlar, birkaç koleksiyonu Yeni gelenler, Çok satanlar ve İndirim gibi sekmelerle tek bir ürün ızgarasında toplayan ücretsiz bir Shopify bölümüdür. Her sekme, bir koleksiyon seçip isteğe bağlı olarak etiket verdiğiniz bir bloktur; fiyat, rozetler ve isteğe bağlı hızlı sepete ekle düğmesi olan kartlarla en çok 16 ürün gösterir, sonuna da koleksiyona giden bir Tümünü gör bağlantısı eklenebilir. Tüm ürünler Liquid ile oluşturulur; arama motorları ve JavaScript’i kapalı müşteriler grupları alt alta görür, küçük bir betik de bunları klavyeyle kullanılabilen sekmelere dönüştürür. Online Store 2.0 temalarında uygulama olmadan çalışır.
Ne zaman kullanılır
- Üç ayrı öne çıkan koleksiyon bölümü yerine Yeni gelenler, Çok satanlar ve İndirim sekmelerinden oluşan tek bir ana sayfa bölümü
- Her bütçe ya da hediye alınacak kişi için ayrı bir sekmesi olan hediye rehberi açılış sayfası
- Alt grupları sekmelere ayrılmış bir koleksiyon sayfası (Kupalar, Tabaklar, Kaseler)
Tema düzenleyicide
- Başlık (H1–H3 ya da paragraf etiketi, üç boyut), giriş metni ve sekme listesinin adı
- Sekme blokları: koleksiyon ve isteğe bağlı etiket (en çok 6)
- Hap biçimli ya da alt çizgili sekmeler, her sekme için düğme stili seçilebilen Tümünü gör bağlantısı
- Sekme başına ürün sayısı (2–16), görsel biçimi, düz ya da kart stili, köşe yuvarlaklığı
- Satıcı, üzerine gelince ikinci görsel, hızlı sepete ekle, indirim ve tükendi rozetleri
- Masaüstünde (2–6) ve mobilde (1–2) sütun sayısı, mobilde ızgara ya da kaydırılabilir sıra
- Sayfa ya da tam genişlik, cihaza göre başlık ve sekme hizalaması
- Arka plan rengi ya da gradyanı, metin, vurgu, vurgu üzerindeki metin ve kart renkleri
- Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği (anchor ID), sekme değişince belirme
Dosyalar
sections/lib-collection-tabs.liquidsnippets/lib-product-card.liquidKodu görün
snippets/lib-image.liquidKodu görün
snippets/lib-button.liquidKodu görün
Sade Liquid, CSS ve küçük bir betikle yazıldı. Uygulama da bağımlılık da yok.
Temanıza nasıl eklenir
- Bölüm dosyasını temanızın sections klasörüne, listelediği snippet’leri de snippets klasörüne kopyalayın.
- Tema düzenleyicide Add section’ı (Bölüm ekle) seçin ve adı “Lib ·” ile başlayan bölümü ekleyin.
- Örnek metni mağazanızın kendi metniyle değiştirin, renkleri markanıza göre ayarlayın.
Sık sorulan sorular
- Kaç sekme ekleyebilirim?
- En çok altı. Her sekme, bir koleksiyon seçtiğiniz bir bloktur; kendi etiketinizi yazmazsanız koleksiyonun adı kullanılır. Yalnızca bir sekme eklerseniz bölüm, sekme listesi olmadan düz bir ürün ızgarası gösterir.
- Sekmeler erişilebilir mi?
- Evet. WAI-ARIA sekme kalıbını izler: sekme listesinde gerçek düğmeler vardır, ok tuşları, Home ve End ile sekmeler arasında gezinilir, seçili sekme ekran okuyucuya bildirilir ve her panel kendi sekmesiyle etiketlenir. Odak her zaman görünür.
- Arama motorları gizli sekmelerdeki ürünleri görür mü?
- Evet. Her sekmenin ürünleri sayfanın HTML’indedir; betik yalnızca seçili olmayan panelleri gizler. JavaScript olmadan gruplar kendi başlıklarıyla art arda görünür.
- Müşteriler ızgaradan sepete ekleyebilir mi?
- Evet, hızlı sepete ekle seçeneğini açmanız yeterli: tek varyantlı ürünlerde sepete ekle düğmesi (Shopify’ın kendi ürün formu) görünür; seçenekli ürünlerde "Seçenekleri belirle" bağlantısı ürün sayfasına götürür.
Yayınlamadan önce
- Demolardaki metinler örnek içeriktir. Yayımlamadan önce kendi mağazanızın bilgileriyle değiştirin.
- Hareketin azaltılmasını isteyen ziyaretçilerde animasyonlar kapalıdır.
- Her dosya burada yayımlanmadan önce Shopify Theme Check ile kontrol edilir.
Temanıza uyarlanmış bir sürüme ya da burada olmayan bir bölüme mi ihtiyacınız var? Şu sayfaya bakın: Shopify tema geliştirme.



