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.

Örnek içerikli demo

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.liquid
İndir
Kodu görün

lib-collection-tabs.liquid dosyasını açın

snippets/lib-product-card.liquid
İndir
Kodu görün

lib-product-card.liquid dosyasını açın

snippets/lib-image.liquid
İndir
Kodu görün

lib-image.liquid dosyasını açın

snippets/lib-button.liquid
İndir
Kodu görün

lib-button.liquid dosyasını açın

Sade Liquid, CSS ve küçük bir betikle yazıldı. Uygulama da bağımlılık da yok.

Temanıza nasıl eklenir

  1. Bölüm dosyasını temanızın sections klasörüne, listelediği snippet’leri de snippets klasörüne kopyalayın.
  2. Tema düzenleyicide Add section’ı (Bölüm ekle) seçin ve adı “Lib ·” ile başlayan bölümü ekleyin.
  3. Ö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.

Geliştirmek istediğiniz bir şey mi var? Gelin, birlikte konuşalım.

Aynı anda sınırlı sayıda proje alıyoruz.

Gencer KarakayaShopify mühendisi

Proje özetinizi bir mühendis okur; size e-postayla yanıt veririz.