Shopify Mağazaları için Her Şey Tasarım Kılavuzu

Yayınlanan: 2021-08-25

Yazı tipleri, renkler, aksiyon! Sanata yatkın olanlar için Shopify mağazanızı tasarlamak heyecan verici bir zorluk olabilir. Ancak serif ve serif olmayan yazı tipleri arasında seçim yapmakla görevlendirildiklerinde biraz terli hisseden pazarlamacılar ve girişimciler için bu süreç son derece yıldırıcı gelebilir.

Shopify'ın başlamayı kolaylaştıran sayısız kaynağı olmasına rağmen - önceden hazırlanmış tema şablonlarından, kiralık uzman tasarımcılardan ve uygulama ve widget'larla dolu pazarlardan bahsediyoruz - karar felci çok gerçek bir ıstıraptır. Örnek olay: Herkes görsel olarak çekici, dikkat çekici ve dönüşümler için optimize edilmiş bir Shopify mağazası ister - ancak oraya ulaşmanın söylemesi yapmaktan daha kolaydır.

Shopify mağazanız için tasarım seçenekleri söz konusu olduğunda neredeyse sınır olan gökyüzü ile nereden başlarsınız? Renk örneklerini not edin - işte, özelleştirmek, başlatmak ve satışa başlamak için ihtiyaç duyduğunuz tüm ipuçlarını ve püf noktalarını içeren, her zaman ihtiyaç duyduğunuz ancak varlığından haberdar olmadığınız nihai Shopify tasarım kılavuzu.

Bu makalede:
Shopify Temaları
Ürün Fotoğrafları
Tema Özelleştirme
Menü Yapısı
Ana Sayfa Başlığı
3 Paket Servis İpucu
Yardıma mı ihtiyacınız var?

Shopify Temaları

Shopify mağazanızı oluşturmanın ilk adımı, uygun bir tema seçmeyi içerir. Bunu, mağazanızın kullanıcı deneyimini, görsel estetiğini ve işlevlerini belirleyen sitenizin omurgası olarak düşünün.

Shopify Tema Mağazası, şirketin incelediği önceden hazırlanmış yüzlerce tema sunar.

Yüzlerce seçenek sunan Shopify'ın Tema Mağazası, mükemmel eşinizi bulmanızı kolaylaştırır. Ayrıca, çoğu birden fazla stil varyasyonu sağlar; bu, renkleri, yazı tiplerini ve uygulamaları markanızın görünümüne ve hissine uyacak şekilde özelleştirebileceğiniz anlamına gelir.

Bunalmış hissediyor musun? Seçimlerinizi şu şekilde daraltmak için Shopify'ın filtrelerini kullanın:

  • Ürün kataloğunuzun boyutu. Çok sayıda ürününüz varsa, sonsuz kaydırma veya ızgara düzeni gibi özelliklere ihtiyacınız olabilir.
  • Sizin endüstriniz. Moda şirketleri, alışveriş yapanların birden fazla boyut ve renk arasından seçim yapmasına olanak tanıyan temalar gerektirebilirken, sanat ve fotoğrafçılık markaları daha büyük ürün görseli yuvalarına ihtiyaç duyabilir.
  • Fiyat. Shopify çeşitli ücretsiz temalar sunsa da, daha karmaşık olanlar 180 ABD Dolarına kadar mal olabilir.

Tipografiyi ve renk şemalarını daha sonra özelleştirebilseniz de, genel estetik ve düzen açısından site vizyonunuza uyan bir tema seçerseniz özelleştirme süreci daha basittir.

Ürün Fotoğrafları

Shopify'ın sağlam tema pazarının büyük hayranları olsak da bir risk var: özelleştirmeyi hesaba kattığınızda bile herkesinkine benzeyen bir mağazaya sahip olmak. Hızlı bir çözüm? Benzersiz ürün fotoğrafları.

Markanızı rakiplerinizden ayırmak için şirketinizin kimliğini ve tutumunu yansıtan ürün fotoğrafları çekmek önemlidir. Fotoğraf, markanızın tarzını ve tonunu belirlemede büyük rol oynar.

