Shopify Focal Temasında Ürün Görseline Kalp İstek Listesi Simgesi Ekleme

{% comment %} Mevcut ürün görseli kodu {% endcomment %}

  {{ product.featured_media | image_url: width: 535 | image_tag: loading: 'lazy', sizes: '(min-width: 1200px) 360px, (min-width: 768px) 33vw, 50vw' }}
  
  {% comment %} İstek listesi kalp ikonu buraya eklenecek {% endcomment %}
  
    {% render 'icon-heart' %} {% comment %} Bu, temanızdaki mevcut kalp ikonu olabilir {% endcomment %}
  

Yukarıdaki kod bloğunda:

• : Bu div, ürün görselini ve kalp ikonunu sarmalayan ana kapsayıcıdır. İkonu görselin üzerinde konumlandırmak için bu div'in position: relative; stiline sahip olması önemlidir.
• : İstek listesi ikonumuz için bir buton elementi kullanmak, hem erişilebilirlik açısından daha iyidir hem de tıklanabilir bir alan sağlar. aria-label özelliği, ekran okuyucu kullanan kişiler için butonun ne işe yaradığını açıklar.
• {% render 'icon-heart' %}: Focal temasının (ve çoğu Shopify temasının) içinde, sık kullanılan ikonları render etmek için snippet'ler bulunur. icon-heart adında bir snippet varsa, bu kod otomatik olarak SVG kalp ikonunu çizecektir. Eğer temanızda böyle bir snippet yoksa veya farklı bir ikon kullanmak isterseniz, doğrudan bir SVG kodu ekleyebilir veya bir Font Awesome gibi harici bir ikon kütüphanesinden faydalanabilirsiniz.

Bu değişiklikleri kaydettikten sonra, büyük ihtimalle kalp ikonu henüz düzgün konumlandırılmamış olacaktır. İşte tam bu noktada CSS devreye giriyor.

Adım 2: Kalp İkonunu Stilize Etme (base.css veya theme.scss.liquid)

HTML yapısını oluşturduktan sonra, sıra geldi kalp ikonunu ürün görselinin sağ üst köşesine güzel bir şekilde yerleştirmeye ve ona çekici bir görünüm kazandırmaya. Bu adım için temanızın ana CSS dosyasını bulmanız gerekecek. Bu dosya genellikle assets/base.css, assets/theme.scss.liquid veya assets/custom.css gibi bir isimle bulunur. Shopify kod düzenleyicisinde "Assets" klasörünün altında arayabilirsiniz.

Bu CSS dosyasının en altına aşağıdaki kodları ekleyin:

/* İstek Listesi İkonu Stilleri */
.product-card__image-wrapper {
  position: relative; /* Kalp ikonunu bu div'e göre konumlandırmak için */
  overflow: hidden; /* İkonun dışarı taşmasını engellemek için */
}

.wishlist-icon {
  position: absolute; /* Üst elemana göre konumlandır */
  top: 10px; /* Üstten 10px boşluk */
  right: 10px; /* Sağdan 10px boşluk */
  background: rgba(255, 255, 255, 0.8); /* Yarı saydam beyaz arka plan */
  border: none; /* Kenarlık yok */
  border-radius: 50%; /* Dairesel şekil */
  width: 40px; /* Genişlik */
  height: 40px; /* Yükseklik */
  display: flex; /* İçindeki ikonu ortalamak için flexbox kullan */
  align-items: center; /* Dikeyde ortala */
  justify-content: center; /* Yatayda ortala */
  cursor: pointer; /* Fare üzerine gelince el işareti */
  z-index: 10; /* Diğer elementlerin üzerinde görünmesini sağla */
  transition: all 0.2s ease-in-out; /* Fare üzerine gelince yumuşak geçiş */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
}

.wishlist-icon:hover {
  background: #f00; /* Fare üzerine gelince kırmızı arka plan */
  color: white; /* Metin rengi beyaz (eğer metin varsa) */
}

