Hepsiburada.com Ürün Açıklama Alanı Tasarımı

E-ticaret sitelerinde ürün açıklama alanları ürüne ait özelliklerin ve ilgili diğer teknik bilgilerin yer aldığı alanlardır ve çoğu durumda ürün girişleri için temel metin yetenekleri çerçevesinde kullanılırlar.

AA

Hepsiburada gibi siteler ise diğer rakiplerinden ayrılarak bu alan için tasarımı özelleştirme imkanı da sunabilmektedirler. Bu yazıda da özellikle HepsiBurada.com‘da Ürün Açıklaması alanını nasıl yönetebileceğimizden bahsedeceğim. Ancak, önce landing page (varış sayfası) neydi bunu bir hatırlayalım.

Varış Sayfası (Landing Page) Optimizasyonu ile ilgili destek talebinde bulunabilirsin.

Landing Page

Sayfa türleri ve özellikle landing page (varış sayfası) ile ilgili detaylı bir yazım olmuştu. Bu yazıda da geçen tanım; “bir bağlantının (pazarlama e-postası / reklam bağlantısı olabileceği gibi bir QR kod aracılığıyla sunulan bağlantı da olabilir) tıklanması sonucunda ulaşılan, bir amaca doğrudan ulaşılması / hedef olayın gerçekleştirilmesi esasına göre tasarlanmış, doğrudan ve kısa bilgi içeren, mümkün olduğu kadar tek sayfa (single-page) olarak hazırlanan sayfalardır.“.

Aynı şekilde, ürün sayfasının da farklı dinamikler çerçevesinde değerlendirilmesi gerektiğini de hatırlamalıyız.

Ürün Sayfası (Product Page)

Sayfa türleri sayfasında da belirttiğim üzere, ürün sayfasını şu şekilde açıklayabiliriz: “Ürün Sayfası (Product Page), içerik sayfasına benzer özellikler gösterir. Temel ayrım ürün sayfalarının e-ticaret siteleri (e-commerce) içerisinde kullanılmasıdır. Bu nedenle farklı bir hiyerarşi içerisinde yer alırlar. Ürün sayfaları ürün özellikleri, ürün geri bildirimleri, CTA elemanlar ve ödeme adımları içeren bir akış içerisinde (funnel) değerlendirilirler ve bu değerlendirme müşteri yolculuğunun (customer journey) bir parçasıdır.“.

Şimdi gelelim GittiGidiyor.com altında yayınlanan bir ürünün Ürün Açıklaması bölümünü nasıl yönetebileceğimize…

HepsiBurada.com Ürün Sayfası Özelleştirme İşlemleri

Hepsiburada.com Ürün Açıklaması bölümü tabProductDesc id’si ile tanımlı, max-width: 1200px tanımlı bir alan ve productDescriptionContent id’li bir alt katmanında ürün başlığı p etiketleri içerisinde yinelenmekte. Özelleştirilebilen alan ise bu id içerisindeki container’dan oluşmakta. Bu alan içerisinde istenirse belirli class’lardan faydalanarak özelleştirmeler yapılabilir ya da Flixmedia1 gibi içerik/varlık yöneticiler üzerinden uygulamalar gerçekleştirilebilir. Flixmedia farklı fontlar, tasarım elementleri, slider’lar gibi özellikler sağlarken doğrudan özelleştirmelerde bu tür özelliklerden faydalanmak mümkün olmamaktadır.

Benim paylaşacağım bilgiler bu özelleştirmeleri kendimizin nasıl uygulayabileceğimiz üzerine olacak. Öncelik olarak temel bazı kurallardan bahsetmekte fayda var.

Patreon'a Özel İçerik

HepsiBurada ürün sayfası açıklama alanı tasarımı ve daha pek çok kapsamlı yazı Patreon'da!