Ürün fotoğraflarınızla biraz eğlenmekten ve biraz daha cesur olmaktan korkmayın:

  • Ürün fotoğraflarınızı, ürünlerinizin destekleyici sahne ve modellerle yerinde çekildiği bazı yaşam tarzı fotoğraflarıyla karıştırın.
  • Farklı düzenlerle denemeler yapın . Örneğin, kıyafetleri her zaman beyaz bir arka plana yerleştirerek çekmek yerine, düz bir şekilde yerleştirmeyi veya model kiralamayı düşünün.
  • Doğrudan değil , ilginç açılardan kırpın ve fotoğraflayın . Bu, çekimlerinize stil ve yetenek katmanın harika bir yoludur.

Harika ürün ve yaşam tarzı resimleri çekmeyle ilgili daha fazla ipucu için bu Kendin Yap kılavuzuna göz atın.

Tema Özelleştirme

Artık temanızı seçtiğinize ve aralarından seçim yapabileceğiniz bir dizi ürün fotoğraflarına sahip olduğunuza göre, işin eğlenceli kısmı geliyor: siteyi benzersiz bir şekilde size ait bir şeye dönüştürmek.

Shopify'ın sunduğu kolaylık sayesinde özelleştirme, sizin tarafınızdan herhangi bir kodlama gerektirmez. Bunun yerine, Tema Ayarları'na tıklamanız yeterlidir; mağazanızın görsel stilini ayarlamanın çeşitli yollarını bulacaksınız.

Renkler

Renkler menüsünde metin, düğmeler ve form alanları dahil mağazanızdaki birçok öğenin renklerini değiştirebilirsiniz.

Profesyonel ipucu: Harekete geçirici mesajınızı (CTA) öne çıkarmak için, onları sayfanızın geri kalanıyla tezat oluşturan daha cesur ve daha parlak bir renk yapmayı düşünün.

tipografi

Bu bölüm, mağazanızdaki tüm metnin görsel görünümünü kontrol eder. Başlıklar ve gövde metni için yazı tipi türünü, ağırlığını ve ölçeğini ayarlayabilirsiniz.

Favicon

Sık kullanılan simgeler, tarayıcınızın sekmesinde görünen, genellikle bir şirketle ilişkili bir logo veya basit bir resim olan küçük simgelerdir.

  • Uygun bir imajınız var mı? Yüklendikten sonra Shopify, otomatik olarak 32 x 32 piksel olarak yeniden boyutlandırır.
  • Bir tane yok mu? Shopify, kullanabileceğiniz tonlarca ücretsiz görsele sahiptir.

Ödeme öğeleri

Ödeme süreciniz, e-ticaret sitenizin en önemli kısmıdır. Harika bir ödeme deneyimi olmadan, alışveriş yapanların alışverişin yarısında sepetlerini terk etme riskini alırsınız.

Ödeme işleminizi olabildiğince sorunsuz hale getirmek için şunları özelleştirebilirsiniz:

  • Vurgular, düğmeler ve hatalar için renkler
  • Ödemeye özel tipografi
  • Ödeme ve sipariş özeti sayfaları için arka plan deseni, rengi veya resmi

Menü Yapısı

Shopify'ın önceden hazırlanmış temalarının çoğu bu temel öğelerle birlikte gelirken, mağazanızı başlatmadan önce şu ipuçlarını aklınızda tutmak isteyeceksiniz:

Gezinti çubuğu

Her sayfanın en üstünde bir gezinme çubuğu bulunur ve alışveriş yapanların sayfalar arasında hızla geçiş yapmasına olanak tanır.

Harry'nin gezinme çubuğu, alt kategorileri göstermek ve öne çıkan ürünleri vurgulamak için açılır menüleri kullanır.

Profesyonel ipucu: Alışveriş yapanların, onları bunaltmadan ihtiyaç duyduklarını bulmalarını kolaylaştırın. Ana gezinme çubuğunu nispeten temiz ve basit tutmak için, üzerine gelinmediği sürece gizlenen açılır seçenekler olarak kategoriler ve alt kategoriler ekleyebilirsiniz.

duyuru çubuğu

Sınırlı süreli bir satış mı? Nakliye gecikmeleri? Yeni mağaza açılış saatleri? Tüm müşterilerin bilmesi gereken temel bilgileri tanıtmanız gerektiğinde, yanıtınız bir duyuru çubuğu (genel başlık olarak da bilinir) olacaktır.

Veya Glossier örneğinde, pazarlama e-postalarınızı tanıtmak için bir duyuru çubuğu kullanılabilir.