.wishlist-icon svg { /* Temadaki icon-heart SVG'si için stil */
  fill: #333; /* İkonun iç rengi koyu gri */
  width: 20px; /* İkonun genişliği */
  height: 20px; /* İkonun yüksekliği */
  transition: fill 0.2s ease-in-out; /* Dolgu rengi için yumuşak geçiş */
}

.wishlist-icon:hover svg {
  fill: white; /* Fare üzerine gelince ikon rengi beyaz */
}

/* Mobil Uyumluluk İçin Medya Sorguları */
@media screen and (max-width: 768px) {
  .wishlist-icon {
    top: 5px; /* Mobil cihazlarda daha küçük boşluk */
    right: 5px; /* Mobil cihazlarda daha küçük boşluk */
    width: 35px; /* Mobil cihazlarda daha küçük ikon */
    height: 35px; /* Mobil cihazlarda daha küçük ikon */
  }
  .wishlist-icon svg {
    width: 18px; /* Mobil cihazlarda ikon boyutu */
    height: 18px; /* Mobil cihazlarda ikon boyutu */
  }
}

Yukarıdaki CSS kodları hakkında detaylı açıklamalar:

• .product-card__image-wrapper: Bu sınıf, kalp ikonumuzun konumlandırılacağı referans noktasıdır. position: relative; özelliği olmadan, .wishlist-icon sınıfına verdiğimiz position: absolute; doğru çalışmayacaktır.
• .wishlist-icon: Bu ana stil bloğu, butonun konumunu, boyutunu, şeklini (dairesel), arka plan rengini ve gölge efektini ayarlar. display: flex; ve align-items: center;, justify-content: center; kombinasyonu, ikonun buton içinde her zaman ortalanmasını sağlar. z-index: 10;, ikonun ürün görseli veya diğer elementlerin üzerinde görünmesini garantiler.
• .wishlist-icon:hover: Bu kısım, kullanıcı fareyi ikonun üzerine getirdiğinde uygulanacak stilleri tanımlar. Arka planın kırmızıya dönmesi ve metin/ikon renginin beyaza dönmesi gibi görsel geri bildirimler, kullanıcının etkileşimini artırır.
• .wishlist-icon svg: Eğer kalp ikonu bir SVG olarak render ediliyorsa (ki Focal teması için bu muhtemeldir), bu stil bloğu SVG'nin iç rengini (fill) ve boyutunu ayarlar.
• @media screen and (max-width: 768px): Bu bir medya sorgusudur ve mobil uyumluluk için çok önemlidir. Ekran genişliği 768 pikselden küçük olduğunda (yani çoğu mobil cihazda), ikonun boyutunu ve konumunu küçülterek küçük ekranlarda daha iyi görünmesini sağlarız. Bu, sitenizin farklı cihazlarda tutarlı ve kullanıcı dostu bir deneyim sunmasına yardımcı olur.

Bu CSS değişikliklerini kaydettikten sonra, mağazanızın ön yüzünü kontrol ettiğinizde, ürün görsellerinin sağ üst köşesinde zarif bir kalp ikonu görmeniz gerekmektedir. İkonun üzerine geldiğinizde renk değiştirdiğini de fark edeceksiniz.

Adım 3: Etkileşim ve İşlevsellik Ekleme (global.js veya custom.js)

Kalp ikonunu ekledik ve stil verdik, harika! Ancak şu an için sadece görsel bir element. Tıklandığında gerçekten bir şeyler yapmasını istiyoruz. Tam teşekküllü bir istek listesi işlevselliği (ürünleri veritabanına kaydetme, kullanıcıya özel listeler oluşturma vb.) genellikle Shopify App Store'dan bir istek listesi uygulaması veya daha karmaşık arka uç ve ön uç entegrasyonu gerektirir. Ancak, ikonun tıklandığında bir görsel geri bildirim vermesi ve temel bir etkileşim sağlaması için basit bir JavaScript kodu ekleyebiliriz.

