Başlık, açıklama ve görsel nereden geliyor?

Shopify yönetim panelindeki koleksiyondan (Ürünler > Koleksiyonlar). Koleksiyon şablonunda bölüm, sayfanın koleksiyonunu kullanır; diğer sayfalarda koleksiyonu siz seçersiniz. İsterseniz bölüm ayarlarından koleksiyon görseli yerine kendi masaüstü ve mobil görsellerinizi kullanabilirsiniz.

Koleksiyon sayfasında koleksiyonun adı sayfanın ana başlığıdır; bu hem arama motorlarına hem ekran okuyuculara yardımcı olur. Temanızın koleksiyon şablonunda zaten bir H1 varsa başlık etiketini H2 yapın, böylece sayfada tek bir H1 kalır.

Koleksiyonun görseli yoksa ne olur?

Banner yalnızca metin olarak görünür: başlık, ürün sayısı ve açıklama bölümün arka plan renginin üzerinde yer alır. Böylece fotoğrafı olmayan koleksiyonlar da düzgün bir başlık alanına kavuşur.

Ürün sayısı kendiliğinden güncellenir mi?

Evet. Sayı, sayfa oluşturulurken Shopify’ın koleksiyon için verdiği products_count değerinden okunur. Tekil ve çoğul ürün kelimeleri de çevirebileceğiniz ayarlardır.

Koleksiyon bannerı

Koleksiyon sayfaları için başlık, açıklama, görsel ve ürün sayısı. Metin görselin üzerinde ya da yanında durur; içerik yolu (breadcrumb) isteğe bağlıdır.

Kategori: Hero ve bannerlar
Kullanım yeri: Koleksiyon, Açılış sayfaları, Her sayfa
Okuduğu veri: Sayfanın koleksiyonu ya da seçtiğiniz bir koleksiyon
Boyut: 23 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 bannerı, koleksiyon sayfalarının en üstü için ücretsiz bir Shopify bölümüdür. Bilgileri doğrudan koleksiyonun kendisinden okur; böylece başlık, açıklama, görsel ve ürün sayısı Shopify yönetim panelindekiyle hep aynı kalır. Bunları görselin üzerinde, yanında ya da yalnızca metin olarak gösterebilir, isterseniz bir içerik yolu (breadcrumb) da ekleyebilirsiniz. Ayrı mobil görsel, dokuz metin konumu ve varsayılan H1 başlığıyla, Online Store 2.0 temalarında uygulama ya da JavaScript gerekmeden eksiksiz bir koleksiyon başlığı sunar.

Örnek içerikli demo

Ne zaman kullanılır

Her koleksiyon sayfasında, koleksiyonun kendi başlığı, açıklaması ve görseliyle kendiliğinden dolan bir üst alan
Kendi fotoğrafı ve ayrı mobil kırpımı olan sezonluk ya da kampanya koleksiyonu
Koleksiyon seçiciyle belirli bir koleksiyona yönlendiren kategori açılış sayfası

Tema düzenleyicide

Koleksiyon seçici (koleksiyon şablonlarında boş bırakılır), başlık etiketi (varsayılan H1) ve boyutu
Koleksiyon açıklaması, düzenlenebilir kelimeleriyle ürün sayısı, ana sayfa bağlantılı içerik yolu ve ekran okuyucu etiketi
Koleksiyon görseli ya da kendi masaüstü ve mobil görseliniz
Metin görselin üzerinde (cihaza göre dokuz konum, karartma oranı), görsel metnin yanında (solda ya da sağda) ya da yalnızca metin
Küçük, orta ya da büyük yükseklik, sayfa ya da tam genişlik, cihaza göre metin hizalaması
Arka plan rengi ya da gradyanı, metin, görsel üzerindeki metin ve vurgu renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği (anchor ID), yüklenirken yavaş yakınlaşma ve belirme

Dosyalar

sections/lib-collection-banner.liquid

İndir

Kodu görün

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

snippets/lib-image.liquid

İndir

Kodu görün

lib-image.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

Başlık, açıklama ve görsel nereden geliyor?: Shopify yönetim panelindeki koleksiyondan (Ürünler > Koleksiyonlar). Koleksiyon şablonunda bölüm, sayfanın koleksiyonunu kullanır; diğer sayfalarda koleksiyonu siz seçersiniz. İsterseniz bölüm ayarlarından koleksiyon görseli yerine kendi masaüstü ve mobil görsellerinizi kullanabilirsiniz.
Başlık neden H1?: Koleksiyon sayfasında koleksiyonun adı sayfanın ana başlığıdır; bu hem arama motorlarına hem ekran okuyuculara yardımcı olur. Temanızın koleksiyon şablonunda zaten bir H1 varsa başlık etiketini H2 yapın, böylece sayfada tek bir H1 kalır.
Koleksiyonun görseli yoksa ne olur?: Banner yalnızca metin olarak görünür: başlık, ürün sayısı ve açıklama bölümün arka plan renginin üzerinde yer alır. Böylece fotoğrafı olmayan koleksiyonlar da düzgün bir başlık alanına kavuşur.
Ürün sayısı kendiliğinden güncellenir mi?: Evet. Sayı, sayfa oluşturulurken Shopify’ın koleksiyon için verdiği products_count değerinden okunur. Tekil ve çoğul ürün kelimeleri de çevirebileceğiniz ayarlardı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.

Hero ve bannerlar
Hero banner
Üzerinde üst başlık, başlık, metin ve iki düğme olan tam genişlik görsel banner; ayrı mobil görsel, katman, dokuz içerik konumu ve cihaza göre yükseklik.
Hero ve bannerlar
Hero slayt gösterisi
Her birinin masaüstü ve mobil görseli, katmanı, metni ve düğmesi olan en fazla altı slaytlık tam genişlik hero; kaydırma, otomatik oynatma, ok ve noktalar.
Hero ve bannerlar
İki sütunlu hero
İki sütunlu hero: rozet, başlık, destek metni, iki düğme, en fazla üç kısa istatistik ve iki yandan birinde görsel; mobil için ayrı görsel.