Mobilde farklı bir görsel gösterebilir miyim?

Evet. Bir mobil görsel ekleyin; 750px’ten dar ekranlarda gösterilir ve her görsel tema düzenleyicide belirlediğiniz odak noktasını korur. Mobil görsel yoksa masaüstü görseli her yerde kullanılır.

Başlık H1 mi olmalı?

Yalnızca hero sayfanın ana başlığıysa. Başlık etiketi ayarı H1, H2, H3 ya da paragraf seçenekleri sunar ve varsayılan H2’dir; böylece temanızın zaten ürettiği bir başlıkla yarışmaz.

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, Shopify’ın ekranın ilk görünen kısmındaki en büyük görseli lazy-load etmeme önerisine uygun olarak, lazy-load ile yüklenir.

Hangi temalarda çalışır?

JSON şablonları kullanan temalarda (Online Store 2.0). Bölüm kendi CSS’ini ve renk ayarlarını getirir, yazı tiplerini temanızdan alır.

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

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

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

Kısaca

İki sütunlu hero, bir başlığı, destek metnini ve en fazla iki düğmeyi bir görselin yanına, isteğe bağlı istatistiklerle yerleştiren ücretsiz bir Shopify bölümüdür. Kendi odak noktası olan ayrı bir mobil görsel alır, boşluk ve hizalamayı cihaza göre ayarlar; Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Yeni bir koleksiyon ya da marka mesajı için ana sayfa açılışı
Kampanya ya da ürün serisi açılış sayfası
Metnin yanında görsel gereken Hakkımızda, Toptan satış ya da başka bir sayfa şablonunun üst kısmı

Tema düzenleyicide

Rozet, başlık, metin; başlık etiketi (H1–H3) ve boyutu
Her biri kendi odak noktasına sahip ayrı masaüstü ve mobil görsel
Görsel solda ya da sağda, cihaza göre görsel şekli, mobilde önce metin ya da görsel
İki düğme: dolu, çerçeveli ya da metin bağlantısı, isteğe bağlı yeni sekme
En fazla 3 istatistik bloğu
Cihaza göre metin hizalaması, sayfa ya da tam genişlik
Arka plan rengi ya da gradyan, metin ve vurgu renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği
Yükleme animasyonu açma/kapama

Dosyalar

sections/lib-hero-split.liquid

İndir

Kodu görün

lib-hero-split.liquid dosyasını açın

snippets/lib-button.liquid

İndir

Kodu görün

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

snippets/lib-image.liquid

İndir

Kodu görün

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

shadcn/ui hero blocks kalıbından uyarlandı; sade Liquid ve CSS ile yeniden yazıldı.

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 gösterebilir miyim?: Evet. Bir mobil görsel ekleyin; 750px’ten dar ekranlarda gösterilir ve her görsel tema düzenleyicide belirlediğiniz odak noktasını korur. Mobil görsel yoksa masaüstü görseli her yerde kullanılır.
Başlık H1 mi olmalı?: Yalnızca hero sayfanın ana başlığıysa. Başlık etiketi ayarı H1, H2, H3 ya da paragraf seçenekleri sunar ve varsayılan H2’dir; böylece temanızın zaten ürettiği bir başlıkla yarışmaz.
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, Shopify’ın ekranın ilk görünen kısmındaki en büyük görseli lazy-load etmeme önerisine uygun olarak, lazy-load ile yüklenir.
Hangi temalarda çalışır?: JSON şablonları kullanan temalarda (Online Store 2.0). Bölüm kendi CSS’ini ve renk ayarlarını getirir, yazı tiplerini temanızdan alı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
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 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.