Bu rehberde, Shopify mağazanıza Sevgililer Günü efektini nasıl ekleyeceğinizi öğreneceksiniz.
Mağazanızı özel bir Sevgililer Günü temasına dönüştürmenize yardımcı olacak iki yöntemi ele aldık.
Yöntem 1: Kod gerektirmeyen bir Shopify uygulaması kullanmak (En kolay)
Yöntem 2: Özel kod çözümü
Şimdi her yöntemin nasıl çalıştığına yakından bakalım.
Shopify’ye Sevgililer Günü Efekti Ekleme: Adım Adım
Yöntem 1: Shopify Uygulaması Kullanma
Burada, tema kod dosyanızı düzenlemeden Sevgililer Günü efekti eklemek için MIT Festival Effects & Decor uygulamasını kullanacağız. İzlemeniz gereken basit adımlar şunlardır:
Adım 1: 3D Kalp Efektini Seçin
Adım 2: Tercihlerinizi Özelleştirin
Adım 3: Kaydedin ve Yayınlayın
Adım 1: 3D Kalp Efektini Seçin
MIT Festival Effect Pro uygulamasını yükleyip etkinleştirin. Ardından uygulama panelinden Effects > Create New > 3D Heart yolunu izleyin.
Tıklayan Kalpler, Saf Aşk, Kalp Dalgaları ve Parlayan Kalp gibi diğer Sevgililer Günü efektlerinden de herhangi birini seçebilirsiniz. Diğer efektleri ekleme süreci de aynıdır.
Adım 2: Tercihlerinizi Özelleştirin
Ardından, sağ taraftaki panelden efektinizin farklı sayfalarda ve farklı müşterilerde nasıl görüntüleneceğini kontrol etmek için özelleştirme ayarlarını yapın.
Aşağıdakileri yapılandırın:
- Efekt adını ekleyin (yalnızca dahili kullanım içindir).
- Durumu aktif olarak ayarlayın.
- Efektin gösterileceği sayfaları seçin.
- Efektin gösterileceği ülkeleri seçin.
- Masaüstünde, mobilde veya her ikisinde birden gösterme seçeneğini belirleyin.
- Başlangıç ve bitiş tarihi belirleyerek efekti zamanlayın.
Adım 3: Kaydedin ve Görüntüleyin
Kaydet (Save) butonuna tıklayın ve işlemi tamamlayın. Ardından Sevgililer Günü efektini kontrol edin ve gerekirse değişiklikler yapın.
Yöntem 2: Özel Kod
Kendin yap (DIY) yaklaşımını tercih ediyorsanız, düşen kalpler kod parçasını Shopify temanıza manuel olarak ekleyebilirsiniz. İzlemeniz gereken adımlar şunlardır:
Adım 1: Bir Snippet Oluşturun
Adım 2: Kodu Yapıştırın
Adım 3: theme.liquid Dosyasını Düzenleyin
Adım 4: Efekti Ön Yüzde Görüntüleyin
Adım 1: Bir Snippet Oluşturun
Online Store > Themes bölümüne gidin. Ardından üç noktaya (…) tıklayın ve Edit Code seçeneğini seçin.
Aşağı kaydırarak Snippets bölümünü bulun ve Add a new snippet butonuna tıklayın. Snippet adını valentines-falling-hearts olarak belirleyin.
Adım 2: Kodu Yapıştırın
Aşağıdaki kodu, yeni oluşturduğunuz valentines-falling-hearts.liquid snippet dosyasının içine yapıştırın:
<style>
.heart-particle {
position: fixed;
top: -10%;
user-select: none;
pointer-events: none;
z-index: 9999;
/* Removed rotation from animation for a "straight" look */
animation-name: fall-straight;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes fall-straight {
0% {
transform: translateY(0vh);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(110vh);
opacity: 0;
}
}
</style>
<script>
function createHeart() {
const heart = document.createElement('div');
heart.innerHTML = '❤️';
heart.classList.add('heart-particle');
// Position randomly horizontally, but falls straight down
heart.style.left = Math.random() * 100 + 'vw';
// Increased duration (8-12 seconds) makes them fall much slower
heart.style.animationDuration = Math.random() * 4 + 8 + 's';
// Keeping size consistent for a cleaner "proper" look
heart.style.fontSize = '20px';
document.body.appendChild(heart);
// Increased timeout to match the slower animation
setTimeout(() => {
heart.remove();
}, 12000);
}
// Slower creation rate (one heart every 800ms) to avoid clutter
setInterval(createHeart, 800);
</script>
Adım 3: theme.liquid Dosyasını Düzenleyin
Ardından tema düzenleyicisinde Layout klasörünü açın ve theme.liquid dosyasına tıklayın.
Dosyanın en altına kadar kaydırın ve aşağıdaki satırı </body> etiketinden hemen önce yapıştırın:
Kaydet (Save) butonuna tıklayın ve işlemi tamamlayın.
Adım 4: Efekti Ön Yüzde Görüntüleyin
Kod parçası yöntemiyle düşen kalpler efektinin görünümü bu şekilde olacaktır.
Hangi Yöntemi Seçmelisiniz?
Shopify’ye festival efektleri eklemek için en uygun yöntem, teknik bilginize ve ne kadar zaman ayırmak istediğinize bağlıdır.
Uygulama yöntemi kodsuz ve kolay bir çözüm sunarken, manuel kurulum teknik uzmanlık gerektirir; doğru yapılmadığında temanıza zarar verme riski vardır.
Seçenek 1: Shopify Uygulaması Kullanma
MIT Festival Effects & Decor gibi bir uygulama kullanmak birçok avantaj sunar:
- Kar Yağışı, Diwali ve Cadılar Bayramı dahil olmak üzere 50’den fazla mevsimsel efekte erişim sağlar.
- Koda dokunmadan özel imleçler, imleç izleri ve açılır pencereleri kolayca eklemenize olanak tanır.
- Tüm aktif efektleri doğrudan Shopify yönetim panelinizden önizleyebilir ve yönetebilirsiniz.
Seçenek 2: Özel Kod Kullanma
Manuel kodlama bir alternatiftir, ancak çoğu mağaza sahibi için önemli sınırlamalar içerir:
- Bir efekti her değiştirmek istediğinizde tema dosyalarını düzenlemeniz gerekir; bu da teknik bilgisi olmayan kullanıcılar için zorlayıcı olabilir.
- Her bir efekt için özel kod yazmanız gerekebilir veya bunu sizin yerinize yapması için bir geliştirici tutmanız gerekebilir.
- Özel kod, belirli tasarım gereksinimlerini karşılamak için çoğu zaman kapsamlı düzenlemeler ister.
.
.
Bu blog yazımızda bahsedilen hiçbir marka ile #işbirliğimiz yoktur. İyi satışlar diliyoruz! .. 🧑🏻💻 😊
