Shopify Ürün Sayfanıza Ücretsiz Geri Sayım Zamanlayıcısı Ekleyin!

26 Şubat 2025 Emre Şahin

Aciliyet duygusu oluşturmak ve potansiyel olarak satışlarınızı artırmak mı istiyorsunuz? Ürün sayfanıza bir geri sayım zamanlayıcısı eklemek tam da ihtiyacınız olan şey olabilir.

Bu yazımızda, Shopify mağazanıza basit ve özelleştirilebilir bir geri sayım zamanlayıcısın nasıl ekleneceğini göstereceğiz. Bu zamanlayıcı müşterilere aynı gün teslimat için, sipariş vermek adına ne kadar zamanları kaldığını gösterecektir.

Önemli! Temanızda herhangi bir değişiklik yapmadan önce yedeğini alın.

Adım 1: HTML ve Liquid'i ekleyin

İlk olarak zamanlayıcımız için HTML yapısını oluşturalım. Bunu tema özelleştiricinizdeki bir Liquid bloğuna eklemelisiniz.

Şöyle görünmesi gerekir:

Liquid

<p>Order in the next <span id="countdown"></span> for same day dispatch.</p>

</div>

Liquidi istediğiniz yere konumlandırabilirsiniz. Biraz stil ve işlevsellikten yoksun olduğu için endişelenmeyin, bunu daha sonra düzenleyeceğiz.

Adım 2: Zamanlayıcınızı Şekillendirin

Şimdi zamanlayıcınızın hoş görünmesini sağlamak için basit bir CSS ekleyelim.

Bunu temanızın CSS dosyasına veya tema özelleştiricisinin CSS bölümüne ekleyebilirsiniz:

css

.countdown-container {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  margin: 20px 0;
  background-color: #f9f9f9;
}

#countdown {
  font-weight: bold;
  color: #ff4500;
}

Adım 3: JavaScript'i ekleyin

Şimdi zamanlayıcının çalışmasını sağlayan JavaScript'i ekleyelim. Tema varlıklarınızda countdown-timer.js adında bir JavaScript dosyası oluşturun.

Daha sonra aşağıdaki kodu ekleyelim ve kaydedelim :

Javascript

function updateCountdown() {
  const now = new Date();
  const cutoffTime = new Date(now);
  cutoffTime.setHours(15, 0, 0, 0); // Set cutoff time to 3:00 PM

  if (now > cutoffTime) {
    cutoffTime.setDate(cutoffTime.getDate() + 1);
  }

  const timeLeft = cutoffTime - now;
  const hours = Math.floor(timeLeft / (1000 * 60 * 60));
  const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

  const countdownElement = document.getElementById('countdown');
  if (countdownElement) {
    countdownElement.textContent = `${hours}h ${minutes}m ${seconds}s`;
  }
}

setInterval(updateCountdown, 1000);
updateCountdown(); // Initial call to set the countdown immediately


Bu JavaScript dosyasını temanıza eklemeyi unutmayın, genellikle ürün şablonu (örneğin main-product.liquid veya product.liquid. 
Eğer bulamazsanız, theme.liquid'inize ekleyebilirsiniz). 
Bunu temanızın dosyasına aşağıdaki satırı ekleyerek yapabilirsiniz layout/theme.liquid:

Liquid

Zamanlayıcınızı Özelleştirme

Bu zamanlayıcı her gün 15:00'e geri sayım yapacak şekilde ayarlanmıştır. Bu saati değiştirmek isterseniz, setHours()JavaScript'teki işlevi değiştirmeniz yeterlidir. Örneğin, 14:00'e ayarlamak için şunu değiştirirsiniz:

javascript

cutoffTime.setHours(15, 0, 0, 0);

ile

javascript

cutoffTime.setHours(14, 0, 0, 0);

Zamanlayıcı, ziyaretçinin yerel saat dilimini kullanır. Belirli bir saat dilimini kullanmanız gerekiyorsa, JavaScript'i belirli bir saat dilimini kullanacak şekilde değiştirmeniz gerekir.

Artık geri sayım zamanlayıcısı ürünlerinizde görünür durumdadır.

Bu geri sayım sayacını ürün sayfalarınıza ekleyerek, müşterilerinize aynı gün gönderim için net bir son tarih veriyorsunuz. Bu, onlara satın alma işlemlerini tamamlamaları için ihtiyaç duydukları itici gücü verebilecek bir aciliyet duygusu yaratabilir.

Bu blog yazımızda bahsedilen hiçbir marka ile #işbirliğimiz yoktur. İyi satışlar diliyoruz! .. 🧑🏻‍💻 😊