Kaç kutu ekleyebilirim, nasıl dizilirler?

İki ila dört. Mozaik düzende üç ya da dört kutu varsa ilki solda uzun durur; dört kutuda sonuncusu sağ altta boydan boya uzanır. Eşit sıra düzeni kutuları yan yana dizer (dört kutuda tablette her satıra iki kutu düşer). Mobilde kutular alt alta dizilir ya da yana kaydırılır.

Mobilde farklı görseller kullanabilir miyim?

Evet. Her kutunun bir masaüstü görseli ve isteğe bağlı bir mobil görseli vardır; ikisi de Shopify’ın görsel düzenleyicisinde belirlediğiniz odak noktasını dikkate alır, böylece görselin ana konusu her ekran boyutunda kadrajda kalır.

Kutunun tamamı tıklanabiliyor mu?

Evet, kutuya bir bağlantı verdiyseniz: başlığı, metin satırı ve düğme etiketiyle kutunun tamamı tek bir bağlantıdır. Müşteriler kutunun her yerine dokunabilir, ekran okuyucular da tek ve anlaşılır bir bağlantı okur. Bağlantısız kutular, üzerinde metin olan düz görsellerdir.

Beyaz metin açık renkli fotoğraflarda da okunur mu?

Metnin bulunduğu kenardan yükselen bir gölge okunurluğu korur; gölgenin rengini ve yoğunluğunu (%0–90) bölüm genelinde bir kez belirlersiniz. Metin konumunu ise her kutu ve her cihaz için ayrı ayarlarsınız.

Görsel banner ızgarası

Mozaik ya da tek sıra halinde iki ila dört bağlantılı kampanya kutusu; her kutuda masaüstü ve mobil görsel, başlık ve düğme. Kutunun her yeri tıklanır.

Kategori: Hero ve bannerlar
Kullanım yeri: Ana sayfa, Açılış sayfaları, Koleksiyon
Okuduğu veri: Yalnızca içerik
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

Görsel banner ızgarası, kampanyaları ve kategori girişlerini iki ila dört bağlantılı kutuda bir araya getiren ücretsiz bir Shopify bölümüdür: kutular, biri uzun olan bir mozaik ya da eşit bir sıra halinde dizilir. Her kutuda odak noktası ayarlanabilen bir masaüstü ve bir mobil görsel, bir başlık, kısa bir metin satırı ve düğme görünümlü bir etiket bulunur; metin, her fotoğrafta okunabilsin diye yumuşak bir gölgenin üzerinde durur ve konumu cihaza göre ayrı ayarlanır. Bağlantı verdiğiniz kutu tek bir bağlantı olarak çalışır, yani kutunun her yeri tıklanabilir; mobilde kutular alt alta dizilir ya da yana kaydırılan bir sıraya dönüşür. Online Store 2.0 temaları için yazılmış, uygulama gerektirmeyen düz Liquid ve CSS’tir.

Örnek içerikli demo

Ne zaman kullanılır

Ana sayfada, hero’nun hemen altında üç dört ana kategoriye giriş
Sezon kampanyası: indirimler, yeni gelenler ve hediyeler tek bir mozaikte
Koleksiyon sayfasının üstünde, alt koleksiyonlara bağlantı veren bir giriş alanı

Tema düzenleyicide

Başlık (H1–H3 ya da paragraf etiketi, üç boyut) ve giriş metni
Kutu blokları (2–4): masaüstü ve mobil görsel, başlık, metin, düğme etiketi ve stili, bağlantı, yeni sekmede açma, cihaza göre metin konumu
Masaüstünde mozaik ya da eşit sıra, mobilde alt alta ya da kaydırılabilir sıra
Cihaza göre kutu yüksekliği, kutular arası boşluk, köşe yuvarlaklığı, kutu başlığı boyutu, gölge yoğunluğu
Sayfa ya da tam genişlik, cihaza göre başlık hizalaması
Arka plan rengi ya da gradyanı, metin, kutu metni, gölge, düğme ve düğme metni renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği (anchor ID), üzerine gelince görsel yakınlaşması

Dosyalar

sections/lib-image-banner-grid.liquid

İndir

Kodu görün

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

Kaç kutu ekleyebilirim, nasıl dizilirler?: İki ila dört. Mozaik düzende üç ya da dört kutu varsa ilki solda uzun durur; dört kutuda sonuncusu sağ altta boydan boya uzanır. Eşit sıra düzeni kutuları yan yana dizer (dört kutuda tablette her satıra iki kutu düşer). Mobilde kutular alt alta dizilir ya da yana kaydırılır.
Mobilde farklı görseller kullanabilir miyim?: Evet. Her kutunun bir masaüstü görseli ve isteğe bağlı bir mobil görseli vardır; ikisi de Shopify’ın görsel düzenleyicisinde belirlediğiniz odak noktasını dikkate alır, böylece görselin ana konusu her ekran boyutunda kadrajda kalır.
Kutunun tamamı tıklanabiliyor mu?: Evet, kutuya bir bağlantı verdiyseniz: başlığı, metin satırı ve düğme etiketiyle kutunun tamamı tek bir bağlantıdır. Müşteriler kutunun her yerine dokunabilir, ekran okuyucular da tek ve anlaşılır bir bağlantı okur. Bağlantısız kutular, üzerinde metin olan düz görsellerdir.
Beyaz metin açık renkli fotoğraflarda da okunur mu?: Metnin bulunduğu kenardan yükselen bir gölge okunurluğu korur; gölgenin rengini ve yoğunluğunu (%0–90) bölüm genelinde bir kez belirlersiniz. Metin konumunu ise her kutu ve her cihaz için ayrı ayarlarsınız.

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.