Online ödeme sayfanızı yükseltin

Markanızı genişletmek, mesajları değiştirmek, teklifler sunmak ve müşterilerinizin deneyimlerini başka yollardan iyileştirmek için online ödeme sayfanızı özelleştirebilirsiniz. Yaptığınız özelleştirmenin, Shopify tarafından yapılmaya devam eden değişikliklerle uyumlu olduğundan emin olmak için ödeme sayfanızı düzenli olarak güncellemeniz gerekir.

Bu yükseltmeye hazırlanmadan önce aşağıdakileri yapmanız gerekir:

  1. Yeni ödeme sayfasının önizlemesini görüntüleyin. Ayrıca ödeme sayfasını müşterilerin gözünden görerek test edin. Ödeme sayfanızda yaptığınız özelleştirmelere bağlı olarak, yükseltme yapmadan önce checkout.liquid dosyanızda değişiklik yapmanız gerekebilir.
  2. Yaptığınız değişikliklerden memnun olduğunuzda yeni Shopify ödeme sayfasını kullanmak için mağazanızı yükseltin.

Ödeme sayfanızın önizlemesini görüntüleme ve hataları test etme

Mağazanızı yeni ödeme sayfasına yükseltmeden önce değişikliklerin önizlemesini görüntülediğinizden emin olun.

Ödeme sayfasının önizlemesini görüntüleyin

Sitede bir müşteri gibi gezinip test ödemeleri oluşturarak bunu gerçekleştirebilirsiniz. Söz konusu testler sırasında hatayla karşılaşırsanız bu, ödeme sayfasında gerçekleştirdiğiniz bazı özelleştirmelerin yeni sürümdeki diğer iyileştirmelerle çakıştığı anlamına gelir. Böyle bir durumda, yükseltme işleminden önce checkout.liquid dosyanızda değişiklikler yapmanız gerekir.

Hataları giderme

Adımlar:

  1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
  2. İşlemler'e ve Çoğalt'a tıklayın.
  3. Daha fazla tema bölümünden çoğalttığınız temayı bulun ve ardından İşlemler > Kodu düzenle'ye tıklayın. Değişiklerinizi yapın ve temanızın çoğaltılmış ama yayınlanmamış bu sürümünü kullanarak değişiklikleri test edin.

Not: Temalarda değişiklik yapacağınız veya bunları test edeceğiniz zaman bir çoğaltılmış kopya oluşturup söz konusu kopyayla çalışın. Çoğalttığınız kopyayla çalışırken hata yapmanız durumunda, müşterilerinizi etkilemeden kopyayı silebilir ve orijinal tema üzerinden başka bir kopya oluşturabilirsiniz.

  1. checkout.liquid dosyasını açın.

  2. Çoğaltılmış temanızdan yeni Shopify ödeme sayfasını kullanarak checkout.liquid dosyasının önizlemesini görüntüleyin:

    1. Shopify yöneticinizin Ödeme sayfası yükseltmesi bölümüne gidip Ödeme sayfasının önizlemesini göster'e tıklayın. Ardından, çoğaltılan temayı seçin.
    2. Önizlemede test siparişlerini tamamlayın.

Ödeme sayfanızın görünümüyle ilgili hata alır veya sorunlar fark ederseniz bu hatayı ya da sorunları çözmek için checkout.liquid dosyanızı düzenlemeniz gerekir.

Yeni Shopify ödeme sayfasına yükseltme

Ödeme sayfanızı yükseltmek, Shopify ödeme sayfanızı yükseltmenizi ve yayındaki geçerli temanızı, değişiklikleri içeren çoğaltılmış temayla değiştirmenizi gerektiren iki adımlı bir işlemdir.

Dikkat. Bu yükseltmeyi yapmadan önce ödeme sayfanızın önizlemesini görüntülediğinizden emin olun. Bu yükseltmenin, müşterilerinizin ödeme sayfası deneyimini etkilememesini ve yeni ödeme sayfasından ödemelerini yapabilmelerini istersiniz.

