Kaç görsel ekleyebilirim?

Birden üçe kadar; her biri tema düzenleyicide sırasını değiştirebileceğiniz bir bloktur. Üç görselde ilki en büyüğüdür, diğer ikisi onun üzerine biner; iki görselde çapraz olarak üst üste gelirler; tek görsel ise görsel alanının tamamını doldurur.

Kolaj telefonlarda da çalışıyor mu?

Evet, ama üst üste binme olmadan: 750px’in altında ilk görsel tam genişlikte, diğerleri altında yan yana durur; küçük ekranda hiçbir öğe diğerini örtmez. Metin kartını görsellerden önce ya da sonra gösterebilir, her görsele ayrı bir mobil sürüm verebilirsiniz.

Alternatif metin (alt) nereden geliyor?

Shopify’ın Dosyalar bölümünde her görsele girdiğiniz metinden; bir kez yazmanız yeterlidir. Ekran okuyucular görselleri blok sırasıyla, ardından metin kartını okur.

Kart görsellerin üzerine binebilir mi?

Evet. "Card overlaps images on desktop" ayarı kartı kolajın üzerine 160px’e kadar kaydırır; 0 ise kartı görsellerin yanında tutar. Kart fotoğrafların önünde durur ve kendi arka plan rengini korur, böylece metin her zaman okunaklı kalır.

Görsel kolaj

Başlık, metin ve düğmeli bir kartın yanında üst üste binen iki ya da üç fotoğraf; Hakkımızda sayfalarına uygun. Mobilde düzenli ızgara, Liquid ve CSS.

Kategori: İçerik ve hikâye anlatımı
Kullanım yeri: Hakkımızda, 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

Görsel kolaj, iki ya da üç fotoğrafı üst üste bindirerek bir kolaj oluşturan ve yanına üst başlık, başlık, metin ve düğmeden oluşan bir metin kartı yerleştiren ücretsiz bir Shopify bölümüdür. Görseller solda ya da sağda durur, masaüstünde kart görsellerin üzerine taşabilir; mobilde fotoğraflar kartın üstünde ya da altında düzenli bir ızgaraya dizilir (ilki tam genişlikte, diğerleri yan yana). Her görselin kendi mobil sürümü ve odak noktası vardır. Online Store 2.0 temaları için JavaScript kullanmadan, yalnızca Liquid ve CSS ile yazılmıştır.

Örnek içerikli demo

Ne zaman kullanılır

Hakkımızda sayfasında atölyeyi, malzemeleri ve paketleme masasını marka hikâyesinin yanında gösteren bir alan
Ana sayfada birkaç yaşam tarzı fotoğrafı ve bir bağlantıyla yeni bir koleksiyonu tanıtmak
Açılış sayfasında, tam bir galeriye gerek kalmadan bir ürünün nasıl yapıldığını anlatmak

Tema düzenleyicide

Metin kartı: üst başlık, başlık (H1–H3 ya da paragraf etiketi, dört boyut), zengin metin ve bir düğme (dolu, çerçeveli ya da metin bağlantısı, isteğe bağlı yeni sekme)
Her biri masaüstü ve mobil görselli, odak noktalı bir ila üç görsel bloğu
Masaüstünde görseller solda ya da sağda, 0–160px kart taşması, köşe yuvarlaklığı
Mobilde sıralama (önce görseller ya da önce metin), sayfa ya da tam genişlik, cihaza göre metin hizalaması
Arka plan rengi ya da gradyanı (görseller arasındaki çerçeve de bu renktir), metin, vurgu, vurgu üzerindeki metin ve kart renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği (anchor ID), kaydırınca yükselerek belirme

Dosyalar

sections/lib-image-collage.liquid

İndir

Kodu görün

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

Kaç görsel ekleyebilirim?: Birden üçe kadar; her biri tema düzenleyicide sırasını değiştirebileceğiniz bir bloktur. Üç görselde ilki en büyüğüdür, diğer ikisi onun üzerine biner; iki görselde çapraz olarak üst üste gelirler; tek görsel ise görsel alanının tamamını doldurur.
Kolaj telefonlarda da çalışıyor mu?: Evet, ama üst üste binme olmadan: 750px’in altında ilk görsel tam genişlikte, diğerleri altında yan yana durur; küçük ekranda hiçbir öğe diğerini örtmez. Metin kartını görsellerden önce ya da sonra gösterebilir, her görsele ayrı bir mobil sürüm verebilirsiniz.
Alternatif metin (alt) nereden geliyor?: Shopify’ın Dosyalar bölümünde her görsele girdiğiniz metinden; bir kez yazmanız yeterlidir. Ekran okuyucular görselleri blok sırasıyla, ardından metin kartını okur.
Kart görsellerin üzerine binebilir mi?: Evet. "Card overlaps images on desktop" ayarı kartı kolajın üzerine 160px’e kadar kaydırır; 0 ise kartı görsellerin yanında tutar. Kart fotoğrafların önünde durur ve kendi arka plan rengini korur, böylece metin her zaman okunaklı kalı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.

İçerik ve hikâye anlatımı
Özellik kartları
İkon, başlık ve metinli iki ile dört sütun kart. Masaüstünde imleci yumuşak bir ışıltı izler; dokunmatik ekranlarda kartlar ışıltısız görünür.
İçerik ve hikâye anlatımı
Nasıl çalışır
Abonelik, siparişe özel üretim ya da hizmetler için bir çizgiyle bağlanan numaralı, simgeli adımlar: masaüstünde yan yana, mobilde alt alta; düğme eklenebilir.
İçerik ve hikâye anlatımı
Görsel ve metin
Başlık, metin, en fazla dört ikonlu madde ve iki düğmenin yanında görsel. Görselin genişliği, yönü ve şekli ayarlanır; metin görselle örtüşen kartta durabilir.