Shopify temalarının çoğu duyuru çubuklarıyla birlikte gelir; bunları özelleştirmeniz ve Shopify tema düzenleyicisi aracılığıyla açmanız yeterlidir.

Profesyonel ipucu: Duyuru çubuklarınızın sitenizle aynı şekilde stilize edildiğinden emin olun (marka renklerini, yazı tiplerini ve CTA'ları düşünün).

altbilgiler

Altbilgiler, sitenizdeki en az değer verilen alanlardan biridir. Alışveriş yapanların çok azının ana sayfanızda gezinip altbilgiye ulaşacağı doğru olsa da, bilgiye hızlı bir şekilde erişmeleri gerektiğinde ilk bakacakları yerlerden biridir.

Altbilginizi düzenlemek için Çevrimiçi Mağaza altındaki Gezinme sayfasına gitmeniz gerekir.

Profesyonel ipuçları:

  • Altbilginiz, gezinme çubuğunuzdaki aynı bilgilerin yalnızca bir tekrarı olmamalıdır. Bunun yerine nakliye, iade ve değişim, site gizliliği, iş fırsatları ve daha fazlasıyla ilgili sayfalara önemli bağlantılar ekleyin.
  • Sosyal medya simgelerini düğmeler olarak kullanın; bu, altbilginizdeki sözcükleri azaltır.
  • Alışveriş yapanların e-posta veya SMS güncellemelerine kaydolmasına izin verin.
  • Yardım hatları, "canlı sohbet başlatma" veya e-posta yardımı gibi müşteri hizmetlerine hızlı bağlantılar sağlayın.

Ana Sayfa Başlığı

Ana sayfa başlığınız, alışveriş yapanların web sitenize geldiklerinde gördükleri ilk şeydir. Mükemmel bir ilk izlenim bırakın, daha fazlasını isteyeceklerdir. Onları çekemezseniz sekmeyi kapatırlar. Bununla birlikte, ana sayfa başlığınız şunları yapmalıdır:

  • Markanızın ne olduğuna veya hangi ürünleri sattığınıza dair hızlı bir anlık görüntü sağlayın
  • Bir satış etkinliğini tanıtın
  • Markanızın tutumunu ve kimliğini gösterin
  • En iyi ürünlerinizi sergileyin

Purple Mattress (şu anda) ana sayfa başlığında sınırlı süreli yaz indirimini sunuyor.

Ana sayfanızın başlığı ister bir video, ister atlıkarınca veya statik bir resim olsun, onu düzenli olarak değiştirmeyi hedeflemelisiniz - web sitenizin sadık müşteriler için eskimiş veya güncelliğini yitirmiş hissetmesini asla istemezsiniz.

3 Paket Servis İpucu

Shopify mağazanızı tasarlamak çok eğlenceli olabilir, ancak aslında boş bir tuval üzerinde yazı tiplerini, renkleri ve widget'ları denemeye başladığınızda da elden çıkabilir. Shopify tasarım sürecini olabildiğince yönetilebilir ve sorunsuz tutmak için akılda tutulması gereken bazı ipuçları:

1. Formdan çok işlev, her zaman

Güzel bir siteniz olabilir, ancak sezgisel olarak akmıyorsa ve harika bir müşteri yolculuğu sunmuyorsa, satışların durgun olduğunu göreceksiniz. Öneririz:

  • Tasarım sürecine başlamadan önce sitenizle neyi başarmak istediğinize odaklanın. Bu, ihtiyaç duyduğunuz araçları veya widget'ları daraltmanıza yardımcı olacak ve Shopify App Store'u ilk ziyaret ettiğinizde meydana gelebilecek seçim felcini önleyecektir.
  • Alışveriş yapanların ürün aramalarını hızla daraltmalarını sağlamak için öneriler ve sağlam filtreler gibi kullanışlı özelliklerin uygulanması .
  • Site hızına öncelik vermek. Bir sürü harika animasyon, harika uygulamalar ve yüksek çözünürlüklü resimler eklemek cazip gelse de, ne kadar çok öğe eklerseniz sitenizin yüklenme süresi o kadar uzun olur. Araştırmalar, sayfanızın yüklenmesi için geçen her fazladan saniyenin, dönüşümleri %7'ye kadar ve sayfa görüntülemelerini %11'e kadar azaltabileceğini buldu. Öte yandan, daha hızlı siteler Google'da daha yüksek sıralamalarla ödüllendirilir.
  • Görüntüleri sıkıştırma. Compressor.io gibi ücretsiz araçlar, dosya boyutunu küçültürken yüksek kaliteli ürün görüntülerini canlı tutmanıza yardımcı olabilir.
  • Shopify Theme Store'daki temaları üçüncü taraf web sitelerindeki temalar yerine seçme. Üçüncü taraf temalar Shopify'ın değerlendirme sürecinden geçmediğinden, bazılarının arka uçta yükleme sürelerinizi uzatabilecek beklenmedik eklemeler olabilir.

Unutmayın: Shopify mağazanızı başlatmak tek seferde yapılan bir işlem değildir. Sitenizi başlattıktan ve satışların düştüğünü görmeye başladıktan sonra, başlık resimlerini yenilemekten SEO metnini yeniden yazmaya veya resimleri güncellemeye kadar her sayfayı sürekli olarak optimize etmek istersiniz. Bize güvenin: Sıkıcı olsa da, dönüşümleri artırmaya, yeni müşteriler çekmeye ve müşteri deneyimini iyileştirmeye yardımcı olacaktır.

Profesyonel ipucu: Sitenizin site hızı açısından ne durumda olduğundan emin değil misiniz? Google'ın PageSpeed ​​Insights aracına göz atın - URL'nizi girin ve site hızı iyileştirmeleri hakkında size bilgi ve öneriler sunacaktır.

2. Sitenizi basit tutun

Cephaneliğinizdeki tüm ürünleri, resimleri ve kopyaları sergilemek cazip gelebilir, ancak çoğu zaman bu, müşteri deneyimini tıkar. Sitenizi çok fazla bilgi ile aşırı yüklemek istemezsiniz - kimse dağınık bir ikinci el mağazasının dijital versiyonundaki ürünleri gözden geçirmek istemez. Bunun yerine, basit tutun, en çok satan ürünlerinize odaklanın ve mümkün olan her yerde (görüntüler, kopyalar, widget'lar, sayfalar ve hatta ürünlerin kendisi olsun) yağları kısaltın.

3. Her şeyi test edin

Tek bir düğmeyi maviden kırmızıya değiştirerek dönüşümleri artırabileceğinizi söylesek? Sitenizi belirli renkler, resimler ve grafiklerle başlatmış olsanız da, bunların iyi çalıştığını bilmenin hiçbir yolu yoktur. (Size kazanan bir formül vermeyi çok isterdik, ancak gerçek şu ki: En iyi uygulamalar bir markanın benzersiz müşterilerine, ürünlerine ve nişine bağlıdır.)

A/B testinin devreye girdiği yer burasıdır - neyin en iyi performansı gösterdiğini belirlemek için çok önemli bir süreç. (Yeni pazarlamacılar için, A/B testiyle ilgili her şey için bir kılavuz burada.) Yalnızca içgüdüyle çalışmak yerine, şu mağaza tasarım öğelerini A/B testi yapmak isteyeceksiniz:

  • Farklı düğmelerin renkleri
  • CTA'ların, widget'ların ve resimlerin konumları
  • Gezinme çubukları
  • Sosyal medya simgelerinin tasarımı
  • Görüntü stili — örneğin, ürün ve yaşam tarzı resmi
  • Arka plan resimleri veya dokular

Yardıma mı ihtiyacınız var?

Shopify'ın arayüzü, pazarlamacıların ve girişimcilerin mağaza tasarımlarını kendin yapmalarını kolaylaştırırken, mağazanızın nasıl görünmesini istediğinize dair kristal netliğinde bir fikre sahip bir mükemmeliyetçiyseniz, bu zaman alıcı bir süreç olabilir.

İyi ki yardım istemek sorun değil! Shopify, mağazanızla ilgilenmek için güvenebileceğiniz çok sayıda kaynak ve yüzlerce uzman sunar. Bazen, yabani otların arasında tek başına yürümektense profesyonel bir tasarımcının uzmanlığından yararlanmak daha iyidir.

Bize gelince, Shopify mağazanız için birinci sınıf pazarlama sağlamak söz konusu olduğunda AdRoll arkanızda. Satışlarınızı hızlandırmaya hazırsanız Shopify için AdRoll entegrasyonuna göz atın.