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.
- Kategori
- Görsel ve video
- Kullanım yeri
- Ana sayfa, Ürün, Hakkımızda, Açılış sayfaları
- Okuduğu veri
- Shopify videosu ya da YouTube / Vimeo bağlantısı
- Boyut
- 40 KB, küçük bir betik içerir
- Lisans
- MIT, müşteri işlerinde ücretsiz
Kısaca
Video, Shopify’da barındırılan bir videoyu ya da bir YouTube veya Vimeo bağlantısını sayfa içi oynatıcı, duraklatma düğmeli sessiz bir arka plan döngüsü ya da videoyu bir lightbox’ta açan kapak görseli olarak gösteren ücretsiz bir Shopify bölümüdür. Oynatıcı yalnızca oynatıldığında ya da arka plan videosu yakına kaydırıldığında oluşturulur ve YouTube youtube-nocookie.com’dan oynatılır. Online Store 2.0 temalarında uygulama olmadan çalışır.
Ne zaman kullanılır
- Ana sayfada ya da Hakkımızda sayfasında, kapak görselinden lightbox’ta açılan marka ya da yapım filmi
- Hero olarak bir başlık ve düğmenin arkasında sessiz, atmosferik bir döngü
- Ürün ya da açılış sayfasında sayfa içinde oynatılan ürün demosu veya nasıl yapılır klibi
Tema düzenleyicide
- Üst başlık, başlık, metin, tek düğme; başlık etiketi (H1–H3 ya da paragraf) ve boyutu
- Gösterim: sayfa içi oynatıcı, sessiz arka plan döngüsü ya da lightbox açan kapak görseli
- Shopify’da barındırılan video ya da YouTube / Vimeo bağlantısı, ekran okuyucular için video başlığı
- Masaüstü ve mobil için kapak görseli; metinli ya da yalnızca ikonlu oynat düğmesi
- Sayfa içi seçenekler: sessiz otomatik oynatma, sessiz başlat, kontroller; sayfa içi ve lightbox için döngü
- Cihaza göre şekil (16:9, 21:9, 4:3, 1:1, 9:16), sayfa ya da tam genişlik, köşe yuvarlaklığı
- Videonun üstünde ya da üzerinde metin, cihaza göre hizalama, katman rengi ve opaklığı
- Arka plan, metin, video üzerindeki 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
Dosyalar
sections/lib-video.liquidKodu görün
snippets/lib-image.liquidKodu görün
snippets/lib-button.liquidKodu görü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
- Video sayfayı yavaşlatır mı?
- Sayfayla birlikte hiçbir oynatıcı yüklenmez. Yalnızca kapak görseli yüklenir; video ya da iframe, ziyaretçi oynata bastığında, lightbox’ı açtığında ya da arka plan ve otomatik oynatılan videolarda bölüm görünüm alanına 200px yaklaştığında etkisiz bir şablondan oluşturulur.
- YouTube ve Vimeo için gizlilik dostu mu?
- YouTube gömmeleri youtube-nocookie.com kullanır, Vimeo gömmeleri dnt=1 (do not track) ekler. Sayfa içi (otomatik oynatmasız) ve lightbox oynatıcılar yalnızca oynatıldığında gömülür; böylece oynata hiç basmayan ziyaretçiler YouTube’a ya da Vimeo’ya hiç bağlanmaz. Arka plan ve otomatik oynatılan videolar bölüm yakına kaydırıldığında yüklenir.
- Azaltılmış hareket tercih eden ziyaretçilerde ne olur?
- Hiçbir şey otomatik oynatılmaz. Arka plan döngüleri ve sayfa içi otomatik oynatma kapak görselinde kalır; arka plan duraklat/oynat düğmesi videoyu ancak basıldığında başlatır.
- Klavye ve ekran okuyucu için erişilebilir mi?
- Oynat düğmesi, arka plan duraklat/oynat düğmesi ve lightbox kapat düğmesi, video başlığınızı içeren etiketlere sahip gerçek düğmelerdir. Lightbox yerel bir dialog’dur: odak içine taşınır; Esc, kapat düğmesi ya da dışarıya tıklamak onu kapatır, oynatıcı kaldırılır ve odak oynat düğmesine döner.
- Mobilde farklı bir şekil kullanabilir miyim?
- Evet. Masaüstü ve mobil ayrı ayrı 16:9, 21:9, 4:3, 1:1 ya da 9:16 alır ve ayrı bir mobil kapak görseli belirleyebilirsiniz. Arka plan videoları şekli dolduracak şekilde kırpılır.
- Metin videonun üzerinde durabilir mi?
- Evet, arka plan ve lightbox videolarında. Sayfa içi oynatıcılar kontrolleri asla örtmemesi için metni her zaman üstte gösterir. Metin video şeklinden uzunsa video alanı metni sığdıracak kadar büyü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.
Diğer bölümler
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 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.