Bu JavaScript kodunu temanızın ana JavaScript dosyasına eklemelisiniz. Bu dosya genellikle assets/global.js, assets/theme.js veya assets/custom.js gibi bir isimle bulunur.

document.addEventListener('DOMContentLoaded', function() {
  const wishlistButtons = document.querySelectorAll('.wishlist-icon'); // Tüm istek listesi butonlarını seç

  wishlistButtons.forEach(button => {
    button.addEventListener('click', function(event) {
      event.preventDefault(); // Varsayılan buton davranışını engelle (örneğin sayfa yenilenmesini)
      
      const productCard = this.closest('.product-card'); // En yakın .product-card elementini bul
      let productId = null;

      // Ürün ID'sini almak için product-card üzerinde bir data-id veya data-product-id özelliği arayabiliriz
      if (productCard && productCard.dataset.productId) {
        productId = productCard.dataset.productId;
      } else {
        // Alternatif olarak, eğer product-card üzerinde data-id yoksa,
        // butonun içindeki bir input alanından veya URL'den ID alınabilir.
        // Bu kısım temanızın HTML yapısına göre değişebilir.
        console.warn('Ürün ID bulunamadı. Lütfen product-card elementine data-product-id eklemeyi düşünün.');
      }

      // Basit bir örnek: Konsola mesaj yazdır ve ikonu değiştir
      console.log(Ürün ID: ${productId ? productId : 'Bilinmeyen'} istek listesine eklendi/çıkarıldı!);

      // İkonun stilini değiştir (örneğin dolgulu/dolgusuz kalp veya aktif/pasif sınıfı)
      this.classList.toggle('is-active'); // 'is-active' sınıfını ekle/kaldır

      // Gerçek bir istek listesi uygulaması burada devreye girer.
      // Örneğin:
      // if (this.classList.contains('is-active')) {
      //   addProductToWishlist(productId); // İstek listesine ekleme fonksiyonu
      // } else {
      //   removeProductFromWishlist(productId); // İstek listesinden çıkarma fonksiyonu
      // }
      // updateWishlistCount(); // İstek listesindeki ürün sayısını güncelleme
    });
  });
});

JavaScript kodu hakkında açıklamalar:

• document.addEventListener('DOMContentLoaded', function() { ... });: Bu, sayfa tamamen yüklendiğinde kodun çalışmasını sağlar. Bu, DOM elementlerine güvenle erişebilmemiz için önemlidir.
• document.querySelectorAll('.wishlist-icon');: Sayfadaki tüm .wishlist-icon sınıfına sahip butonları seçer.
• wishlistButtons.forEach(button => { ... });: Her bir istek listesi butonu için bir olay dinleyicisi ekler.
• button.addEventListener('click', function(event) { ... });: Butona tıklandığında ne olacağını tanımlar.
• event.preventDefault();: Butonun varsayılan HTML davranışını (örneğin form gönderme veya sayfayı yeniden yükleme) engeller.
• this.closest('.product-card'); ve productCard.dataset.productId;: Bu kısım, hangi ürünün tıklandığını anlamak için kullanılır. Genellikle ürün kartlarının HTML yapısında data-product-id="[ürün ID'si]" gibi özel bir nitelik bulunur. Bu kodu kullanabilmek için, product-card.liquid dosyanızdaki ana ürün kartı div'ine bu data-product-id niteliğini eklemeniz gerekebilir. Örnek:
  .
• this.classList.toggle('is-active');: Bu satır, tıklandığında butona is-active sınıfını ekler veya kaldırır. Bu sınıfı kullanarak ikonun görünümünü değiştirebilirsiniz (örneğin, dolgusuz kalpten dolgulu kalbe geçiş).

Eğer is-active sınıfını kullanarak ikonun görünümünü değiştirmek isterseniz, CSS dosyanıza ekleyebileceğiniz ek bir stil örneği:

.wishlist-icon.is-active {
  background: #f00; /* Aktif olduğunda kırmızı arka plan */
}

