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

Evet. Bir mobil görsel ekleyin; 750px altında kendi odak noktasıyla gösterilir ve mobil görsel şekli (uyum, kare, dikey, yatay ya da kemer) masaüstünden ayrı ayarlanır. Mobil görsel yoksa masaüstü görseli her yerde kullanılır.

Kaç ikonlu madde ekleyebilirim?

En fazla dört. Her birinde sekiz yerleşik çizgi ikondan biri ya da kendi küçük görseliniz ve kısa bir metin satırı vardır. Gövde metninin altında bir liste olarak yazdırılırlar.

Örtüşen kart nasıl çalışır?

Metin kutusu kart olarak ayarlandığında kart, 990px ve üzeri ekranlarda görselin üzerine 160px’e kadar kayabilir. Bunun altında görsel ve kart alt alta dizilir; mobilde önce görselin mi metnin mi geleceğini siz seçersiniz.

JavaScript kullanır mı?

Hayır. İsteğe bağlı belirme animasyonu CSS scroll-driven animation kullanır; yalnızca bunu destekleyen tarayıcılarda çalışır ve ziyaretçi azaltılmış hareket tercih ettiğinde atlanır. Bölüm sayfadaki ilk iki bölümden biriyse görseli hemen yüklenir; daha aşağıdaysa lazy-load ile yüklenir.

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.

Kategori: İçerik ve hikâye anlatımı
Kullanım yeri: Ana sayfa, Ürün, Koleksiyon, Hakkımızda, Her sayfa
Okuduğu veri: Yalnızca içerik
Boyut: 29 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 ve metin, bir görseli başlık, zengin metin, kısa bir ikon listesi ve en fazla iki düğmenin yanına yerleştiren ücretsiz bir Shopify bölümüdür. Görsel her iki tarafta genişliğin üçte birini, yarısını ya da üçte ikisini kaplayabilir, metin görselle örtüşen bir kartta durabilir; Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Ana sayfada ya da Hakkımızda sayfasında marka hikâyesi veya atölye tanıtımı
Malzemeyi, bakımı ya da bir ürünün nasıl yapıldığını anlatan ürün sayfası bloğu
Yaşam tarzı fotoğrafı ve ilgili koleksiyonlara bağlantılarla koleksiyon sayfası girişi

Tema düzenleyicide

Üst başlık, başlık, başlık etiketi ve boyutu, zengin metin
Her biri kendi odak noktasına sahip masaüstü ve mobil görsel; kemer dahil cihaza göre şekil
Üçte bir, yarım ya da üçte iki genişlikte solda ya da sağda görsel; köşe yuvarlaklığı
Metin kutusu: yok ya da kart; kart rengi ve masaüstünde görselle örtüşme
En fazla 4 ikonlu madde: yerleşik ikon ya da özel görsel, kısa metin
İki düğme: dolu, çerçeveli ya da metin bağlantısı, isteğe bağlı yeni sekme
Cihaza göre metin hizalaması, dikey konum, mobilde sıra, sayfa ya da tam genişlik
Arka plan rengi ya da gradyan, metin, vurgu ve vurgu üzerindeki metin renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği, kaydırınca belirme

Dosyalar

sections/lib-image-with-text.liquid

İndir

Kodu görün

lib-image-with-text.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 gösterebilir miyim?: Evet. Bir mobil görsel ekleyin; 750px altında kendi odak noktasıyla gösterilir ve mobil görsel şekli (uyum, kare, dikey, yatay ya da kemer) masaüstünden ayrı ayarlanır. Mobil görsel yoksa masaüstü görseli her yerde kullanılır.
Kaç ikonlu madde ekleyebilirim?: En fazla dört. Her birinde sekiz yerleşik çizgi ikondan biri ya da kendi küçük görseliniz ve kısa bir metin satırı vardır. Gövde metninin altında bir liste olarak yazdırılırlar.
Örtüşen kart nasıl çalışır?: Metin kutusu kart olarak ayarlandığında kart, 990px ve üzeri ekranlarda görselin üzerine 160px’e kadar kayabilir. Bunun altında görsel ve kart alt alta dizilir; mobilde önce görselin mi metnin mi geleceğini siz seçersiniz.
JavaScript kullanır mı?: Hayır. İsteğe bağlı belirme animasyonu CSS scroll-driven animation kullanır; yalnızca bunu destekleyen tarayıcılarda çalışır ve ziyaretçi azaltılmış hareket tercih ettiğinde atlanır. Bölüm sayfadaki ilk iki bölümden biriyse görseli hemen 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.

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