Tema geliştirme
Ürün sayfası, sepet çekmecesi ve katalog düzeni
Satın alma butonu yukarı taşındı, sabit çubuğun yanlış varyant hatası kapandı, katalog düzeni sadeleşti.
Müşteri: Ömer Has Kuyumculuk
Başlangıç durumu
Mobilde “Sepete Ekle” butonu 1147. pikseldeydi; müşteri bir buçuk ekran boyunca hiçbir satın alma tetikleyicisi görmüyordu. Sabit sepet çubuğu varyant kimliğini sayfa yüklenirken okuyup sabitliyordu, harf kolyede müşteri “Ç” seçince sepete “A” giriyordu. Katalog tarafında ürün türü alanında 71 farklı değer vardı ve sayılar gramaj değil sıra numarasıydı.
Yapılan
- Fiyat kırılımı ve ürün künyesi bloklarının yeri değişti: bunlar karar öncesi değil karar sonrası bilgi, satın alma butonunun altına alındı.
- Sabit çubuk varyant kimliğini tıklama anında asıl ürün formundan okuyacak şekilde yeniden yazıldı; fiyat, varyant adı ve stok durumu da asıl alandan aynalanıyor.
- Sepet çekmecesinde sabit bloklar ürün listesinden yer çalıyordu; sabit kalması gerekmeyen her şey kaydırılabilir alanın içine alındı.
- 95 ürünün tamamında gizli bir ikinci başlık vardı — ürünün kendi adresine link veren, yüksekliği sıfır bir <h2 class="h1">. Kaldırıldı, sayfada tek H1 bırakıldı.
- Görünür kırıntı yolu ve BreadcrumbList birlikte kuruldu; ikisi aynı yolu gösteriyor.
- Ürün türü alanı 6 temiz kategoriye indirildi; eski değerler silinmeden önce geri dönüş için ayrı bir metafield'a yazıldı.
- Birebir aynı ürün kümesini gösteren altı kopya koleksiyon kapatıldı: önce 301 yönlendirmesi kuruldu, sonra silindi, sonra yönlendirmeler doğrulandı.
- Tasarım tarafında iki harfli monogram favicon, güven şeridi, eşikli hediye mekaniği ve kaynağın kendi panelini gömen canlı altın fiyat bölümü yapıldı.
LiquidJavaScriptAdmin GraphQL APIMetafieldURL RedirectJSON-LD
Sabit çubuk varyant kimliğini tıklama anında okur
// Kimlik sayfa yuklenirken sabitlenirse, musteri varyant
// degistirdiginde sepete ESKI varyant gider. Olculen kanit:
// formda 49143197565147, cubukta 48748885934299.
const form = document.querySelector('product-form form [name="id"]');
dugme.addEventListener('click', function () {
const varyantId = form && form.value;
if (!varyantId) return; // form yoksa hic denemeyelim
sepeteEkle(varyantId, adetAlani.value);
});Bu hata sipariş gelene kadar kimseye görünmüyor. Kod okuyarak değil, formdaki değerle çubuğun gönderdiği değeri karşılaştırarak bulunuyor.
Sonuç
- Mobilde satın alma butonu 1147. pikselden 948. piksele çıktı.
- Çapraz satış bölümü 6749. pikselden 2552. piksele (masaüstünde 1733) taşındı.
- Ürün türü 71 farklı değerden 6 kategoriye indi; Google Shopping ve Meta katalog eşleştirmesi düzeldi.
- Menüdeki 32 linkin 11'i sıfır ürün döndürüyordu; boş kategoriler menüden çıkarıldı.
- 95 ürüne SEO başlık ve açıklaması, 340 görsele alt metin yazıldı.
Sizde de benzer bir durum mu var?
Mağazanın adresini yollayın; bakıp ne gördüğümü yazayım.