.wishlist-icon.is-active svg {
  fill: white; /* Aktif olduğunda beyaz ikon */
}

Bu adımları tamamladığınızda, Focal temanızdaki ürün görsellerinde, mobil uyumlu ve etkileşimli bir istek listesi kalp ikonu yer alacak. Bu küçük ama etkili ekleme, kullanıcı deneyimini önemli ölçüde geliştirecektir.

İleri Düzey İpuçları ve Entegrasyon Senaryoları: Deneyimi Nasıl Zenginleştirirsiniz?

Artık temel bir istek listesi kalp ikonunu Focal temanıza başarıyla entegre ettiniz. Tebrikler! Ancak e-ticaret dünyası sürekli gelişiyor ve kullanıcı beklentileri artıyor. Bu bölümde, deneyimi daha da zenginleştirecek, performansı optimize edecek ve gerçek bir işlevsellik katacak ileri düzey ipuçlarına ve entegrasyon senaryolarına değineceğiz.

Shopify Uygulamaları ile Tam Teşekküllü İstek Listesi Entegrasyonu

Daha önce de belirttiğimiz gibi, sadece görsel bir buton yerine gerçek anlamda ürünleri kaydeden, kullanıcıların oturumlar arası listelerine erişmesini sağlayan ve hatta liste paylaşımlarına imkan veren bir istek listesi için genellikle özel bir Shopify uygulaması kullanmak en pratik çözümdür. Shopify App Store'da Growave, Wishlist Plus (Swym), Loox gibi popüler istek listesi uygulamaları bulunur.

Bu uygulamalar, genellikle kendi JavaScript API'lerini sunarlar. Yaptığımız görsel entegrasyon, bu uygulamaların API'leriyle kolayca birleştirilebilir. Örneğin, JavaScript kodumuzdaki console.log() yerine, uygulamanın SwymAnalytics.addToWishlist(productId) gibi bir fonksiyonunu çağırarak gerçek bir istek listesi ekleme işlemi gerçekleştirebiliriz. Bu entegrasyon, hem mağaza sahipleri için yönetim kolaylığı sağlar hem de müşterilere zengin bir deneyim sunar. Uygulamalar genellikle listeleme sayfaları, e-posta hatırlatıcıları ve fiyat düşüşü bildirimleri gibi ek özelliklerle gelir, bu da dönüşüm oranlarınızı ciddi şekilde artırabilir.

Dinamik SVG İkonları ve Durum Yönetimi

Kullanıcı bir ürünü istek listesine eklediğinde, kalp ikonunun dolgusuzdan dolguluya dönüşmesi gibi görsel bir geri bildirim sağlamak kullanıcı deneyimini iyileştirir. Bunu, JavaScript ile is-active sınıfını toggle ederek ve bu sınıfa özel CSS stilleri tanımlayarak yapabileceğimizi zaten gördük. Ancak, daha dinamik bir yaklaşım için, Liquid kodunda ürünün zaten istek listesinde olup olmadığını kontrol edip (eğer bir istek listesi uygulaması veya Local Storage tabanlı bir çözüm varsa) ikonun başlangıç durumunu buna göre ayarlayabiliriz. Bu, kullanıcı sayfayı yenilediğinde veya başka bir sayfaya gittiğinde ikonun doğru durumu göstermesini sağlar.

{% comment %} product-card.liquid içinde {% endcomment %}
{% assign is_in_wishlist = false %}
{% comment %} Burada bir istek listesi uygulamasından veya Local Storage'dan kontrol mekanizması ekleyebilirsiniz {% endcomment %}
{% comment %} Örneğin: {% if customer.logged_in and customer.metafields.wishlist contains product.id %} {% assign is_in_wishlist = true %} {% endif %} {% endcomment %}


  {{ product.featured_media | image_url: width: 535 | image_tag: loading: 'lazy', sizes: '(min-width: 1200px) 360px, (min-width: 768px) 33vw, 50vw' }}
  
  
    {% render 'icon-heart' %}
  

