Uyum Yatak: Figma tasarımından Shopify mağazasına

• Tasarım Figma'da hazırdı; ana sayfa, katalog ve ürün sayfasının Shopify'da birebir karşılığı üretilecekti.
• Yatak satışında ürün tek bir fiyatla anlatılamıyor: her ölçünün kendi liste fiyatı ve kampanya fiyatı var.
• Ürün grupları birbirine bağlı; yatak alan müşteri çoğu zaman baza ve başlığı da aynı anda satın alıyor.
• Kampanya dönemleri sık değişiyor; indirim ve set kurgusunun sepette de doğru görünmesi gerekiyor.

• Figma dosyasındaki düzeni, boşlukları ve tipografiyi Shopify şablonlarına kayıpsız taşımak.
• Ölçü seçimini fiyatıyla birlikte, tek ekranda karşılaştırılabilir hale getirmek.
• Set tamamlayan ürünleri ürün sayfasının içinde göstermek.
• Sepeti ve açılır sepeti kampanya kurgusuyla tutarlı çalıştırmak.

• Ana sayfa, katalog ve ürün sayfası şablonları tasarıma göre sıfırdan geliştirildi; bölümler yönetici panelinden düzenlenebilir biçimde kuruldu.
• Tipografi, renk ve boşluk değerleri tasarım dosyasından değişken olarak alındı; tema genelinde tek kaynaktan yönetiliyor.
• Ana sayfa: kayan tanıtım alanı, koleksiyon yönlendirmeleri, öne çıkan ürün blokları, garanti ve teslimat şeridi, bülten kaydı.
• Katalog sayfasında ürün kartları, ürünün öne çıkan özelliklerini ve başlangıç ölçüsünün fiyatını birlikte gösterecek biçimde kurgulandı.

• Yatak ölçüsü seçimi klasik açılır listeden çıkarıldı: on ölçü, her biri kendi liste ve kampanya fiyatıyla ızgara halinde gösteriliyor.
• Ölçüler tek kişilik ve çift kişilik olarak gruplanıyor; müşteri kendi ihtiyacına göre doğrudan doğru gruba bakıyor.
• Seçim değiştikçe fiyat, indirim oranı ve sepete ekleme bilgisi sayfa yenilenmeden güncelleniyor.
• Sertlik tercihi 1–7 arası bir skalada görselleştirildi; ürünün konfor konumu tek bakışta anlaşılıyor.
• Taksit, garanti, ücretsiz teslimat ve deneme süresi bilgileri satın alma düğmesinin yanına taşındı.

• Set ürünlerinin sayfasına “Grup Ürünleri” bölümü eklendi: yatağı tamamlayan başlık ve baza aynı ekranda listeleniyor.
• Her tamamlayıcı ürün kendi ölçü ve renk seçenekleriyle, kampanya fiyatı görünür biçimde geliyor.
• Böylece müşteri sayfadan çıkmadan seti görebiliyor; yatak, baza ve başlık aynı akış içinde değerlendiriliyor.

• Sepete ekleme sayfa yenilemeden çalışıyor; ürün eklendiğinde açılır sepet (drawer) devreye giriyor.
• Açılır sepette ürünün seçilen ölçüsü, kampanyalı fiyatı ve indirim farkı birlikte gösteriliyor.
• Sepet ve açılır sepet, kampanya dönemlerinde fiyat gösterimini aynı kurala göre yapacak biçimde ortak bir yapıya bağlandı.
• Adet değişikliği ve ürün çıkarma işlemleri sepeti yeniden yüklemeden güncelleniyor.

Tasarım dosyasında duran ekranlar, yönetilebilir bir Shopify temasına dönüştü. Müşteri ürün sayfasında on ölçüyü fiyatlarıyla birlikte karşılaştırıyor, sertlik tercihini tek bakışta görüyor, seti tamamlayan baza ve başlığı aynı sayfadan değerlendiriyor; sepet ve açılır sepet kampanya fiyatlarını aynı kuralla gösteriyor.

Mobil arayüz