Aşağıdaki makale size yardımcı olacaktır:Bu 7 örnekten öğrenin
En iyi e-ticaret açılış sayfaları yalnızca güzel olmakla kalmaz, aynı zamanda gezinmesi kolay ve herhangi bir ekran boyutunda gezinmesi keyiflidir.
Sonuçta, mobil ekranda da harika görünmeyecekse muhteşem bir web sitesi tasarlamanın ne anlamı var?
Özellikle 2021 sonu itibariyle mobil satışların artacağı öngörülüyor. %72,9 tüm e-ticaret işlemlerinin.
Bu doğru; mağazanızı ziyaret eden neredeyse 4 kişiden 3’ü muhtemelen bunu telefonlarından yapıyor. Bu çok büyük!
Yüksek dönüşüm sağlayan Shopify açılış sayfaları oluşturma söz konusu olduğunda dikkate alınması gereken çok şey olduğunu biliyoruz: tasarımlarınızın markaya uygun ve müşteri dostu olmasını sağlamak için müşterileri harekete geçmeye yönlendiren temel açılış sayfası öğelerinin dahil edilmesi.
Ayrıca, müşterilerinizin telefonlarında iyi görüntülenen duyarlı mobil açılış sayfaları oluşturmanız gerekir.
Neyse ki doğru araçlarla mağazanızın herhangi bir cihazdaki müşteriler için harika görünmesini sağlamak düşündüğünüzden daha kolaydır.
#cta-visual-pb#
E-ticaret açılış sayfası nedir?
Öncelikle burada neden bahsettiğimizi tanımlayalım. E-ticaret açılış sayfası nedir ve mağazanızın neden bunlara ihtiyacı var?
Açılış sayfası, ziyaretçilerin belirli bir eylemi gerçekleştirmesini sağlamak için tasarlanmış bir web sayfasıdır.
E-ticaret markaları için bu, alışveriş yapanların bir ürün sayfasına tıklamasını, yeni bir koleksiyona göz atmasını, bir indirimin kilidini açmak için e-posta listenize katılmasını, bir abonelik başlatmasını veya başka bir dönüşüm hedefini etkilemesi olabilir.
Mağazanız için neden açılış sayfaları oluşturmanız gerektiğine gelince?
E-ticaret açılış sayfaları, ücretli reklamlardan, sosyal medya gönderilerinden, e-postalardan ve müşterilerinizin çevrimiçi olarak markanız hakkında bilgi edinebileceği diğer yerlerden gelen trafiği göndermek için en iyi yerdir.
Mobil açılış sayfası nedir?
Mobil açılış sayfası, telefonlarından alışveriş yapan müşteriler için tasarlanmış herhangi bir açılış sayfasıdır.
En iyi yanı, sitenizin mükemmel görünmesi için tamamen ayrı bir mobil sürümünü oluşturmanıza gerek olmamasıdır. Bunun yerine, her cihazda muhteşem görünecek duyarlı bir açılış sayfası tasarlamak için Shogun Page Builder gibi bir araç kullanabilirsiniz.
Dolayısıyla mobil açılış sayfanızın masaüstü mağazanızdan tamamen farklı bir deneyim veya tasarıma sahip olması gerekmez.
Her ziyaretçinin cihazı için optimize edilmiş öğeler, kopya ve içerikle duyarlı e-ticaret açılış sayfaları oluşturabilirsiniz.
Sayfa Oluşturucu ile ideal mobil deneyimi oluşturmak için öğeleri kolayca kaldırabilir, ekleyebilir veya yeniden düzenleyebilir, metni değiştirebilir ve CTA düğmelerini düzenleyebilirsiniz.
#cta-mini-pb#Sayfa Oluşturucu’nun başka neler yapabileceğini görmek ister misiniz? Daha fazla bilgi edin
Müşteriler için herhangi bir cihazda markaya özel mağaza sayfaları oluşturmanın zorluğu
The Ridge’in ana sayfası – masaüstü ve mobil
Bir mobil açılış sayfasını tam olarak iyi yapan şey nedir?
Masaüstü alışveriş yapanlara yönelik oluştururken takip ettiğiniz en iyi açılış sayfası uygulamalarının çoğu, mobil açılış sayfası tasarımı için de geçerlidir.
Ancak mobil açılış sayfalarınızı gerçekten optimize etmek istiyorsanız kullanıcı deneyimine, düğme yerleşimine ve yükleme sürelerine daha fazla dikkat etmeniz gerekir.
Birisi açılış sayfanızı masaüstünde ve mobilde yan yana görüntüleseydi, bunun özü aynıdır.
Temel unsurlar aynı olacaktır.
Ancak her cihazda en uygun alışveriş deneyimini yaratan mesajlaşma ve öğelerde farklılıklar olabilir.
Örneğin, açılış sayfanızın mobil sürümünde, tek sütunlu bir düzene sığması için bölümler arasında daha fazla beyaz boşluk bulunabilir.
Giriş metni daha kısa olabilir. Tıklanmayı kolaylaştırmak için düğmeler daha büyük olabilir.
Açılış sayfanızın mobil cihazlarda iyi görünmesini sağlamak için aşağıda özetlenen en iyi uygulamaları takip etmesi gerekir.
İzlenecek en iyi mobil açılış sayfası uygulamaları
Mobil cihazlar için mükemmel bir açılış sayfası oluşturmaya yönelik en iyi uygulamalar listemizi burada bulabilirsiniz. Başarılı bir e-ticaret açılış sayfasının unsurları olarak değerlendirdiğimiz unsurlara oldukça yakından uyuyorlar.
Ekranın üst kısmındaki içeriğe daha fazla dikkat edin
Hangi cihaz için tasarlıyor olursanız olun, ekranın üst kısmında nelerin görüneceği konusunda seçici olmak önemlidir.
Bir mobil ekrana o kadar çok şey sığdıramazsınız, bu da o önemli gayrimenkul parçasını mobil cihazlarda daha da değerli hale getirir.
Başlık kopyasını net ve kısa tutun
Ziyaretçiler mobil açılış sayfanızın neyle ilgili olduğunu hemen bilmelidir.
Bu, başlık görselinizin ve kopyanızın değeri ilettiğinden ve doğrudan konuya girdiğinden emin olmak anlamına gelir.
Sayfaya yönlendiren mesajı ve teklifi tekrarlayarak ziyaretçi beklentilerini karşılayın.
Hızlı yükleme sürelerine öncelik verin
Rekabetçi e-ticaret dünyasında önemli olan yalnızca her saniye değil, her milisaniyedir.
Ziyaretçiler e-ticaret mağazanız hakkında göz açıp kapayıncaya kadar fikir sahibi olurlar. (Hakkında 50 milisaniye, tam olarak). Sayfanızın yüklenmesi çok uzun sürerse, sayfa hemen çıkmadan önce hiçbir izlenim bırakamazsınız.
Mobil alışveriş yapanların bilgisayardakilere göre daha az güvenilir bir internet bağlantısına sahip olabileceği göz önüne alındığında yükleme süreleri kritik öneme sahiptir.
Yükleme sürelerini iyileştirmek için mobil sayfa tasarımınızda bazı basit değişiklikler yapabilirsiniz. Örneğin, “tembel yükleme”, ziyaretçiler kaydırdıkça sayfa bölümlerini yükleyerek (sayfanıza geldiklerinde hepsini bir kerede yapmak yerine) şişkinliği ortadan kaldırır.
Tek sütunlu düzeni tercih edin
Bu, masaüstü ve mobil cihazlara yönelik açılış sayfaları tasarlama arasındaki en büyük farklardan biridir.
Tek sütunlu bir düzene bağlı kalmak, dağınıklığı ve dikkat dağıtıcı unsurları önlemeye yardımcı olur. Bu, küçük bir yazı tipiyle veya kalabalık bir sayfayla karşılaşmadan, daha küçük bir ekranda okumayı kolaylaştırır.
Mobil uyumlu yazı tipi ve biçimlendirmeyi kullanın
Mobil açılış sayfanız için bir yazı tipi seçerken boyut ve stil önemlidir.
Metninizin daha küçük bir ekranda okunabilecek kadar büyük ve net olduğundan emin olun. Bir metin duvarı, açılış sayfaları için asla iyi bir görünüm değildir, ancak özellikle mobil sayfalarda ölümcüldür.
Bu nedenle, onu daha mobil uyumlu hale getirmek için madde işaretleri, satır sonları, başlıklar ve biçimlendirme kullanın.
CTA yerleştirme konusunda stratejik olun
Her iyi açılış sayfasında olduğu gibi, mobil açılış sayfalarınız da tek bir harekete geçirici mesaja odaklanmalıdır.
Ek olarak, mobil açılış sayfalarınız kolayca dokunulabilecek kadar büyük, tıklanabilir düğmelere sahip olmalıdır. Bu, ekranın ulaşılması zor sol üst kısmına herhangi bir düğme yerleştirilmemesi anlamına gelir.
CTA’nız için en iyi yer ekranın alt kısmıdır; ortalanmış veya sağdadır.
Sayfanız daha uzun taraftaysa, onu her noktada görünür (ve tıklanabilir) tutmak için yapışkan bir CTA kullanmayı düşünün.
Formları basitleştirin ve kısaltın
Dönüşüm hedefiniz ziyaretçilerin bir şeye kaydolmasını veya bir form doldurmasını içeriyorsa, bunu kısa ve öz tutun.
Alanların kolayca tıklayıp doldurabileceğiniz kadar büyük olduğundan emin olun. Yanlışlıkla yanlış olanı seçmeyi önlemek için alanlar arasında yeterli boşluk olmalıdır.
Ayrıca, kullanıcıların aşırı yüklenmesini önlemek için alan sayısını kısa tutmaya çalışın. Ziyaretçide açıksa otomatik doldurma seçeneğini kullanın.
En iyi mobil açılış sayfalarına 7 örnek
Şimdi bu en iyi uygulamalardan bazılarının canlı açılış sayfalarında nasıl göründüğüne bir göz atalım.
Mobil cihazlarda harika görünen e-ticaret açılış sayfalarının bir karışımını bir araya getirdik (müşterilerimizin Shogun tarafından oluşturulmuş birkaç mobil açılış sayfası dahil!).
Bu örnekleri seviyoruz çünkü bunlar gerçekten mobil açılış sayfası en iyi uygulamalarını içeriyor, mükemmel kullanıcı deneyimi sunuyor ve ziyaretçilerin dönüşüm gerçekleştirmesini kolaylaştırıyor.
Not: Bu örneklerin mobil cihazlarda görüntülenmesi amaçlandığından, bilgisayarınızda herhangi bir sayfanın mobil sürümünü nasıl göreceğinize dair kısa bir hatırlatma burada yer almaktadır.
- Görüntülemek istediğiniz örnek sayfayı tıklayarak başlayın. (Bağlantılar her örneğin altında verilmiştir.)
- Ardından, açılır menüyü açmak için sayfada herhangi bir yere sağ tıklayın ve “İncele”ye tıklayın.
- Buradan, ekran boyutu simgesine (aşağıda vurgulanmıştır) tıklayarak masaüstü görünümünden mobil görünümüne geçiş yapabilirsiniz.
- Sayfa görünümünün üst kısmındaki açılır menüden bir cihaz seçerek de farklı telefon ekranı boyutları arasında geçiş yapabilirsiniz.
Mobil tarama deneyimini hızla taklit edin
#1: Mutluluk
Blissy, sınırlı süreli yaz indirimleri için Facebook trafiğini bu mobil açılış sayfasına yönlendiriyor.
Sayfa, markaya genel bir bakış sağlar ve ziyaretçilerin tıklayabileceği çeşitli ürün kategorileri ve koleksiyon sayfaları içerir.
Bu mobil açılış sayfasından neler öğrenebilirsiniz:
- Alışveriş yapanların ilgisini canlı tutmak için metin ve görselleri dengeleyin. Blissy, ziyaretçileri bunaltmadan ilgilerini canlı tutmak için sağlıklı bir görsel ve metin karışımı kullanıyor. Metin duvarları yok ve her bölümde görsel bir şeyler var; hatta gerçek müşteri fotoğrafları yerine çizgi film avatarlarının yer aldığı müşteri yorumları bile.
- Bölümleri küçük, mobil uyumlu uzunluklarda tutun. Bu sayfanın kendisi oldukça uzun olmasına rağmen, her bölüm oldukça kısa tutulduğu için sindirimi ve takip edilmesi kolaydır. Ziyaretçiler bir sonraki bölüme geçmeden önce ekranda bir bölümün tamamını kolayca görüntüleyebilir.
#2: FEED Projeleri
FEED Projects, bu koleksiyon sayfasını tatil kampanyaları için farkındalık oluşturmak ve dönüşümleri artırmak amacıyla oluşturdu.
FEED Projects, evdeki isimlerin yıldız gücünden yararlanarak, her satın alımda tatil yemeği bağışlayan hayır amaçlı hediye programına güç katıyor.
Bu mobil açılış sayfasından neler öğrenebilirsiniz:
- Basit tasarımlar etkili olabilir. Başlık görseli ve giriş metninin yanı sıra bu sayfanın büyük bir kısmı ürün görsellerine odaklanmıştır. Bu, iki sütunlu basit bir düzendir, ancak müşterilerin bir ürün sayfasına tıklamadan önce bilmek isteyebileceği tüm hayati bilgileri iletmeyi başarır: her bir kutunun adı, fiyatı, neye benzediği ve ne zaman bağışlandığı. satın alırsın.
#cta-paragraph-pb#Mobil açılış sayfanıza özel bir koleksiyon eklemek ister misiniz? Tıklanabilir ürün veya görsellerden oluşan bir koleksiyonu ne kadar kolay ekleyebileceğinizi görmek için Shogun’un Ürün Koleksiyonu Öğesini deneyin.
- Öğeleri mobil uyumlu hale getirecek şekilde yeniden konumlandırın. Sayfa tasarımınızı mobil cihazlar için optimize etmek için mutlaka büyük değişiklikler yapmanıza gerek yoktur. FEED Projects, mobil ve masaüstü açılış sayfası için aynı fotoğraf kümesini kullanıyor ancak düzen, her ekran boyutuna en iyi şekilde uyacak şekilde değişiyor.
FEED toplama sayfası – masaüstü ve mobil karşılaştırması
#3: İyi Çocuk
Bu örnek, hassas mideleri olan yavru köpekler için iki takviye içeren Goodboy’s Gut Check probiyotik paketinin ürün sayfasıdır.
Alışveriş yapanlar tek seferlik satın alma yapabilir veya düzenli gönderilere abone olabilirler.
Bu mobil açılış sayfasından neler öğrenebilirsiniz:
- Bir paketteki birden fazla ürünü vurgulamak için rengi kullanın. Bu sayfada, müşterinin köpeklerinin bağırsak sağlığını geliştirmek amacıyla iki Goodboy takviyesi bir araya getirilmektedir. Alışveriş yapanlar muhtemelen evcil hayvanlarına verebilecekleri takviyelerin içeriğini ve faydalarını merak ettiğinden, Goodboy her formül için ayrı SSS bölümleri sağlıyor ve bunları etiketlerdeki markayla eşleşen çarpıcı bir arka planla ayırıyor.
- Beyaz boşluk (ve dolgu) arkadaşınızdır. Bu sayfada çok fazla bilgi sunuluyor ancak sayfa düzeni, boşluklar ve dolgu, ziyaretçilere içerik blokları arasında nefes alma alanı sağlıyor. “Etkileyici İkili” altındaki SSS bloklarının bu kadar iyi çalışmasının bir başka nedeni de bölümlerin ekrana rahatça sığmasını sağlayacak kadar dolgunun bulunmasıdır.
#4: Akşam
Sağlık markası Après, “otomatik yenileme” abonelik hizmetine yönelik bu açılış sayfasını oluşturmak için Shogun Sayfa Oluşturucu’yu kullandı.
Duyarlı tasarım harika görünüyor ve herhangi bir cihazda kolayca gezinilebiliyor; böylece müşteriler ister hareket halindeyken ister evde antrenmanlarını bitirirken Après’e abone olabilirler.
Bu mobil açılış sayfasından neler öğrenebilirsiniz:
- Simgelere hayat vermek için gifleri kullanın. “Deneyin”in üzerinde görünen sevimli küçük onay işaretlerinden ve “Taahhüt yok”un üzerinde duraklatma, başlatma ve durdurma arasında geçiş yapan düğme simgesinden gerçekten keyif alıyoruz. Statik simgeleri gif’lerle değiştirmek, mobil açılış sayfanıza şişkinlik yaratmadan veya sayfayı yavaşlatmadan hareket eklemenin (ve değeri görsel olarak iletmenin) kolay bir yoludur.
- Ziyaretçilere kaydırmaya başlama konusunda ilham vermek için başlıkları stratejik olarak yerleştirin. Renkli markalarını sergileyen eğlenceli kahraman görselinden %10 indirim vaadine ve kaçırılmayacak cesur CTA düğmesine kadar Après, ekranın üst kısmındaki içerik sanatında ustalaştı. Daha da iyisi, bu içeriği sayfanın geri kalanını tanıtmak ve ziyaretçileri aşağı kaydırmaya ikna etmek için kullanıyorlar. “Risksiz Après Denemeniz” başlığını ekranın hemen üstüne yerleştirerek ziyaretçileri bunun neyle ilgili olduğunu görmek için aşağı kaydırmaya davet edin.
#5: OLİPOP
OLIPOP içeceklerine yönelik bu abonelik sayfası, müşterilerin aboneliklerini kısa mesajla başlatmanın veya güncellemenin ne kadar kolay olduğunu vurguluyor.
Tüm aboneliklerde %15 indirim ve sorunsuz iptaller sunarak iyi bir neden bulmak zor Olumsuz Abone olmak için.
Bu mobil açılış sayfasından neler öğrenebilirsiniz:
- Sayfayı kalabalıklaştırmadan ziyaretçilerin teklif ayrıntılarına erişmesine olanak tanıyın. Yer tasarrufu sağlayan öğeleri kullanarak (bu örnekteki “Sorularınız mı var? Cevaplarımız var!” bölümündeki açılır SSS gibi), içerikten ödün vermeden sayfanızı sade ve temiz tutabilirsiniz.
- Sayfa boyunca göze çarpan CTA düğmelerini yerleştirin. Ziyaretçilerin bu sayfaya geldiklerinde fark ettikleri ilk şeylerden biri büyük, merkezi “Bugün Abone Ol” düğmesidir. OLIPOP, dönüşümleri en üst düzeye çıkarmak için bu CTA’yı stratejik aralıklarla (sayfanın en alt kısmı ve alt bilginin hemen üstü dahil) üç kez daha tekrarlamaya devam ediyor. En iyi uygulamalar, açılış sayfası başına yalnızca bir CTA’ya sahip olmanız gerektiğini önerse de, yapmalı birkaç kez tekrarlayın.
Başka ne öneriyoruz: Mesajlaşmanın gerçekten göze çarpmasını sağlamak için, görselin üzerine yerleştirilen herhangi bir metin için kontrast oluşturan bir yazı tipi rengi veya yarı saydam bir arka plan kullanmanızı öneririz (Bu örnekte “Her zaman ücretsiz gönderim”).
#6: İlk Gün A.Ş.
Bu örnek, First Day Inc. tarafından oluşturulan uzun biçimli bir ürün açılış sayfasıdır.
Her ne kadar çocuk vitaminlerine yönelik bir ürün sayfası olsa da sayfa, satış yaptığı kadar eğitmek ve farkındalık oluşturmak amacıyla da tasarlanmıştır.
Bu mobil açılış sayfasından neler öğrenebilirsiniz:
- Düzeninizi manzara için optimize edin Ve Vesika. Bu sayfanın masaüstü sürümünde avantajlar okuyucu dostu bir Z şeklinde sunulmaktadır. Ancak bu düzen, dar genişlik nedeniyle telefon ekranında iyi çalışmıyor. Bu nedenle First Day Inc., bu duyarlı açılış sayfasını, avantajları daha küçük ekranlarda tek sütunlu bir düzende yığmak için tasarladı.
İlk Gün ürün açılış sayfası – masaüstü ve mobil karşılaştırması
- Metni bölmek için görselleri ve simgeleri kullanın. Bu mobil açılış sayfası, resimleri metnin üzerine istifleyerek (yan yana yerleştirmek yerine), çok sayıda görsel ara sağlar. Yatay öğelerin istiflenmesi yalnızca telefonda kaydırmayı kolaylaştırmakla kalmaz, aynı zamanda okunabilirliği de artırır.
#7: Sırt
Bazen daha az.
Bu mobil açılış sayfasında (tesadüfen aynı zamanda ana sayfası da olan) The Ridge, yüksek kontrastlı bölümler, siyah beyaz tasarım ve basit “Şimdi Alışveriş Yap” CTA’larıyla minimalist tasarımı benimsiyor.
Bu mobil açılış sayfasından neler öğrenebilirsiniz:
- Mobil ve masaüstü ziyaretçiler için tamamen ayrı sayfa tasarımları oluşturmanıza gerek yok. The Ridge gibi, çok yönlü bir vitrin tasarlayabilir ve bunun her tür cihazda tam olarak nasıl görüneceğini özelleştirebilirsiniz. Web sitelerini ister telefondan ister bilgisayardan ziyaret edin, deneyim ve tasarım neredeyse aynıdır; yalnızca yukarıda tartışılan en iyi uygulamalara göre her cihaz için optimize edilmiştir.
- Atlıkarınca elemanıyla daha az alanda daha fazlasını gösterebilirsiniz. Bu, ziyaretçilerin çeşitli cüzdan seçeneklerini görmesine ve çok fazla kaydırma yapmadan en çok gözlerine çarpana tıklamasına olanak tanır.
#cta-paragraph-pb#Daha da fazla açılış sayfası fikri mi arıyorsunuz? Bir sonraki yapınızı oluşturmanıza ilham verecek bu 35 başarılı Shopify mağazasına göz atın.
Kolayca mobil açılış sayfası nasıl oluşturulur?
Müşterileriniz hangi cihazı kullanıyor olursa olsun harika görünen duyarlı bir açılış sayfasını nasıl oluşturacağınızı mı merak ediyorsunuz?
Shogun Page Builder gibi bir araçla markaya özel bir mobil açılış sayfası oluşturmak her zamankinden daha kolay.
Sıfırdan başlayın veya mobil uyumlu bir Shopify teması seçin ve harika görünen özel sayfalar oluşturmak için öğeleri sürükleyip bırakın Her cihaz.
Tamamen duyarlı ve optimize edilmiş bir açılış sayfası oluşturmak için Shogun Sayfa Oluşturucu’da ekran boyutları arasında kolayca geçiş yapabilirsiniz.
Duyarlı açılış sayfaları oluşturmak için ekran boyutları arasında kolayca geçiş yapın
–Sayfa Oluşturucu şunları yapmanızı kolaylaştırır:
- Mobilde, masaüstünde ve tablette hangi öğelerin görüneceğini seçin. Örneğin, açılış sayfanızın göz alıcı bir video başlığı içerdiğini varsayalım. Mobil açılış sayfasını ziyaret eden müşterilere, hızlı yükleme süreleri sağlamak amacıyla video yerine statik bir resim göstermeyi tercih edebilirsiniz.
- Farklı cihazlarda farklı mesajlar gösterin. Bu, mobil kullanıcılara belirli teklifler göstermenize olanak tanır (örneğin, mağazanız telefon aksesuarları satıyorsa, bir müşterinin telefonunu kullandığını metinde belirtebilirsiniz). Veya mobil ekrana daha iyi uyan daha kısa, daha etkili mesajlarla kopya uzunluğunu optimize etmek için bu yeteneği kullanın.
- Öğelerin farklı ekran boyutlarında nasıl görüneceğini değiştirin. Kitaplığımızdaki öğelerin çoğunda, bunların çeşitli cihazlarda nasıl görüntüleneceğini özelleştirmenize olanak tanıyan duyarlı açılış sayfası özellikleri bulunur. Örneğin, daha küçük ekranlardaki simgeler veya sütunlar için otomatik yığınlamayı açabilirsiniz. Veya masaüstü kullanıcıları için paralaks arka plan efekti oluşturabilir, ancak deneyimi basitleştirmek için mobil müşteriler için bunu kapatabilirsiniz. Ayrıca her cihazda müşteri deneyimini optimize etmek için kenar boşluklarını ve dolguyu da ayarlayabilirsiniz.
Markanıza layık mobil açılış sayfaları oluşturun
Sayfa Oluşturucu’da açılış sayfanızı oluşturup özelleştirdiğinizde, sayfanın herhangi bir cihazda nasıl görüneceği ve nasıl hissettireceği üzerinde tam kontrole sahip olursunuz.
Dönüşümleri ve satışları artıran mobil açılış sayfaları oluşturmanın ne kadar kolay olduğunu görmek için bugün deneyin.
#cta-visual-pb#
