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ırlanmak için aşağıdakileri yapın:

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 Checkout'u 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.

Adımlar:

1. Shopify yöneticinizden Ödeme sayfası yükseltmesi sayfasına gidip Ödeme sayfasının önizlemesini görüntüleyin seçeneğine tıklayın.
2. Listeden geçerli temanızı seçin ve ardından Önizleme'ye tıklayın.
3. Müşteri olarak ödeme işleminden geçerek ödeme testi oluşturun.

Not

Bazı ödeme sağlayıcıları test ödemeleri için minimum bir fiyat belirler. Shopify Payments için bu fiyat 0,50 CAD, 0,35 USD veya 0,30 EUR'dur. Diğer ödeme sağlayıcılarının farklı eşik değerleri olabilir.

Ödemeniz şu an için işleme alınamadı, lütfen birkaç dakika içinde tekrar deneyin yazan bir hata alırsanız, test siparişinin fiyatını artırmayı veya ödeme testini ücretsiz ürünlerle tamamlamayı deneyin.

Söz konusu testler sırasında hatayla karşılaşırsanız ödeme sayfasında gerçekleştirdiğiniz bazı özelleştirmeler yeni sürümdeki iyileştirmelerle çakışıyor olabilir. Böyle bir durumda, yükseltme işleminden önce checkout.liquid dosyanızda değişiklikler yapmanız gerekir.

Hataları giderme

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.

Adımlar:

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.

2. ... düğmesine ve ardından Çoğalt'a tıklayın.

3. Daha fazla tema bölümünden çoğalttığınız temayı bulun ve ardından ... düğmesi > 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.

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

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

   1. Shopify yöneticinizden Ödeme sayfası yükseltmesi sayfasına 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 Checkout'a yükseltme

Ödeme sayfanızı yükseltmek, Shopify Checkout'a 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ükseltmesi 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ızda, Temalar'a tıklayın.
   2. Çoğaltılan temanızı bulun ve ... düğmesi > 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 Checkout'taki yenilikler

Shopify Checkout'un yeni sürümü aşağıdaki değişiklikleri ve yeni özellikleri içerir:

• Abonelikler
• Yukarı satış
• Ödeme sırasında bahşiş verme
• Teslim alım ve yerel teslimat
• Ek uluslararası alanlar
• Shop ile siparişleri takip et düğmesi
• Sipariş durumu sayfası güncellemeleri
• Genel dosya değişiklikleri
• İskeletler/yükleme durumları
• Hata iletisi
• Veri özelliği değişiklikleri
• Erişilebilirlik ile ilgili iyileştirmeler

Abonelikler

Ödeme özelleştirmelerinizi korurken abonelik ürünleri sunabilmeniz için Shopify Ödeme Sayfası'na birden fazla bölüm eklendi. Bu bölümler, doğrudan Shopify Ödeme Sayfası içinde abonelik ürünleri satmanıza ve yinelenen ödemeleri işlemenize olanak tanır.

Ödeme sayfası yükseltmesini tamamladıktan sonra Shopify App Store'dan bir abonelik uygulaması ekleyerek abonelikler sunabilir veya yeni abonelik API'leri ile özel bir uygulama oluşturabilirsiniz.

Shopify Yardım Merkezi'nde abonelikler hakkında daha fazla bilgi edinin:

• Abonelikler etkinleştirildiğinde, abonelikler için kullanılan kargo yöntemleri tek seferlik satın alımların kargo yöntemlerinden ayrı olarak gösterilir.
• .product_description_variant Span.product_description_selling_plan ürünle ilişkili bir abonelik olduğunda ek satır öğesi özelliği olarak görünür.
• Sipariş özetindeki toplamın altında, bir araç ipucu ile birlikte, yinelenen toplamı görünür.
• Siparişe bir abonelik ürünü dahil edildiğinde abonelik kargo seçenekleri görüntülenir.

Yukarı satış

Yeni satın alım sonrası uygulamaları Shopify App Store'da kullanıma sunuldu. Bu uygulamalar, müşterilerinize doğrudan satın alım sonrası teklifleri sunar ve fatura veya kargo bilgilerini yeniden girmeden yukarı satılan ürünü içerecek şekilde, tamamlanan siparişlerini değiştirme imkanı verir.

