Video nereden geliyor?

Videoyu bölümün video ayarından Shopify’a yüklersiniz; yani Shopify’da barındırılır, YouTube ya da Vimeo oynatıcısı yüklenmez. Bölüm, Shopify’ın yüklemenizden ürettiği MP4 dosyalarından ekranın ihtiyacını aşmayan en büyüğünü seçer: masaüstünde en fazla 1920px, mobil videoda 1080px.

Mobilde farklı bir video kullanabilir miyim?

Evet. Bir mobil video ekleyin; 750px altında masaüstü videosunun yerine oynar ve masaüstü videosu telefonlarda hiç indirilmez. Mobil video yoksa masaüstü videosu her yerde oynar. Masaüstü ve mobil kapak görselleri de her biri kendi odak noktasıyla ayrı ayrı belirlenir.

Video sessizdir, dekoratiftir ve ekran okuyuculardan gizlenir. Bir video oynayabildiği sürece köşede bir duraklatma ve oynatma düğmesi durur; etiketlerini düzenleyicide değiştirebilirsiniz. Cihazı azaltılmış hareket isteyen ziyaretçiler kapak görselini görür ve videoyu oynat düğmesiyle başlatabilir.

Sayfamı yavaşlatır mı?

Kapak görseli her hero görseli gibi yüklenir (bölüm sayfanın üst kısmındaysa hemen). Video dosyası ancak bölüm ekrana geldiğinde istenir; sayfa kaydırılıp bölüm görünümden çıkınca ya da tarayıcı sekmesi gizlenince duraklar. Betik, kütüphane içermeyen küçük bir custom element’tir.

JavaScript kapalıysa ya da otomatik oynatma engellenirse ne olur?

Kapak görseli, üzerindeki metin ve düğmelerle yerinde kalır. Tarayıcı otomatik oynatmayı reddederse (örneğin veri tasarrufu modunda) düğme oynat konumuna geçer ve ziyaretçi videoyu kendisi başlatabilir.

Videolu hero

Metin ve düğmelerin arkasında tam genişlik, sessiz arka plan videosu; ayrı mobil video, kapak görselleri, duraklatma düğmesi. Video ekrana gelince yüklenir.

Kategori: Hero ve bannerlar
Kullanım yeri: Ana sayfa, Koleksiyon, Açılış sayfaları
Okuduğu veri: Shopify’da barındırılan video
Boyut: 34 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

Videolu hero, bir başlık, metin ve en fazla iki düğmenin arkasında Shopify’da barındırılan sessiz bir videoyu döngüyle oynatan ücretsiz bir Shopify bölümüdür; mobil için isteğe bağlı ayrı bir video da ekleyebilirsiniz. Önce kapak görselleri görünür ve hareketin azaltılması istendiğinde yerinde kalır, duraklatma düğmesi her zaman oradadır ve video dosyası yalnızca bölüm ekrana geldiğinde yüklenir. Online Store 2.0 temalarında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Bir ürünün yapılışını, giyilişini ya da kullanımını gösteren ana sayfa açılışı
Başlığın arkasında kısa bir marka filmi olan kampanya ya da lansman sayfası
Ürün serisini kullanımda gösteren döngülü bir klipli koleksiyon sayfası başlığı

Tema düzenleyicide

Masaüstü ve mobil video (Shopify’da barındırılan), her biri kendi odak noktasına sahip masaüstü ve mobil kapak görseli
Ekran okuyucular için duraklat ve oynat düğmesi etiketleri
Katman rengi ve opaklığı
Üst başlık, başlık, metin; başlık etiketi (H1–H3 ya da paragraf) ve boyutu
En fazla 2 düğme bloğu: dolu, çerçeveli ya da metin bağlantısı, isteğe bağlı yeni sekme
Cihaza göre yükseklik: küçük, orta, büyük ya da tam ekran
İçerik konumu: masaüstünde 9 konum, mobilde üst/orta/alt ve hizalama; isteğe bağlı dolu içerik kutusu
Köşe yuvarlaklığıyla tam ya da sayfa genişliği; arka plan, metin, düğme ve kutu renkleri
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği (anchor ID), yüklemede metin animasyonu

Dosyalar

sections/lib-video-hero.liquid

İndir

Kodu görün

lib-video-hero.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, 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 nereden geliyor?: Videoyu bölümün video ayarından Shopify’a yüklersiniz; yani Shopify’da barındırılır, YouTube ya da Vimeo oynatıcısı yüklenmez. Bölüm, Shopify’ın yüklemenizden ürettiği MP4 dosyalarından ekranın ihtiyacını aşmayan en büyüğünü seçer: masaüstünde en fazla 1920px, mobil videoda 1080px.
Mobilde farklı bir video kullanabilir miyim?: Evet. Bir mobil video ekleyin; 750px altında masaüstü videosunun yerine oynar ve masaüstü videosu telefonlarda hiç indirilmez. Mobil video yoksa masaüstü videosu her yerde oynar. Masaüstü ve mobil kapak görselleri de her biri kendi odak noktasıyla ayrı ayrı belirlenir.
Erişilebilir mi?: Video sessizdir, dekoratiftir ve ekran okuyuculardan gizlenir. Bir video oynayabildiği sürece köşede bir duraklatma ve oynatma düğmesi durur; etiketlerini düzenleyicide değiştirebilirsiniz. Cihazı azaltılmış hareket isteyen ziyaretçiler kapak görselini görür ve videoyu oynat düğmesiyle başlatabilir.
Sayfamı yavaşlatır mı?: Kapak görseli her hero görseli gibi yüklenir (bölüm sayfanın üst kısmındaysa hemen). Video dosyası ancak bölüm ekrana geldiğinde istenir; sayfa kaydırılıp bölüm görünümden çıkınca ya da tarayıcı sekmesi gizlenince duraklar. Betik, kütüphane içermeyen küçük bir custom element’tir.
JavaScript kapalıysa ya da otomatik oynatma engellenirse ne olur?: Kapak görseli, üzerindeki metin ve düğmelerle yerinde kalır. Tarayıcı otomatik oynatmayı reddederse (örneğin veri tasarrufu modunda) düğme oynat konumuna geçer ve ziyaretçi videoyu kendisi başlatabilir.

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.

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.
Hero ve bannerlar
Hero banner
Üzerinde üst başlık, başlık, metin ve iki düğme olan tam genişlik görsel banner; ayrı mobil görsel, katman, dokuz içerik konumu ve cihaza göre yükseklik.
Hero ve bannerlar
Hero slayt gösterisi
Her birinin masaüstü ve mobil görseli, katmanı, metni ve düğmesi olan en fazla altı slaytlık tam genişlik hero; kaydırma, otomatik oynatma, ok ve noktalar.