Shopify Liquid İle Özel Bildirim ve Pop-up Tasarımları Nasıl Yapılır?

Shopify Liquid Nedir?

Shopify Liquid, Shopify mağazalarının şablonlarını oluşturmak için kullanılan açık kaynaklı bir şablonlama dilidir. HTML, CSS ve JavaScript ile birlikte çalışarak mağaza sayfalarınızı özelleştirmenize olanak tanır.

Bildirim ve Pop-up Tasarımlarının Önemi

Özel bildirimler ve pop-up’lar, ziyaretçilerin dikkatini çekmek, kampanyalarınızı duyurmak ve kullanıcı etkileşimini artırmak için kullanılır. Doğru tasarlandığında satışları ve müşteri memnuniyetini artırır.

Shopify Liquid ile Bildirim Oluşturma Adımları

Basit bir bildirim oluşturmak için Liquid değişkenleri ve koşullu ifadeleri kullanabilirsiniz. Örneğin, sepetinizde belirli bir ürün olduğunda kullanıcıya özel mesaj göstermek için:

{% if cart.items.size > 0 %}
  <div class="notification">Sepetinizde ürün var! Özel indirimlerden yararlanın.</div>
{% endif %}

Bu kod, kullanıcı sepetine ürün eklediğinde bildirim gösterir.

Pop-up Tasarımı İçin Temel Kod Örnekleri

Pop-up’lar için Liquid ile birlikte JavaScript kullanarak dinamik tasarımlar oluşturabilirsiniz:

<div id="popup" class="popup hidden">
  <h3>Özel Kampanya!</h3>
  <p>Üyelik oluşturun ve %10 indirim kazanın.</p>
  <button id="close-popup">Kapat</button>
</div>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
setTimeout(function() {
document.getElementById(‘popup’).classList.remove(‘hidden’);
}, 3000);
document.getElementById(‘close-popup’).addEventListener(‘click’, function() {
document.getElementById(‘popup’).classList.add(‘hidden’);
});
});
</script>

Bu örnek, sayfa yüklendikten 3 saniye sonra bir pop-up gösterir ve kullanıcı kapatma düğmesi ile kapatabilir.

Kişiselleştirme ve Koşullu Görüntüleme

Shopify Liquid ile kullanıcıya özel içerik göstermek için müşteri verilerini kullanabilirsiniz. Örneğin, giriş yapmış kullanıcıya özel mesaj:

{% if customer %}
<div class=“welcome-message”>Hoş geldiniz, {% raw %}{% endraw %}{{ customer.first_name }}{% raw %}{% endraw %}!</div>
{% else %}
<div class=“welcome-message”>Üye olun, özel fırsatları kaçırmayın!</div>
{% endif %}

Koşullar sayesinde pop-up ve bildirimlerinizi hedef kitlenize göre optimize edebilirsiniz.

Performans ve Kullanıcı Deneyimi İpuçları

• Pop-up gösterim sıklığını sınırlayın, kullanıcıyı rahatsız etmeyin.
• Mobil uyumlu tasarımlar tercih edin.
• Yükleme sürelerini optimize edin.
• Net ve kısa mesajlar kullanın.

Sıkça Sorulan Sorular

Blogun sonunda bulunan FAQ bölümüne göz atabilirsiniz.