Olası aksamaları en aza indirmek için yükseltmeyi günün daha az yoğun bir saatinde (sabah erken saatler, akşam geç saatler veya hafta sonu gibi) gerçekleştirin.

Adımlar:

  1. Ödeme sayfası yükseltme sayfasından Ödeme sayfasını yükselt'e (bu düğme sayfanın en altında bulunur) tıklayın.

  2. Temanızın önizlemesini ilk kez görüntülediğinizde hatalarla karşırsanız işleme devam etmeden önce bunları giderdiğinizden emin olun (yukarıdaki Hataları giderme bölümüne bakın). Ardından, çoğaltılan temanızın güncel sürümünü yayınlayın.

    1. Online Mağazanızdan Temalar'a tıklayın.
    2. Çoğaltılmış temanızı bulun ve İşlem > Yayınla'ya tıklayın.

Ödeme sayfanız yükseltildi ve çoğaltılmış temanız artık geçerli temanız oldu.

Shopify ödeme sayfasındaki yenilikler

Shopify ödeme sayfasının yeni sürümü aşağıdaki değişiklikleri ve yeni özellikleri içerir:

  • İndirim liquid değişkenleri
  • Shop'u etkinleştirme
  • Sipariş düzenleme
  • Erişilebilirlik ile ilgili iyileştirmeler
  • Kaldırılan dolgu
  • Ödeme yöntemi gösterimi
  • Kaldırılan yer tutucu dizeleri
  • Kaydedilen müşteri adresi gösterimi
  • 3D Secure kimlik doğrulaması
  • Ek Google Analytics JavaScript alanı değişiklikleri
  • CSS değişiklikleri
  • Hata iletisi

İndirim liquid değişkenleri

Ödeme işleminin çeşitli aşamalarında, indirimlerin gösterilmesiyle ilgili yeni birkaç liquid değişkeni kullanıma sunulmuştur. Bu değişiklikler, otomatik ve komut dosyası tabanlı indirimleri müşterilerinize anlaşılır bir şekilde sunmanıza olanak tanır.

Yeni liquid değişkenlerinin listelendiği tablo
Değişken Tanım
checkout.cart_level_discount_applications Ödeme sayfası için sepete özel indirim uygulamaları varsa bunları bir dizi halinde döndürür.
line_item.discount_allocations İndirimli tutarı ve üst indirim uygulamasının referansını içeren tüm indirim dağıtımlarının listesini döndürür. line_item.discount_allocations kısmına sepetler, ödemeler, siparişler ve taslak siparişlerde bulunan satır öğelerinden ulaşabilirsiniz.
line_item.final_line_price Satır öğesindeki tüm ürünlerin birleştirilmiş fiyatını döndürür. line_item.final_price değerinin line_item.quantity ile çarpılmasıyla elde edilen sonuca eşittir.
line_item.final_price Satır düzeyindeki tüm indirim tutarlarının da dahil edildiği satır öğesi fiyatını döndürür.
line_item.line_level_discount_allocations İndirimli tutarı ve üst indirim uygulamasının referansını içeren, satırlara özgü indirim dağıtımlarının listesini döndürür. line_item.line_level_discount_allocations kısmına sepetler, ödemeler, siparişler ve taslak siparişlerde bulunan satır öğelerinden ulaşabilirsiniz.
line_item.total_discount Satır öğesine uygulanan toplam indirim tutarını döndürür. Bu özellik, yalnızca Komut Dosyası Düzenleyicisi uygulamasını kullanmanız durumunda bir değere sahip olur.

Shop'u etkinleştirme

Sipariş durumu sayfasına, telefon numarası için ayrılmış bir alan eklenmiştir. Kargo güncellemelerini mesaj olarak almak isteyen müşterilerden bir cep telefonu numarası girmeleri istenir. Bu mesajda Shop uygulamasının bağlantısı da yer alır.