Performans Optimizasyonları

Her eklenen kod parçacığı, sayfa yükleme hızını etkileyebilir. Bu nedenle performans optimizasyonu önemlidir:

• CSS ve JS Minifikasyonu: Shopify genellikle tema dosyalarını otomatik olarak minifiye eder, ancak eklediğiniz özel kod parçacıklarının da optimize edildiğinden emin olun.
• Lazy Loading: Eğer sayfanızda çok sayıda ürün kartı varsa, her bir ikonun SVG'sini veya arka plan resmini sadece ürün kartı görünür hale geldiğinde yüklemek için Intersection Observer API'sini kullanmayı düşünebilirsiniz. Bu, ilk yükleme süresini önemli ölçüde azaltır.
• Küçük Boyutlu İkonlar: SVG ikonları, resim dosyalarına göre daha hafiftir ve ölçeklenebilirlik sunar. Kullanacağınız ikonların dosya boyutlarının mümkün olduğunca küçük olduğundan emin olun.

Vaka Analizi: E-ticaret Sitesinin Dönüşümüne Katkısı

Bir orta ölçekli moda e-ticaret sitesi olan "Stil Durağı", ürün görsellerine entegre ettiği istek listesi kalp ikonu ile dikkat çekici sonuçlar elde etti. Daha önce sadece ayrı bir istek listesi sayfası bulunan mağaza, bu görsel ipucunu ekledikten sonra aşağıdaki değişiklikleri gözlemledi:

• İstek Listesine Eklenme Oranında %30 Artış: Ürün kartlarındaki anında erişilebilir ikon sayesinde, kullanıcıların ürünleri istek listesine eklemesi kolaylaştı.
• Sepet Terk Oranında %15 Düşüş: Müşteriler, satın almaya henüz hazır olmadıkları ürünleri sepet yerine istek listesine eklemeye başladı, bu da sepetin "depolama" alanı olarak kullanılmasını azalttı ve terk oranlarını düşürdü.
• Kişiselleştirilmiş E-posta Kampanyaları ile %20 Daha Yüksek Açılma Oranı: İstek listesi verileri kullanılarak, kullanıcılara "İstek listenizdeki ürünlerde indirim var!" temalı e-postalar gönderildi. Bu kampanyalar, genel kampanya ortalamalarına göre önemli ölçüde daha yüksek açılma ve tıklanma oranları yakaladı.
• Ortalama Sipariş Değerinde (AOV) Küçük Artış: İstek listesine eklenen ürünler, daha sonra sepete eklendiğinde genellikle birden fazla ürün olarak eklendi, bu da AOV üzerinde pozitif bir etki yarattı.

Bu vaka analizi, küçük bir görsel eklemenin bile doğru stratejiyle birleştiğinde e-ticaret performansı üzerinde ne kadar büyük bir etki yaratabileceğini açıkça göstermektedir.

Bu ileri düzey ipuçları ve senaryolar, sadece bir kalp ikonu eklemekle kalmayıp, onu bir büyüme stratejisinin parçası haline getirerek mağazanızın potansiyelini tam anlamıyla ortaya çıkarmanıza yardımcı olacaktır. Müşteri deneyimini sürekli iyileştirmek, sürdürülebilir bir e-ticaret başarısı için anahtardır.

Sonuç ve Sıkça Sorulan Sorular

Shopify Focal temasında ürün görsellerine istek listesi kalp ikonu eklemek, küçük ama oldukça etkili bir geliştirme adımıdır. Bu rehber boyunca, bu özelliği neden eklemeniz gerektiğinden, HTML, CSS ve JavaScript kullanarak adım adım nasıl uygulayacağınıza kadar tüm süreci detaylı bir şekilde ele aldık. Temanızı yedekleme, kodu doğru dosyalara entegre etme ve mobil uyumluluğu sağlama gibi kritik konulara değindik. Ayrıca, ileri düzey ipuçları ve bir vaka analizi ile bu özelliğin işinize nasıl değer katabileceğini gösterdik.

