Shopify · Filtreli musluk ve duş başlığı
Waterfall Shopify'da su filtresi ve duş başlığı mağazası örneği
Öne çıkanlar
Turu izleVideodan sepete
Yedek filtreler ve kargo sayacı
Öncesi ve sonrası
Waterfall, filtreli musluk ve duş başlıklarıyla yedek filtreleri Shopify'da satıyor. Mağazanın deneyimini önce Microsoft Clarity verisi ve ekran incelemesiyle değerlendirdik, ardından tasarımı ikas için özel tema olarak kodladık; marka Shopify'a geçince tasarımı ve özel bölümleri Shopify mağazasına uyarladık.
Ne yaptık
Tasarımdan önce mağazanın mobil ve masaüstü ekranlarını Microsoft Clarity verisiyle inceleyip raporladık: karar anına denk gelen pop-up, ilk ekranda görünmeyen satın alma düğmesi, sepette değişen toplam ve yoğun paket seçenekleri gibi bulgular.
Tasarımı önce Next.js tabanlı ikas tema altyapısında özel tema olarak kodladık: açılış slaytı, karşılaştırma tablosuyla öncesi ve sonrası görsellerini aynı bölümde toplayan alan, geri sayımlı çok satan ürün listesi ve videodan sepete geçilen ürün şeridi.
Marka Shopify'a geçince tasarımı ve bölümleri Shopify mağazasına uyarladık; canlı ana sayfadaki açılış alanı, güven bandı, video şeridi, yorumlar, yedek filtre listesi, karşılaştırma ve SSS bizim özel bölümlerimiz.
Videolu ürün şeridinde müşteri videoyu izlediği yerden ürünü tek dokunuşla sepete ekliyor.
Yedek filtreler ana ürünlerle aynı akışta: filtre ve set seçenekleri ana sayfada ayrı bir listede, kargo geri sayımıyla birlikte duruyor.
Karşılaştırma bölümü Waterfall'u sıradan musluk başlıklarıyla bir tablo üzerinde ve öncesi, sonrası görselleriyle yan yana anlatıyor.
Deneyim incelemesi
Tasarımdan önce deneyim incelemesi
Waterfall için tasarıma doğrudan ekran çizerek başlamadık. Mağazanın o günkü halini Microsoft Clarity verisi ve mobil, masaüstü ekranları üzerinden bölüm bölüm inceledik; bulguları ekran görüntüleriyle bir raporda topladık. Rapor, yeni tasarımda hangi alanların korunması ve hangilerinin birebir taşınmaması gerektiğini ayırmak için hazırlandı.
Mobilde ürün, puan ve fiyat ilk ekranda net görünüyordu; buna karşılık bir pop-up ürünü incelerken ekranı kaplıyor, Sepete Ekle düğmesi ilk ekranın altında kalıyor ve sepette ek filtrelerle toplam tutar müşterinin beklediğinden farklı görünebiliyordu. Paket seçeneklerinin yoğunluğu, fayda metinlerinde ve yorumlarda kesin sağlık sonucu çağrıştıran ifadeler ile ana aksiyonla yarışan ek indirim balonu da raporda ayrı başlıklar olarak yer aldı. Masaüstünde birden fazla satıra yayılan üst menü, ana ürün kararından önce büyüyen çapraz satış alanları, uzun sayfada uzaklaşan satın alma alanı ve zayıf bir altbilgi hiyerarşisi öne çıktı. Raporun sonucu açıktı: güçlü parçaları korumak, yoğun alanları yeni yapıya birebir taşımamak.
İlk sürüm
ikas için kodladığımız özel tema
- Özel bölüm
- 10
- bölümümüz canlı mağazanın sayfalarında çalışıyor
Bulgulardan sonra tasarımı Next.js tabanlı ikas tema altyapısında özel tema olarak kodladık. Ana sayfayı açılış slaytı, videolu ürün şeridi, geri sayımlı çok satan ürün listesi, yorumlar, karşılaştırma alanı ve sık sorulan sorular sırasıyla kurduk. Karşılaştırma tablosunu ve öncesi, sonrası görsellerini tek bir bölümde topladık; videolu ürün şeridinde müşterinin izlediği üründen doğrudan sepete geçebilmesini sağladık.
Ürün sayfasında satın alma alanından sonraki akışı baştan düzenledik: taksit bilgisi, teslimat çizelgesi, filtrenin yapısını anlatan alan ve ürünün neden tercih edileceğini anlatan bölümler ayrı parçalar halinde ilerliyor. Videoları telefonda hafif yüklenecek boyutlarda hazırladık.
Shopify
Tasarımı ve özel bölümleri Shopify'a uyarlama
Marka satışını Shopify'a taşıyınca ikas için hazırladığımız tasarımı ve bölümleri Shopify mağazasına uyarladık. Canlı ana sayfada açılış alanı, güven bandı, videolu ürün şeridi, yorumlar, yedek filtre listesi, karşılaştırma ve sık sorulan sorular bizim yazdığımız özel bölümler olarak çalışıyor. Bölümler Shopify temasının içinde ayrı bölümler olarak duruyor; mağaza ekibi sıralarını tema düzenleyicisinden değiştirebiliyor.
Tasarımın iki platformda da aynı kalan tarafı içerik sırası oldu: önce ürünün ne işe yaradığı, ardından gerçek kullanım videoları ve yorumlar, sonra yedek filtreler, karşılaştırma ve sorular. Platform değişse de müşterinin karar yolu aynı sırayla ilerliyor. Ödeme sağlayıcısı, e-fatura ve kargo tarafında ise Shopify ikas'tan farklı çalışır; Shopify'ın Türkiye'de nasıl kullanıldığı ayrı bir rehberde anlatılıyor.
Yedek filtreler
Ana ürünle yedek filtreyi aynı akışta tutan liste
Waterfall'ın ürün yapısında alışveriş ana ürünün satın alınmasıyla bitmiyor. Filtreli musluk ve duş başlıklarının yanında yedek filtreler de kullanımın devam eden bir parçası. Bu nedenle yedek filtreleri bağımsız bir ürün grubu gibi ele almak yerine ana sayfada ana ürünlerin hemen ardından gelen ayrı bir listede gösterdik; tekli filtreler, çoklu paketler ve setler kargo geri sayımıyla birlikte aynı yerde duruyor.
Ürün galerisinden
Musluk başlığı, kullanımda 
Musluk başlığı filtreleri 
Yeni ve kullanılmış filtre 
Duş başlığı filtreleri
Kullanıcı videoları
Kullanıcı videolarını ve yorumları ayrı görevlerle kullanmak
Gerçek kullanım görüntüleri ve müşteri değerlendirmeleri Waterfall'ın ürün anlatımında önemli bir yer tutuyor. Bu içerikleri sayfanın farklı yerlerine dağıtmak yerine belirli görevleri olan bölümlerde topladık. Videolara ürünün gerçek hayatta nasıl kullanıldığını gösterme rolünü verdik ve her videoyu ilgili ürüne bağladık; yorumları ise marka anlatımından ayrı bir bölümde tuttuk.
Video kapağı, musluk 
Video kapağı, kullanım 
Video kapağı, duş 
Video kartı ve ürün
Karşılaştırma
Karşılaştırma tablosu ve öncesi, sonrası görselleri
Filtreli bir musluk başlığını sıradan bir başlıktan ayıran özellikler tek fotoğrafta anlaşılmıyor. Karşılaştırma bölümünde Waterfall'u sıradan musluk başlıklarıyla özellik özellik bir tabloda, hemen yanında da öncesi ve sonrası görselleriyle anlattık. Müşteri farkı uzun bir metin okumadan tek bölümde görüyor.
Mağaza turu
Waterfall mağazasında yaptığımız işleri 33 saniyelik bir turda gösteriyoruz
Proje künyesi
| Mağaza | Waterfall, waterfalltr.com |
|---|---|
| Sektör | Filtreli musluk ve duş başlığı |
| Platform | Shopify |
| Yaptığımız iş | Deneyim incelemesi, ikas özel teması ve Shopify'a uyarlanan özel bölümler |
| Tema altyapısı | Next.js tabanlı ikas tema altyapısı (ilk sürüm), Shopify temasına eklenen özel bölümler (canlı mağaza) |
| Ürün yapısı | Filtreli musluk ve duş başlıkları; tekli ve çoklu yedek filtreler, filtre setleri |
| Durum | Yayında, özel bölümlerimiz çalışıyor (son kontrol: 1 Ekim 2026) |
Mağazadan kareler
Açılış görseli. Marka görseli 
Mobil menü. Telefon 
Kullanılmış filtre. Marka fotoğrafı 
Ürünler sayfası. Telefon 
Filtreli duş başlığı. Marka görseli
Sıkça Sorulan Sorular
Diğer Projeler
Projeniz için hangi kapsam gerekir?
ikas, Shopify ve özel yazılım projelerini net brief, ölçülebilir hedef ve teknik yol haritasıyla planlıyoruz.