Mobilde farklı bir görsel kullanabilir miyim?

Evet. Bir mobil görsel ekleyin; 750px altında masaüstü görselinin yerini alır ve her biri tema düzenleyicide belirlediğiniz odak noktasını kullanır. Mobil görsel yoksa masaüstü görseli sığacak şekilde kırpılır.

Parlak bir fotoğrafta metni nasıl okunur tutarım?

Katman opaklığını artırın (yüzde 0 ile 90 arası, istediğiniz renkte) ya da içerik kutusunu kendi arka plan ve metin rengi olan dolu bir karta çevirin.

"Adapt to image" yüksekliği ne yapar?

Banner sabit bir yükseklik yerine yüklenen görselin şeklini alır; mobil görsel varsa mobilde onun oranlarını kullanır. Metin bu şekilden uzunsa banner metni sığdıracak kadar büyür.

Bannerın tamamı bir bağlantı olabilir mi?

Evet. İki düğme etiketini de boş bırakın ve banner bağlantısını doldurun; görselin tamamı tek bir bağlantı olur ve ekran okuyucular için başlıkla etiketlenir.

Sayfayı yavaşlatır mı?

Bölüm hiç JavaScript içermez. Sayfadaki ilk iki bölümden biri olduğunda görsel hemen ve yüksek fetch önceliğiyle yüklenir; daha aşağıdaysa lazy-load ile yüklenir.

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.

Kategori: Hero ve bannerlar
Kullanım yeri: Ana sayfa, Koleksiyon, Açılış sayfaları
Okuduğu veri: Yalnızca içerik
Boyut: 27 KB, JavaScript yok
Lisans: MIT, müşteri işlerinde ücretsiz

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

Kısaca

Hero banner, tam genişlikte bir görselin üzerine üst başlık, başlık, metin ve en fazla iki düğme yerleştiren ücretsiz bir Shopify bölümüdür. Ayrı bir mobil görsel, ayarlanabilir bir katman, masaüstünde dokuz ve mobilde üç içerik konumu ve cihaza göre yükseklik sunar; Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Sezonluk bir seçki ya da yeni bir koleksiyon için ana sayfa açılışı
Bir açılış sayfasının ya da koleksiyon şablonunun en üstünde kampanya bannerı
Düğmesiz, bir indirime ya da lookbook’a bağlanan tek tıklanabilir görsel banner

Tema düzenleyicide

Üst başlık, başlık, metin; başlık etiketi (H1–H3 ya da paragraf) ve boyutu
Her biri kendi odak noktasına sahip ayrı masaüstü ve mobil görsel
Katman rengi ve opaklığı
Cihaza göre yükseklik: küçük, orta, büyük, tam ekran ya da görsele uyum
İçerik konumu: masaüstünde 9 konum, mobilde üst/orta/alt ve hizalama
İçerik kutusu: yok ya da kendi renkleri olan dolu bir kart; içerik azami genişliği
İki düğme (dolu, çerçeveli ya da metin bağlantısı, isteğe bağlı yeni sekme) ya da tüm banner için tek bağlantı
Köşe yuvarlaklığıyla tam ya da sayfa genişliği; arka plan, metin ve düğme renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği (anchor ID), yükleme animasyonu

Dosyalar

sections/lib-hero-banner.liquid

İndir

Kodu görün

lib-hero-banner.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

Mobilde farklı bir görsel kullanabilir miyim?: Evet. Bir mobil görsel ekleyin; 750px altında masaüstü görselinin yerini alır ve her biri tema düzenleyicide belirlediğiniz odak noktasını kullanır. Mobil görsel yoksa masaüstü görseli sığacak şekilde kırpılır.
Parlak bir fotoğrafta metni nasıl okunur tutarım?: Katman opaklığını artırın (yüzde 0 ile 90 arası, istediğiniz renkte) ya da içerik kutusunu kendi arka plan ve metin rengi olan dolu bir karta çevirin.
"Adapt to image" yüksekliği ne yapar?: Banner sabit bir yükseklik yerine yüklenen görselin şeklini alır; mobil görsel varsa mobilde onun oranlarını kullanır. Metin bu şekilden uzunsa banner metni sığdıracak kadar büyür.
Bannerın tamamı bir bağlantı olabilir mi?: Evet. İki düğme etiketini de boş bırakın ve banner bağlantısını doldurun; görselin tamamı tek bir bağlantı olur ve ekran okuyucular için başlıkla etiketlenir.
Sayfayı yavaşlatır mı?: Bölüm hiç JavaScript içermez. Sayfadaki ilk iki bölümden biri olduğunda görsel hemen ve yüksek fetch önceliğiyle yüklenir; daha aşağıdaysa lazy-load ile yüklenir.

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