Bu entegrasyon sayesinde, müşterilerinizin alışveriş deneyimini zenginleştirirken, potansiyel satışları artırma ve sepet terk oranlarını düşürme gibi önemli avantajlar elde edeceksiniz. Kullanıcıların beğenilerini görsel olarak kaydetmelerine olanak tanımak, onların sitenizle daha kişisel bir bağ kurmalarını sağlar ve gelecekteki alışverişleri için bir köprü görevi görür. Unutmayın, e-ticarette detaylar fark yaratır ve bu tür küçük iyileştirmeler genel dönüşüm oranlarınız üzerinde büyük bir etkiye sahip olabilir.

Artık hazırsınız! Bu adımları uygulayarak Focal temanızın gücünü artırın ve müşterilerinize daha interaktif bir alışveriş deneyimi sunun. Başarılar dileriz!

Sıkça Sorulan Sorular (SSS)

1. Soru: İstek listesi ikonunu eklemek sitemin hızını etkiler mi?

Cevap: Doğru kodlama ve optimizasyon ile minimal etki olacaktır. Makalede sağladığımız gibi, küçük CSS ve JavaScript eklemeleri genellikle sayfa hızını önemli ölçüde yavaşlatmaz. Ancak, çok sayıda karmaşık JavaScript kodu eklemek veya optimize edilmemiş SVG'ler kullanmak hızı düşürebilir. SVG ikonları ve minifiye edilmiş kodlar kullanmak, performansı korumanıza yardımcı olacaktır.

2. Soru: Bu özellik mobil cihazlarda da düzgün çalışır mı?

Cevap: Evet, makalede verilen CSS örnekleri mobil uyumluluğu göz önünde bulundurur (media queries kullanımı). Doğru responsive tasarımla, ikonun boyutu ve konumu küçük ekranlara otomatik olarak uyum sağlayacak ve tüm cihazlarda estetik ve işlevsel bir görünüm sunacaktır. Herhangi bir değişiklikten sonra farklı cihazlarda test etmeyi unutmayın.

3. Soru: Kalp ikonu yerine farklı bir ikon kullanabilir miyim?

Cevap: Kesinlikle! Focal temanızın ikon kütüphanesinden farklı bir ikon ({% render 'icon-...' %}) kullanabilir veya kendi özel SVG ikonunuzu doğrudan HTML içine ekleyebilirsiniz. Eğer kendi SVG ikonunuzu kullanırsanız, CSS stilini de bu yeni ikonun boyutlarına ve renklerine göre ayarlamanız gerekecektir.

4. Soru: İstek listesi işlevselliği için bir uygulama kullanmam şart mı?

Cevap: Tam teşekküllü (ürünleri kaydetme, kullanıcılara özel listeler oluşturma, bildirimler gönderme, liste paylaşımı vb.) bir istek listesi için genellikle bir Shopify uygulaması önerilir. Bu uygulamalar, arka uçta karmaşık veritabanı yönetimi ve kullanıcı deneyimi özellikleri sunar. Ancak, sadece görsel bir gösterge ve basit bir tıklama tepkisi için kendiniz de temel bir JavaScript işlevi yazabilirsiniz (örneğin Local Storage kullanarak).

5. Soru: Kodları yanlışlıkla bozarsam ne yapmalıyım?

Cevap: Temanızın yedeğini aldığınız için, olası bir sorun anında kolayca yedekten geri dönebilirsiniz. Bu nedenle yedekleme adımı kritik öneme sahiptir. Shopify ayrıca her kod değişikliğinde eski versiyonları da saklar; bu sayede .liquid, .css veya .js dosyasının geçmiş sürümlerine de erişerek belirli bir noktaya geri dönebilirsiniz. Kod düzenleyicide dosyanın sağ üst köşesindeki "Older versions" (Eski sürümler) seçeneğine tıklayarak bu sürümleri görebilirsiniz.