Kombini satın al bölümünden farkı ne?

Kombini satın al, en çok altı işaretli tek büyük bir fotoğraf ve yanında bir ürün listesidir. Bu bölüm ise her birinde en çok üç işaret bulunan bir fotoğraf sırasıdır; göstermek istediğiniz birkaç sahne olduğunda idealdir.

İşaretleri nasıl yerleştiririm?

Her fotoğraf, üç ürün ve her biri için yüzde cinsinden yatay ve dikey konum içeren bir bloktur. Mobil kırpım farklıysa mobil konumları açıp ayrı olarak ayarlayın.

Kendiliğinden kayıyor mu?

Hayır. Sıra yalnızca müşteri kaydırdığında ya da düğmeleri kullandığında hareket eder. İşaretlerin nabız animasyonu kapatılabilir ve hareketin azaltılmasını isteyen ziyaretçiler için her zaman kapalıdır.

İşaretler, ürün adını etiket olarak taşıyan gerçek düğmelerdir; kart Esc ile kapanır ve odağı geri verir, sıra klavyeyle kaydırılabilir ve her ürün, fotoğrafın altında düz bir bağlantı olarak da yer alır. Ekran okuyucuların duyduğu her kelime bir ayardır.

Ürün etiketli karusel

Kaydırılabilir bir sırada yaşam tarzı fotoğrafları: her birinde ürün kartı açan en çok üç işaret, her fotoğrafın altında da düz ürün bağlantıları.

Kategori: Görsel ve video
Kullanım yeri: Ana sayfa, Koleksiyon, Açılış sayfaları, Lookbook
Okuduğu veri: Her fotoğrafta işaretlediğiniz ürünler
Boyut: 38 KB, küçük bir betik içerir
Lisans: MIT, müşteri işlerinde ücretsiz

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

Kısaca

Ürün etiketli karusel, birkaç yaşam tarzı fotoğrafını kaydırılabilir bir sırada gösteren ve her fotoğrafa en çok üç ürün işareti (hotspot) koyan ücretsiz bir Shopify bölümüdür. Bir işaret, ürünün görseli, fiyatı ve bağlantısıyla küçük bir kart açar; her fotoğraftaki ürünler ayrıca altında bağlantı olarak listelenir, bu yüzden JavaScript olmadan da çalışır. Sıra parmakla, dokunmatik yüzeyle, klavyeyle ya da önceki ve sonraki düğmeleriyle kaydırılır; kendiliğinden hiç hareket etmez. Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Ana sayfada, her parçası satın alınabilen oda oda bir lookbook
Koleksiyon ya da açılış sayfasında, içindeki ürünlerle işaretlenmiş sezon kampanyası fotoğrafları
Doğrudan ürün sayfalarına götüren kombin ya da sofra düzeni fotoğrafları

Tema düzenleyicide

Fotoğraf blokları: masaüstü ve mobil görsel, açıklama, konumlarıyla üç ürün, isteğe bağlı mobil konumlar
Etiketi ve boyutuyla başlık, metin
Düzenlenebilir kelimeler: kart bağlantısı, önceki, sonraki, kapat, indirimli ve normal fiyat etiketleri
Fotoğraf genişliği (bir, kenardan görünen, iki buçuk), cihaza göre biçim, köşe yuvarlaklığı
İşaret stili (nokta, artı, numara), boyutu ve renkleri, nabız açık ya da kapalı
Sayfa ya da tam genişlik, cihaza göre başlık hizalaması
Arka plan rengi ya da gradyanı, metin, vurgu, kart, kart metni ve indirim renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği (anchor ID)

Dosyalar

sections/lib-shoppable-carousel.liquid

İndir

Kodu görün

lib-shoppable-carousel.liquid dosyasını açın

snippets/lib-image.liquid

İndir

Kodu görün

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

Sade Liquid, CSS ve küçük bir betikle 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

Kombini satın al bölümünden farkı ne?: Kombini satın al, en çok altı işaretli tek büyük bir fotoğraf ve yanında bir ürün listesidir. Bu bölüm ise her birinde en çok üç işaret bulunan bir fotoğraf sırasıdır; göstermek istediğiniz birkaç sahne olduğunda idealdir.
İşaretleri nasıl yerleştiririm?: Her fotoğraf, üç ürün ve her biri için yüzde cinsinden yatay ve dikey konum içeren bir bloktur. Mobil kırpım farklıysa mobil konumları açıp ayrı olarak ayarlayın.
Kendiliğinden kayıyor mu?: Hayır. Sıra yalnızca müşteri kaydırdığında ya da düğmeleri kullandığında hareket eder. İşaretlerin nabız animasyonu kapatılabilir ve hareketin azaltılmasını isteyen ziyaretçiler için her zaman kapalıdır.
Erişilebilir mi?: İşaretler, ürün adını etiket olarak taşıyan gerçek düğmelerdir; kart Esc ile kapanır ve odağı geri verir, sıra klavyeyle kaydırılabilir ve her ürün, fotoğrafın altında düz bir bağlantı olarak da yer alır. Ekran okuyucuların duyduğu her kelime bir ayardı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.

Görsel ve video
Video
Shopify, YouTube ya da Vimeo videosu: sayfa içi oynatıcı, sessiz arka plan döngüsü ya da lightbox açan kapak görseli. Oynatılana kadar hiçbir şey yüklenmez.
Görsel ve video
Video galerisi
Erişilebilir bir lightbox’ta açılan video kapaklarından bir ızgara. Shopify, YouTube ya da Vimeo; oynat’a basılana kadar üçüncü taraf hiçbir şey yüklenmez.
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.