Bu ödeme sayfası yükseltmesi, ödeme dosyalarınızda, satın alım sonrası yukarı satışların özelleştirilmiş ödeme sayfanızla çalışmaya izin veren değişiklikler içerir.

Satın alım sonrası yukarı satış hakkında daha fazla bilgi edinin.

Shopify yöneticisinde geçerli bir satın alım sonrası uygulaması yüklendiğinde, müşteriler satın alım sonrası teklifleri alır.

Not

Satın alım sonrası sayfasının özelleştirilmesi, üçüncü taraf yukarı satış uygulaması içinde yapılır. checkout.liquid kullanılarak özelleştirilemez.

Ödeme sırasında bahşiş verme

Bahşiş seçenekleri, müşterilerin online siparişleriyle ilgili bir bahşiş eklemelerini sağlamak veya bahşiş yerine bağış toplamak için kullanılabilir. Bahşiş seçeneği etkinleştirildiğinde, ödeme sayfasının ödeme yöntemi adımında bir Bahşiş ekle bölümü görünür. Bahşiş ekle bölümünde, özel bahşiş tutarı girilebilen bir alanı ile birlikte önceden seçilen üç bahşiş seçeneği bulunur.

Bahşiş seçeneği etkinleştirildiğinde, ödeme sayfasının ödeme yöntemi adımında bir Bahşiş ekle bölümü görünür.

Bahşiş seçenekleri sunma hakkında daha fazla bilgi edinin.

Mağazadan teslim ve yerel teslimat

Mağazadan teslim ve yerel teslimat, müşterilerin siparişlerini yerel olarak almasına olanak sağlayan yeni teslimat yöntemleridir. Bu teslimat yöntemleri etkinleştirildiğinde müşteriler, ödeme işleminin kargo adımında mağazadan teslim alımı veya kargoyla teslimatı seçebilir.

Mağazadan teslim ve yerel teslimat seçeneklerini nasıl etkinleştireceğinizi öğrenin.

• Yerel teslimat etkinleştirildiğinde ve müşteri tarafından seçildiğinde, yerel teslimata yönelik ek alanlar görünür.

• Mağazadan teslim etkinleştirildiyse ödemedeki Bilgiler sayfasında, müşteriye bir teslimat yöntemi bölümü gösterilir. Kargo kullanılamıyorsa yalnızca teslim alım bilgileri görüntülenir.

• Teslimat yöntemleri, farklı sekmeler olarak gösterilir. - Kargo seçildiğinde, müşterilerden gönderi bilgilerini girmeleri istenir ve Kargoya devam et seçeneğine tıklandığında kullanılabilir gönderi yöntemlerini görüntülenir. - Teslim alım seçeneğinin belirlendiğinde, teslim alım konumlarının bir listesini gösterilir. Müşteriler, istenilen teslim alım konumunun radyo düğmesine, ardından Ödemeye devam et'e tıklar.

• Müşteriler ödeme işleminin kargo adımında Teslim alım seçeneğini belirlerse kargo bilgileri toplanmaz. Müşterilerin, ödeme işleminin ödeme adımında fatura bilgilerini girmesi gerekir.

• Yerel teslimat yönergeleri, sipariş durumu sayfasında gösterilir. Bunları, Shopify yöneticinizdeki Ayarlar > Kargo ve teslimat bölümüne giderek düzenleyebilirsiniz. Mağazadan teslim bölümünde, düzenlemek istediğiniz konumu bulun ve Yönet'e tıklayın.

• Sipariş durumu sayfası, teslimat ve teslim alımlara ilişkin ilerlemeyi göstermek üzere güncellendi. İletiler, şu zamanlarda görüntülenir: - Bir sipariş hazırlandığında ve teslimata hazır olduğunda. - Bir teslimat tamamlandığında. Bu ileti, aynı ürünleri yeniden sıralamak için de bir bağlantı sağlar. - Bir teslim alım siparişi onaylandığında. Teslim alıma hazır olduğunda müşterinin e-posta alacağını belirtir. - Bir teslim alım siparişi teslim alınmaya hazır olduğunda. - Bir teslim alım siparişi teslim alındığında.

