Bir kart hangi görseli ve başlığı kullanır?

Kartta özel bir görsel ya da başlık belirlemediyseniz koleksiyonun öne çıkan görselini ve başlığını; belirlediyseniz bunlar önceliklidir. Ürün sayısı koleksiyondan gelir ve kapatılabilir.

Mobilde nasıl görünür?

Tek sütun, iki sütun ya da kaydırılabilir bir satır seçersiniz. Satır, bölümün içinde yakalama noktalarıyla yana kayar; sayfanın kendisi yatay kaymaz. 750px ile 989px arasında ızgara en fazla üç sütun gösterir.

JavaScript gerekir mi?

Hayır. Bölüm yalnızca HTML ve CSS’ten oluşur. Üzerine gelince yakınlaştırma bir CSS geçişidir ve azaltılmış hareket tercih eden ziyaretçilerde kapanır.

Bir kartta koleksiyon seçilmemişse ne olur?

Tema düzenleyicide örnek bir başlıkla yer tutucu bir görsel gösterir. Canlı mağazada koleksiyonu, görseli ve başlığı olmayan bir kart gösterilmez; yalnızca özel başlığı ya da görseli olan bir kart bağlantısız gösterilir.

Görseller sayfayı yavaşlatır mı?

Bölüm sayfadaki ilk iki bölümden biriyse ilk satır hariç görseller lazy-load ile yüklenir. Her kart sabit bir görsel şekliyle yerini önceden ayırır; böylece görseller yüklenirken düzen kaymaz.

Koleksiyon kartları

Görsel, başlık, etiket ve ürün sayısıyla en fazla sekiz koleksiyon kartı. Metin görselin üstünde ya da altında, 2–5 sütun ya da mobilde kaydırılabilir satır.

Kategori: Ürün ve koleksiyon keşfi
Kullanım yeri: Ana sayfa, Koleksiyon, Açılış sayfaları
Okuduğu veri: Koleksiyonlar
Boyut: 28 KB, JavaScript yok
Lisans: MIT, müşteri işlerinde ücretsiz

Markdown olarak görüntüle ChatGPT’de aç Claude’da aç

Kısaca

Koleksiyon kartları, en fazla sekiz koleksiyonu başlık, isteğe bağlı etiket ve ürün sayısıyla görsel kartlar olarak gösteren ücretsiz bir Shopify bölümüdür. Her kart özel bir görsel ve başlık alabilir; mobil düzen tek sütun, iki sütun ya da kaydırılabilir bir satır olabilir ve Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Hero’nun altında ana sayfada "kategoriye göre alışveriş" satırı
Tüm koleksiyonlar sayfasının ya da sezonluk bir açılış sayfasının üst kısmı
Her kartta Yeni ya da Hediye gibi bir etiketle seçilmiş koleksiyonlara yönlendiren hediye rehberi

Tema düzenleyicide

Başlık, başlık etiketi ve boyutu, metin, başlığın yanında isteğe bağlı düğme
En fazla 8 kart: koleksiyon, özel görsel, özel başlık, etiket
Kart stili: görselin üstünde gradyan üzerinde metin ya da görselin altında metin
Görsel şekli (kare, dikey, uzun, yatay), köşe yuvarlaklığı, kart metni hizalaması
Kendi ifadenizle ürün sayısını açma/kapama
Sütunlar: masaüstünde 2–5; mobilde 1 sütun, 2 sütun ya da kaydırılabilir satır; kart aralığı
Arka plan rengi ya da gradyan, metin, vurgu, kart, katman ve katman metni renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği
Üzerine gelince görseli yakınlaştır

Dosyalar

sections/lib-collection-cards.liquid

İndir

Kodu görün

lib-collection-cards.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 ve CSS ile, JavaScript olmadan 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

Bir kart hangi görseli ve başlığı kullanır?: Kartta özel bir görsel ya da başlık belirlemediyseniz koleksiyonun öne çıkan görselini ve başlığını; belirlediyseniz bunlar önceliklidir. Ürün sayısı koleksiyondan gelir ve kapatılabilir.
Mobilde nasıl görünür?: Tek sütun, iki sütun ya da kaydırılabilir bir satır seçersiniz. Satır, bölümün içinde yakalama noktalarıyla yana kayar; sayfanın kendisi yatay kaymaz. 750px ile 989px arasında ızgara en fazla üç sütun gösterir.
JavaScript gerekir mi?: Hayır. Bölüm yalnızca HTML ve CSS’ten oluşur. Üzerine gelince yakınlaştırma bir CSS geçişidir ve azaltılmış hareket tercih eden ziyaretçilerde kapanır.
Bir kartta koleksiyon seçilmemişse ne olur?: Tema düzenleyicide örnek bir başlıkla yer tutucu bir görsel gösterir. Canlı mağazada koleksiyonu, görseli ve başlığı olmayan bir kart gösterilmez; yalnızca özel başlığı ya da görseli olan bir kart bağlantısız gösterilir.
Görseller sayfayı yavaşlatır mı?: Bölüm sayfadaki ilk iki bölümden biriyse ilk satır hariç görseller lazy-load ile yüklenir. Her kart sabit bir görsel şekliyle yerini önceden ayırır; böylece görseller yüklenirken düzen kaymaz.

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.

Ürün ve koleksiyon keşfi
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.
Ürün ve koleksiyon keşfi
Tamamlayıcı ürünler
Ürün sayfasında "Bununla iyi gider" kartları: Search & Discovery’de seçtiğiniz tamamlayıcı ürünler, hızlı sepete ekleme düğmesiyle. Ücretli uygulama gerekmez.
Ürün ve koleksiyon keşfi
Öne çıkan koleksiyon
Bir koleksiyonun ürün kartları ızgara ya da kaydırılabilir carousel olarak; üzerine gelince ikinci görsel, indirim ve tükendi rozetleri ve hızlı ekle düğmesi.