Bu tatil sezonunda Shopify mağazanıza biraz festivallik katmak mı istiyorsunuz? Kar yağışı efekti, müşterilerinizi memnun eden ve yılbaşı satışlarını artıran bir kış harikası ortamı oluşturmanın en kolay yollarından biridir. Üstelik tamamen ücretsiz şekilde, 5 dakikadan kısa sürede mağazanıza ekleyebilirsiniz.
Bu blog yazımızda, Shopify mağazanıza tek bir kod satırıyla açıp kapatabileceğiniz, güzel ve hafif bir kar animasyonunu nasıl ekleyeceğinizi öğreneceksiniz.
Shopify Mağazanıza Neden Kar Efekti Eklemelisiniz?
Nasıl yapılır kısmına geçmeden önce, bu basit efektin online mağazanız için neden büyük bir fark yaratabileceğinden bahsedelim:
Festivallik bir alışveriş deneyimi oluşturur.
Tatiller sırasında müşteriler özel bir sezon atmosferi arar. Hafif bir kar efekti anında bu havayı verir ve mağazanızı daha davetkâr hale getirir.
Sitede kalma süresini artırır.
Müşterileri memnun eden görsel detaylar, onların sitede daha uzun süre gezinmesini sağlar bu da çoğu zaman daha fazla satış anlamına gelir.
Performansa sıfır etki yapar.
Eklediğimiz kar efekti son derece hafiftir; mağazanızı yavaşlatmaz veya sayfa hızınızı olumsuz etkilemez.
Kaldırması kolaydır.
Tatiller bittiğinde, efekti tek bir yorumu (comment) kaldırarak devre dışı bırakabilirsiniz. Karmaşık bir temizlik gerekmez.
Adım Adım: Kar Efekti Eklemek
Öncelikle küçük bir hatırlatma: Her ihtimale karşı mevcut temanızı yedeklemenizi öneririz.
Bunu hallettikten sonra işleme geçebiliriz.
Adım 1: Kar Efekti Snippet’ını Oluşturun
Öncelikle kar efekti için ayrı bir dosya oluşturacaksınız. Bu, kodunuzu düzenli tutar ve yönetimini kolaylaştırır.
1.Shopify yönetim panelinize giriş yapın
2.Online Store → Themes yolunu izleyin
3.Aktif temanızın “Özelleştir (Customize)” butonunun yanındaki üç noktaya (…) tıklayın
4. “Edit code” seçeneğini seçin.
5. Sol taraftaki panelde Snippets klasörünü bulun.
6.“Add a new snippet” (Yeni bir snippet ekle) butonuna tıklayın
7.Snippet adını snow-effect.liquid olarak belirleyin
8.Aşağıdaki kodu yapıştırın:
<canvas id="snow-canvas" style="position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;"></canvas>
<script>
(function() {
const canvas = document.getElementById('snow-canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const snowflakes = [];
for (let i = 0; i < 100; i++) {
snowflakes.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 3 + 1,
speed: Math.random() * 1 + 0.5,
wind: Math.random() * 0.5 - 0.25
});
}
function drawSnow() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.beginPath();
snowflakes.forEach(flake => {
ctx.moveTo(flake.x, flake.y);
ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
});
ctx.fill();
moveSnow();
requestAnimationFrame(drawSnow);
}
function moveSnow() {
snowflakes.forEach(flake => {
flake.y += flake.speed;
flake.x += flake.wind;
if (flake.y > canvas.height) {
flake.y = 0;
flake.x = Math.random() * canvas.width;
}
});
}
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
drawSnow();
})();
</script>
9.Save (Kaydet) butonuna tıklayın
Adım 2: Snippet’ı Temanıza Ekleyin
Şimdi tüm kar efektini kontrol eden tek bir satırı tema ana liquid dosyanıza ekleyeceksiniz.
- Aynı kod düzenleyicisinde Layout klasörünü bulun.
- theme.liquid dosyasına tıklayın.
- Sayfanın altlarına doğru ilerleyip </body> kapanış etiketini bulun (genellikle en alttadır).
- </body> etiketinin hemen üstüne şu satırı ekleyin:
{% render 'snow-effect' %}
Save (Kaydet) butonuna tıklayın
Hepsi bu kadar! Mağazanızı ziyaret ettiğinizde sitenizin tamamında nazikçe düşen güzel kar tanelerini görmelisiniz.
Kar Efektini Açıp Kapatma
Bu kurulumun en güzel yanı, kontrolünün son derece kolay olmasıdır. theme.liquid dosyasındaki tek bir kod satırıyla her şeyi yönetebilirsiniz.
Kar efektini AÇMAK için:
{% render 'snow-effect' %}
Kar efektini KAPATMAK için:
{%- comment -%}{% render 'snow-effect' %}{%- endcomment -%}
Render etiketini Liquid yorum etiketleriyle sarmanız yeterlidir; kar efekti anında kaybolur.
Herhangi bir dosyayı silmenize veya karmaşık değişiklikler yapmanıza gerek yoktur.
Kar Efektinizi Özelleştirme
Karın görünümünü ayarlamak mı istiyorsunuz? İşte snow-effect snippet’ında yapabileceğiniz bazı kolay değişiklikler:
-
Kar tanesi sayısını değiştirin:
(let i = 0; i < 100; i++)satırını bulun ve 100 sayısını istediğiniz bir sayı ile değiştirin. Daha yoğun kar için 150, daha hafif kar için 50 deneyin. -
Karın düşme hızını ayarlayın:
speed: Math.random() * 1 + 0.5satırını değiştirerek kar tanelerinin düşme hızını ayarlayabilirsiniz. Sayıları artırın → daha hızlı kar, azaltın → daha yavaş kar. -
Kar tanesi boyutunu değiştirin:
radius: Math.random() * 3 + 1satırını düzenleyerek kar tanelerini daha büyük veya küçük yapabilirsiniz. -
Kar rengini değiştirin:
ctx.fillStyle = 'white'satırını bulun ve'white'yerine istediğiniz bir renk girin; örneğin mavi tonlu kar için'#e6f2ff'.
Kar Efektini Ne Zaman Kullanmalı (ve Kaldırmalı)
Kar efektini açmak için en iyi zamanlar:
- Black Friday’den Cyber Monday’e kadar
- 1 Aralık – 25 Aralık arası
- Herhangi bir kış indirimi veya promosyonu
- Yılbaşı kutlamaları
Kapamanız gereken zamanlar:
- Tatillerden sonra (Ocak başı)
- Mevsimsel olmayan promosyonlar yürütüyorsanız
- Müşteri geri bildirimleri dikkat dağıtıcı olduğunu söylüyorsa
- Dikkat dağıtmanın istenmediği büyük satış dönemlerinde
Unutmayın, efekti birkaç saniyede açıp kapatabilirsiniz; bu yüzden zamanlamayla denemeler yapmaktan çekinmeyin.
Mağazanızı Tatil Döneminde Bir Üst Seviyeye Taşımak
Kar efekti, unutulmaz bir tatil alışveriş deneyimi yaratmanın yalnızca bir yoludur. İşte sezonluk mağazanızı geliştirebileceğiniz diğer yöntemler:
- Kar efektinizi tatil temalı banner ve promosyon grafiklerle birleştirerek tutarlı bir festivallik deneyim oluşturun.
- Ürün fotoğraflarınızı sezonluk aksesuar ve arka planlarla güncelleyin.
- Tatil indirimleri için geri sayım sayaçları eklemeyi düşünün; aciliyet hissi yaratır.
Önemli olan, müşterilerin alışveriş yaparken tatil ruhunu hissetmesini sağlayacak sürükleyici bir deneyim yaratmaktır. Düşen kar gibi küçük dokunuşlar, müşteri sadakati ve artan satışlara dönüşebilecek büyük bir duygusal etki yaratabilir.
Son Düşünceler
Shopify mağazanıza kar yağışı efekti eklemek karmaşık veya pahalı olmak zorunda değildir. Bu basit snippet yöntemiyle, mağazanızı rakiplerden ayıran keyifli bir tatil atmosferi yaratabilirsiniz; üstelik aylık uygulama bütçenize dokunmadan.
En iyi kısmı? Tam kontrol sizde. Festivallik bir hava istediğinizde açın, sezon bittiğinde kapatın ve markanıza tamamen uyacak şekilde özelleştirin.
Mağazanızda kar yağdırmaya hazır mısınız? Yukarıdaki adımları takip edin ve güzel kar taneleriyle birlikte tatil dönüşüm oranlarınızın arttığını izleyin.
Bu blog yazımızda bahsedilen hiçbir marka ile #işbirliğimiz yoktur. İyi satışlar diliyoruz! .. 🧑🏻💻 😊