Sipariş düzenleme

Sipariş düzenleme özelliği Shopify Plus satıcılarının kullanımına sunulduğunda bu, düzenlenen siparişlerdeki bekleyen ek ödemelerin Shopify ödeme sayfası üzerinden kaydedilebilmesine olanak tanıyacaktır. Ödeme sayfasının beklenen şekilde çalışmasını sağlamak için söz konusu sayfada birtakım değişiklikler yapılmıştır:

  • Müşteriler iletişim bilgilerini, kargo adresini veya kargo yöntemini değiştiremez.
  • Sipariş toplamını ve zaten ödenmiş tutarı belirten ek satır öğeleri.
  • Satın alımı tamamla düğmesi, Şimdi öde olarak değişmiştir. Toplam ise Ödenecek tutar olarak değişmiştir.
  • Ödeme işleminin hangi aşamasında olduğunu gösteren içerik haritası bilgilerinin yerine müşteri, artık siparişle ilgili ayrıntılı ek bilgileri içeren ve daraltılabilir bir banner görecektir: - Ek ödeme tutarı.
    • Siparişe eklenen veya siparişten kaldırılan ürünler.
    • Sipariş numarası.

Ek ödeme gerektiğinde görünen ödeme sayfasının gösterildiği görsel

Bu değişiklikler yalnızca bir sipariş üzerinde düzenleme yapılırsa geçerli olur ve müşterinizin ek ödeme yapmasını gerektirir.

Ödeme sayfasıyla ilgili özelleştirmeleriniz ödeme seçeneğinin mevcut adımını belirlemek için içerik haritasını kullanıyorsa bunun yerine Shopify.Checkout.step nesnesini tercih etmelisiniz. Daha fazla bilgi edinmek için Adımı belirleme sayfasına bakın.

Erişilebilirlik ile ilgili iyileştirmeler

Web erişilebilirlik standartlarına uygunluğu sağlamak amacıyla, ödeme sayfasında bazı değişiklikler yapılmıştır. Bu değişiklikler, ekran okuyucu gibi erişilebilirlik teknolojilerinden yararlanan müşterilerin ödeme işleminde gezinmesini kolaylaştırır.

  • İçerik haritaları artık ödeme sayfasındaki tüm adımlarda nav ile birlikte görünür. aria-current özelliği, span öğesi bünyesindeki li öğesine taşınmıştır.
  • Sipariş özetlerleri artık aside öğesinde yer alır.
  • Mobil cihaz müşterileri için checkout_reduction_code olan indirim kodu alan kimliği, ödeme sayfasındaki tüm adımlarda checkout_reduction_code_mobile olarak değiştirilmiştir.
  • Teşekkür Ederiz ve Sipariş Durumu sayfaları için haritaya erişilebilirlik özellikleri eklenmiştir. Haritada artık kargo adresiyle birlikte role=region ve aria-label görünür.
  • step ayrıca Sipariş Durumu, Stokta Yok ve Teşekkür Ederiz sayfalarına step__sectionsarmalayıcı div öğeleri eklenmiştir.
  • Ödeme işlemine semantik HTML5 öğeleri dahil edilmiş ve role özellikleri güncellenmiştir. - Sipariş özeti artık bir aside öğesinin içinde yer alır.
    • .main__header için div öğesi artık role=banneriçeren bir üstbilgi öğesidir.
    • .main__content için div öğesi artık role=main ile bir ana öğedir.
    • .main__footer için div öğesi artık role=contentinfo ile bir altbilgi öğesidir.
    • banner için div öğesi artık role=banner içeren bir üstbilgidir.

Kaldırılan dolgu

Sipariş Durumu, Stokta Yok ve Teşekkür Ederiz sayfalarında mağaza adıyla sipariş numarası arasında görünen boşluk kaldırılmıştır. Söz konusu ek dolgu, div.section.section--page-title bölümünden kaldırılmıştır.