Ek uluslararası alanlar

Bazı ülkelerde, kargolarınızın müşterilerinize ulaşması için karşılamanız gereken benzersiz kargo yönetmelikleri bulunur. Benzersiz kargo yönetmeliklerine sahip ülkelerde ek alanlar artık kullanılabilir. Bu yeni alanlar, ödeme işleminin ödeme yöntemi adımında görünür.

Ek uluslararası alanlar hakkında daha fazla bilgi edinin.

• Ek ödeme alanları yalnızca Brezilya, Güney Kore, İtalya ve Çin'deki müşterilere görünür.

Shop ile siparişleri takip et düğmesi

Sipariş durumu ve teşekkür sayfalarındaki Shop ile siparişleri takip et düğmesi, yeni bir tasarım ile güncellendi.

Shop uygulaması hakkında daha fazla bilgi edinin.

• Müşterilerin, Shop'taki satın alımlarını takip etmelerini isteyen bir metin düğmesi eklendi.
• Shop Pay takibini göstermek üzere parametreler eklendi.
• Aşağıdaki durumlar için Shop ile siparişleri takip et düğmesine yönelik işleme: - teslimat girişiminde bulunuldu - onay - teslim edildi - başarısız oldu - taşınıyor - kargolanamaz - teslimata çıktı

Sipariş durumu sayfası güncellemeleri

Sipariş durumu sayfasında birkaç güncelleme yapıldı.

• Hediye kartı bilgileri için, hediye kartı satın alındığında görüntülenen özel bir bölüm oluşturuldu.
• Abonelik bilgileri eklendi.
• icon-svg--align-text-bottom sınıfı kaldırıldı.
• data-step="thank-you" data-step="thank_you" olarak değiştirildi. Müşterinin hangi ödeme sayfasında bulunduğunu tanımlamak için bu özelliği kullanıyorsanız, bunun yerine Shopify.Checkout.page JavaScript nesnesini kullanın.
• Sipariş durumu kartı eklendi.

Genel dosya değişiklikleri

• div.content-box__row artık role="table" içeriyor.

• Müşteri, teşekkür adımındaysa ve QR paketine sahipse show_qr.js eklenir.

• Müşterinin ödeme sayfasına erişimi olduğundan emin olmak üzere bir kontrol eklendi.

• Hediye kartları artık checkouts/order_status/gift_cards ile gösteriliyor.

• İletişim bilgileri yönü, enforce_content_directionality ile düzeltildi.

• Kargo bilgileri, checkouts/web/checkouts/contact_information/pickup bölümüne taşındı.

• Sipariş özeti kenar çubuğunda birden fazla kargo satırının görüntülenmesi artık destekleniyor.

• tr.total-line yalnızca güncellenen toplamlar varsa görüntülenir.

• Genel ödeme satırları artık destekleniyor.

• Ödeme sırasında para birimi değiştirme artık destekleniyor.

• #payment-gateway-subfields artık sınıflar içeriyor: - .radio-wrapper content-box__row .content-box__row--secondary - .card-fields-container

• Kredi kartı ipucu ayarlandı ve artık div.field__icon bölümünde.

• Aria etiketi, kargo ücretlerinin tam açıklamasından kaldırıldı.

• Kargo ücretleri form alanları, checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields bölümüne taşındı.

İskeletler/yükleme durumları

Sayfa yüklenirken görünür olan iskeletler eklenerek veya yükleme tamamlanıncaya kadar bazı öğeleri seçmeli olarak gizlenerek, ödeme sayfaları için yükleme durumları güncellendi. Bu değişiklikler yükleme sürelerini optimize eder.

• Yükleme sırasında gizlenen nesneler: - del.total-recap__original-price - .total-line__price span.payment-due__currency - span.order-summary__emphasis

• Yüklenirken iskelet gösteren nesneler: - Span.total-recap__final-price - .product__price del.order-summary__small-text - .product__price del.order-summary__emphasis - .total-line__price span.payment-due__price - .total-line__price span.order-summary__emphasis - .total-line__price span.visually-hidden - .total-line__price.total-line--subtotal span.order-summary__emphasis

Hata iletisi

Ödeme sayfasına yeni hata iletileri eklendi:

• Adres alanına vatandaşlık numarası uyarısı eklendi.
• Sepet, varış yeri veya ülke için kullanılabilen kargo ücretlerinin iki ayrı uyarı iletisine ayrılmış olduğunu belirten bir uyarı: Sepet veya varış yeri için ücret bulunmadığını belirten bir uyarı mesajı ve bir ülkeye yönelik ücretlerin mevcut olmadığını belirten ayrı bir uyarı.
• Bir geliştirme mağazasında satın alım tamamlandığında ödeme sayfasında görünen bir uyarı başlığı eklendi.
• Müşteriden ödeme sırasında ücret alınmayacağında görüntülenen bir bildirim eklendi.
• Kimlik doğrulama değişikliği hatasını belirten bir uyarı başlığı eklendi.
• Ödeme işleminin kargo adımında kargo yöntemlerinin kullanılamadığını belirtmek üzere bir hata iletisi eklendi.

Veri özelliği değişiklikleri

Trekkie, aşağıdaki nesnelerden kaldırıldı:

• Continue_shipping_button
• Get_shipping_updates_button
• Shipping_updates_handle_field
• Shipping_updates_submit_button
• Change_shipping_address_link
• breadcrumb_cart_link
• apply_discount_button
• Have_an_account_login_link
• Email_or_phone_field
• Email_field
• buyer_accepts_marketing_field
• Change_billing_address_link
• Change_contact_method_link
• Change_payment_method_link
• Change_pickup_method_link
• Change_shipping_address_link
• Ödeme sayfası giriş alanları: - {type}_address_field - {type}_firstname_field - {type}_lastname_field - {type}_company_field - {type}_address1_google_autocomplete_field - {type}_address1_field - {type}_address2_field - {type}_city_field - {type}_country_field - {type}_province_field - {type}_zip_google_autocomplete_field - {type}_phone_field

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.

• Aşağıdakiler için ul üzerine role="list" eklendi: - u.breadcrumb - ul.payment-method-list - ul.os-timeline - ul.policy-list

• İpucu, telephone_field üzerinde aria-labelledby öğesinden kaldırıldı.

• Shop'ta, giriş etiketi, telefona yönlendirme olarak değiştirildi.

• Vergiler beklenirken h3 başlıkları eklendi.

• Yönlendirme yapılırken h3 başlıkları eklendi.

• Kargo yöntemleri yüklenirken p etiketi, h3 etiketi olarak değiştirildi.

• Otomatik tamamlama artık phone yerine mobile tel öğesine yönlendiriyor.

• role="region" eklenerek div[data-processing-order] öğesi güncellendi.

• div[data-announce-change] öğesi, aşağıdakilerle güncellendi: - Ekli role="region" - aria-labelledby öğesini, üstbilgi öğesinin kimliğiyle eşleşecek ayarla - aria-describedby öğesini, içerik kapsayıcısı öğesinin kimliğiyle eşleşecek ayarla

• div.content-box blank-slate öğesi, aşağıdakilerle güncellendi: - Ekli role="region" - aria-labelledby öğesini, üstbilgi öğesinin kimliğiyle eşleşecek ayarla

• Hızlı ödeme ızgarası, div yerine ul ve li öğeleri kullanılacak şekilde geliştirildi.

• Sipariş özeti aşağıdakilerle güncelledi: - İndirimli fiyat ve normal fiyata ilişkin iyileştirilmiş netlik - Span öğesi, dl etiketi şeklinde değiştirildi - del etiketi, dt ve dd etiketleri olarak değiştirdi.

• Ödeme ayrıntısı yöntemleri aşağıdakilerle güncelledi: - span.radio__label__accessory öğesi şu olarak değiştirildi: div.radio__label__accessory - span.visually-hidden öğesi şu olarak değiştirildi: h3.visually-hidden - span.payment-icon-list__more öğesi şu olarak değiştirildi: li.payment-icon-list__more - span.content-box__small-text öğesi şu olarak değiştirildi: small.content-box__small-text

İlgili bağlantılar

• checkout.liquid dosyasını düzenlemeye yönelik en iyi uygulamalar
• checkout.liquid
• checkout.liquid dosyasında CSS