Sayfayı yavaşlatır mı?

Hayır. Sayfayla birlikte hiçbir oynatıcı yüklenmez, yalnızca geç yüklenen (lazy load) kapak görselleri gelir. YouTube, Vimeo ya da Shopify oynatıcısı, müşteri bir videoya tıklayınca eklenir ve lightbox kapanınca kaldırılır; bu da oynatmayı durdurur.

YouTube ve Vimeo çerez bırakıyor mu?

Müşteri bir videoyu oynatmadan önce hayır. Oynatıldığında YouTube videoları YouTube’un gizlilik geliştirilmiş modu olan youtube-nocookie.com’dan, Vimeo videoları ise Do Not Track açıkken oynar. Oynatıcılar çalışmaya başladıktan sonra ziyaretçiden onay almanız gerekip gerekmediği, satış yaptığınız pazara bağlıdır; bölüm oynatıcıları asla kendiliğinden yüklemez.

Lightbox erişilebilir mi?

Videonun başlığıyla etiketlenmiş yerleşik bir modal penceredir. Açıkken sayfanın geri kalanı kullanılamaz; Esc, kapat düğmesi ya da karanlık alana tıklamak onu kapatır ve odak açtığınız videoya döner. Oynat ve kapat etiketleri birer ayardır; değiştirebilir ya da çevirebilirsiniz.

JavaScript olmadan ne oluyor?

Her kapak normal bir bağlantı olarak çalışır: Shopify videosu kendi dosyasını açar, YouTube ya da Vimeo videosu kendi sitesinde açılır.

YouTube ve Vimeo videoları için kapak görseli gerekiyor mu?

Evet, her bloğa bir tane ekleyin; Shopify’da barındırılan videolar kapak boşsa kendi önizleme görsellerini kullanır. Kapağın oynayan videoyla uyumlu olması için videonun kendisinden bir kare kullanın.

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.

Kategori: Görsel ve video
Kullanım yeri: Ana sayfa, Hakkımızda, Ürün, Açılış sayfaları
Okuduğu veri: Shopify’da barındırılan videolar ya da YouTube/Vimeo bağlantıları
Boyut: 22 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

Video galerisi, birkaç videoyu kapak görsellerinden oluşan bir ızgarada, başlıkları ve süre gibi isteğe bağlı bir açıklamayla gösteren ve tıklanan videoyu bir lightbox’ta oynatan ücretsiz bir Shopify bölümüdür. Her video bir bloktur: Shopify’a yüklenmiş bir video ya da bir YouTube veya Vimeo bağlantısı. Oynatıcı yalnızca tıklanınca oluşturulur (YouTube youtube-nocookie.com üzerinden, Vimeo Do Not Track ile) ve lightbox kapanınca kaldırılır; yani sayfayla birlikte hiçbir üçüncü taraf oynatıcı yüklenmez. Lightbox, Esc, kapat düğmesi ya da dışarıya tıklamayla kapanan ve odağı tıklanan videoya geri veren yerleşik bir modal penceredir. Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Bir ürün grubuna ait kullanım, bakım ya da kombin videolarını tek sayfada toplamak
Hakkımızda sayfasında atölyenizin perde arkası videoları
Açılış sayfasında kampanya ya da lansman filmlerinden bir galeri

Tema düzenleyicide

Başlık (H1–H3 ya da paragraf etiketi, dört boyut) ve giriş metni
Video blokları: Shopify’da barındırılan video ya da YouTube/Vimeo bağlantısı, kapak görseli, başlık ve isteğe bağlı açıklama
Masaüstünde iki ila dört, mobilde bir ya da iki sütun; kapak biçimi (16:9, kare, 4:5) ve köşe yuvarlaklığı
Ekran okuyucular için düzenlenebilir oynat ve kapat etiketleri
Sayfa ya da tam genişlik, cihaza göre başlık hizalaması
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 (anchor ID), kaydırınca yükselerek belirme

Dosyalar

sections/lib-video-gallery.liquid

İndir

Kodu görün

lib-video-gallery.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

Sayfayı yavaşlatır mı?: Hayır. Sayfayla birlikte hiçbir oynatıcı yüklenmez, yalnızca geç yüklenen (lazy load) kapak görselleri gelir. YouTube, Vimeo ya da Shopify oynatıcısı, müşteri bir videoya tıklayınca eklenir ve lightbox kapanınca kaldırılır; bu da oynatmayı durdurur.
YouTube ve Vimeo çerez bırakıyor mu?: Müşteri bir videoyu oynatmadan önce hayır. Oynatıldığında YouTube videoları YouTube’un gizlilik geliştirilmiş modu olan youtube-nocookie.com’dan, Vimeo videoları ise Do Not Track açıkken oynar. Oynatıcılar çalışmaya başladıktan sonra ziyaretçiden onay almanız gerekip gerekmediği, satış yaptığınız pazara bağlıdır; bölüm oynatıcıları asla kendiliğinden yüklemez.
Lightbox erişilebilir mi?: Videonun başlığıyla etiketlenmiş yerleşik bir modal penceredir. Açıkken sayfanın geri kalanı kullanılamaz; Esc, kapat düğmesi ya da karanlık alana tıklamak onu kapatır ve odak açtığınız videoya döner. Oynat ve kapat etiketleri birer ayardır; değiştirebilir ya da çevirebilirsiniz.
JavaScript olmadan ne oluyor?: Her kapak normal bir bağlantı olarak çalışır: Shopify videosu kendi dosyasını açar, YouTube ya da Vimeo videosu kendi sitesinde açılır.
YouTube ve Vimeo videoları için kapak görseli gerekiyor mu?: Evet, her bloğa bir tane ekleyin; Shopify’da barındırılan videolar kapak boşsa kendi önizleme görsellerini kullanır. Kapağın oynayan videoyla uyumlu olması için videonun kendisinden bir kare kullanın.

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
Ü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ı.
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.
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.