Ödeme yöntemi gösterimi

Müşteriler artık toplam sipariş tutarını Ödeme yöntemi bölümündeki sipariş durumu sayfasında görebilir.

Toplam sipariş tutarının yer aldığı sipariş durumu sayfasının gösterildiği görsel

Kaldırılan yer tutucu dizeleri

E-posta yer tutucusu ve E-posta veya telefon yer tutucusu alanları, tema ayarlarınızdaki dil seçeneklerinden kaldırılmıştır. Gerekli değişiklikler sırasıyla E-posta etiketi ve E-posta veya telefon etiketi alanları üzerinden gerçekleştirilebilir. Bu alanlara erişmek için Online Mağaza > Temalar kısmına gidip İşlemler > Dilleri düzenle > Ödeme ve sistem'e tıklayın.

Kaydedilen müşteri adresi gösterimi

Oturum açmış müşteriler, kayıtlı adresleri artık ödeme sırasında farklı bir biçimde görüntüler.

Kayıtlı adresler listesinin gösterildiği görsel

Adres seçenekleri aşağıdaki sırayla görüntülenir:

  1. Varsayılan kayıtlı adres.
  2. Yeniden eskiye sıralanmış biçimde, en son eklenen adresler.
  3. Yeni bir adres kullanma seçeneği.

Açılır menüde maksimum beş adres gösterilir.

3D Secure kimlik doğrulaması

3D Secure teknolojisi müşterilerin, satın alma işlemini bitirmeden önce tamamlaması gereken bir ek güvenlik katmanı sağlar. Ayrıca Verified by Visa, Mastercard Identity Check veya Amex SafeKey gibi hizmetleri destekler. Ödeme sırasında bazı müşteriler, ek kimlik doğrulama işlemleri için bankalarının sayfasına yönlendirilebilir. Daha fazla bilgi edinmek için PSD2 ve Güçlü Müşteri Kimlik Doğrulamasını Anlama sayfasına bakın.

Avrupa Ekonomik Alanı'nda (EEA) bulunan satıcılar, 3D Secure ödeme seçeneğini sunmak için Cardinal'den yararlanabilir. Daha fazla bilgi edinmek için Cardinal ile 3D Secure sayfasına bakın.

Hangi ödemeler için ek doğrulama yapılması gerektiğini banka belirler. Bu karar Shopify yöneticisi üzerinden denetlenemez. Söz konusu değişikliği etkinleştirmek için işlem gerekmez.

Ek Google Analytics JavaScript alanı değişiklikleri

Online Mağaza > Tercihler üzerinden Shopify yöneticinizdeki Ek Google Analytics JavaScript bölümüne dahil edilmiş JavaScript, görünmez iFrame olarak ödeme sayfasına eklenmiştir. Bu durum, analizlerde kullanılan JavaScript'i etkilemez. Ancak ödeme sayfası üzerinde başka değişikliklerin yapılmasına engel olur. JavaScript'i başka nedenlerle ödeme sayfanıza eklemek isterseniz bunu doğrudan checkout.liquid dosyasına dahil edin.

CSS değişiklikleri

heading-* ayrıca tüm ödeme adımlarına text-container CSS sınıfları eklenmiştir.

Hata iletisi

Seçtikleri hızlı ödeme yöntemi kullanılamıyorsa bir hata banner'ı, müşterileri bu konuda bilgilendirir. Söz konusu banner, ödemenin İletişim Bilgileri adımının üst kısmında görünür.

Görsel

Önceki bir kargo ücretinin artık kullanılamadığını müşterilere bildiren hata banner'ı taşınmıştır. Bu banner artık doğrudan, kargo seçeneklerinin üst kısmında görünür.

Görsel

İlgili bağlantılar

Shopify ile satış yapmaya hazır mısınız?

Ücretsiz olarak dene