Satın Alma CSS Şablonları

Modern Satın Alma CSS Şablonları

Üstü çizili bir fiyat, parlak bir indirim rozeti ve bir beden tükendiğinde soluklaşan bir butonun tümü stil dosyasından gelir. Satın alma CSS şablonları; ürün kartları, fiyat blokları ve seçenek kontrolleri için bu stilleri size önceden sunar. Renk paletini ve boşlukları markanıza göre ayarlarsınız; her satın alma senaryosuna ait görsel kurallar şimdiden hazırdır.

Müşterilerin Fark Ettiği Görsel Durumlar

Bir ürün kartında en çok ağırlığı fiyat ve satın alma butonu taşır. Nitelikli stiller; yazı tipi kalınlığı, boyut ve boşluklar aracılığıyla bunlara öncelik verir. Kısa bir teknik özellik satırı veya kargo notu daha küçük ve hafif kalarak hem kolay okunur hem de rahatça atlanabilir. Aşağıdaki durumlar çoğu mağazada karşımıza çıkar ve her birinin kendine özgü bir görünüme ihtiyacı vardır:

• üstü çizilmiş ve soluklaştırılmış eski fiyatın yanında yer alan indirimli fiyat;
• yanındaki seçilmemiş bedenlerden belirgin şekilde ayrılan seçili bir seçenek;
• ilk bakışta devre dışı olduğu anlaşılan stokta olmayan bir varyant veya pasif buton;
• klavye kullanıcıları da dahil olmak üzere bir kontrolün tıklanmaya hazır olduğunu gösteren fareyle üzerine gelme (hover) ve odaklanma (focus) stilleri.

Stok notları ve indirim rozetleri yalnızca bilgilendirme amaçlıdır. Seçenek belirleyiciler ve satın alma butonu ise aksine tıklama talep eder. Başarılı stillendirme bu farkı görünür kılar; böylece kırmızı bir rozet asla tıklanacak bir öge gibi algılanmaz.

Farklı Uzunluktaki Açıklamalar, Dar Ekranlar

Grid ve Flexbox kuralları, bir kart satırının farklı uzunlukta açıklamalara sahip ürünleri nasıl yöneteceğini belirler. Uzun bir ürün adı, fiyatı ve butonu komşu karta kıyasla daha aşağı itebilir ve satır genelinde karşılaştırma yapmayı zorlaştırabilir. Güvenilir şablonlar, her iki ögeyi de kartın en altına sabitler; böylece üstlerindeki metin ne olursa olsun tüm satır boyunca aynı hizada kalırlar. Telefonlarda kartlar daha az sütuna bölünür ve buton dokunmayı kolaylaştırmak için genellikle kartın tam genişliğine yayılır. Fiyat, seçenekler ve buton daha sonra alıcının okuma sırasına göre alt alta dizilir.

Yoğun Kart Izgaraları İçin Yeniden Kullanılabilir Sınıflar

Aynı parçalar onlarca karta yayıldığı için stiller kart, fiyat ve indirim rozeti adına yeniden kullanılabilir sınıflar (classes) olarak en iyi sonucu verir. Nicepage Theme Colors, proje sayfalarında genel bir renk şeması uygulayarak buton ve fiyat vurgularını tutarlı kılarken her teklifin kendi vurgusunu korumasını sağlar. Kompakt bir katalog, sıkışık kartlar ve kısa butonlar gerektirir.

Birden fazla seçeneği bulunan ürünler daha yüksek kartlara, seçenekler arasında daha geniş boşluğa ve son tercihin altına yerleştirilmiş bir butona ihtiyaç duyar. En ideal tercih genellikle en yoğun kartınızı, rozetlerinizi ve durumlarınızı şimdiden kapsayan stillere sahip şablondur.