Checkout Blocks'ta marka öğeleri düzenleyicisini kullanma

Ödeme ve hesap sayfalarınızın estetik görünümünü, kod üzerinde herhangi bir değişiklik yapmadan özelleştirmek için Checkout Blocks'taki Checkout Branding API tarafından desteklenen marka öğeleri düzenleyicisini kullanabilirsiniz.

Marka öğeleri düzenleyicisini kullanarak herhangi bir ödeme yapılandırmasının renklerini ve ödeme öğelerini düzenleyebilirsiniz. Marka öğeleri düzenleyicisini kullanarak ödeme tasarımında yaptığınız değişiklikler, teşekkür sayfası, sipariş durumu sayfası ve yeni müşteri hesapları sayfaları da dahil olmak üzere tüm ödeme sayfalarınıza uygulanır.

Marka öğeleri düzenleyicisini Shopify yöneticinizden başlatmak için Uygulamalar > Checkout Blocks'a tıklayın ve Branding editor (Marka öğeleri düzenleyicisi) seçeneğine tıklayın.

Bu sayfada

Ödeme sayfasındaki renkleri kişiselleştirme

Colors (Renkler) bölümünde, ödeme sayfanızdaki temel renkleri kişiselleştirebilirsiniz. Tasarımınızda daha ayrıntılı düzenlemeler yapmak istediğinizde, ayrı bölümlere uygulanacak 4 adede kadar renk şemasını da kişiselleştirebilirsiniz. Vurgu renklerini (bağlantılar gibi etkileşimli öğeler için) ve marka renklerini (birincil ve ikincil düğmeler gibi öğeler için) içeren renk türlerini düzenleyebilirsiniz.

Adımlar:

Customize global colors

Shopify yöneticinizde Uygulamalar > Checkout Blocks'a tıklayın.
Branding editor'a (Marka öğeleri düzenleyicisi) tıklayın.
Colors (Renkler) bölümünde, Global colors'a (Genel renkler) tıklayın.
Ödeme sayfasındaki mevcut renkleri geçersiz kılmak için Global colors (Genel renkler) bölümünde ⊕ simgesine tıklayın ve aşağıdakilerden birini yaparak istediğiniz rengi seçin:
- Rengi seçmek için renk seçiciyi kullanın.
- Mevcut alana HEX renk kodunu girin.
Kaydet'e tıklayın.

Customize color schemes

Shopify yöneticinizde Uygulamalar > Checkout Blocks'a tıklayın.
Branding editor'a (Marka öğeleri düzenleyicisi) tıklayın.
Colors (Renkler) bölümünde, belirli bir renk şemasını kişiselleştirmek için Scheme 1, Scheme 2, Scheme 3 veya Scheme 4 (Şema 1, Şema 2, Şema 3 veya Şema 4) seçeneklerinden birine tıklayın.
Aşağıdaki bileşenlerden, kişiselleştirmek istediğiniz herhangi birini seçin:
- Ana renkler
- Form denetimleri
- Birincil düğme
- İkincil düğme
Base (Temel) bölümünde, kişiselleştirmek istediğiniz renk türünün yanındaki ⊕ simgesine tıklayın ve aşağıdakilerden birini yaparak istediğiniz rengi seçin:
- Rengi seçmek için renk seçiciyi kullanın.
- Mevcut alana HEX renk kodunu girin.
İsteğe bağlı: Form controls (Form denetimleri), Primary button (Birincil düğme) veya Secondary button (İkincil düğme) şemalarından birini düzenliyorsanız On select (Seçildiğinde) veya On hover (Üzerine gelindiğinde) etkileşim davranışlarının renklerini de kişiselleştirebilirsiniz. Kişiselleştirmek istediğiniz renk türünün yanındaki ⊕ simgesine tıklayın ve aşağıdakilerden birini yaparak istediğiniz rengi seçin:
- Rengi seçmek için renk seçiciyi kullanın.
- Mevcut alana HEX renk kodunu girin.
Kaydet'e tıklayın.

Ödeme öğelerini kişiselleştirme

Marka öğeleri düzenleyicisinin Customizations (Kişiselleştirmeler) bölümünden, ödeme sayfanızdaki aşağıdaki öğeleri düzenleyebilirsiniz:

Favicon: Ödeme sırasında tarayıcı sekmesinde müşterilere gösterilecek simgeyi seçin.
Global (Genel): Tüm öğeler (form girişleri, düğmeler ve kartlar) için köşe yarıçapını ayarlayın.
Header & logo (Üstbilgi ve logo): Ödeme sayfalarındaki üstbilginin konumunu ve içerik haritalarının, sepet bağlantısının ve logonun gösterilip gösterilmeyeceğini seçin.
Main (Ana): Ödeme sayfasında arka plan resmini, kenarlık genişliklerini ve renk şemalarını da içeren ana içerik alanına tasarım şemaları uygulayın.
Order summary (Sipariş özeti): Ödeme sayfasında, müşterinin sipariş özetinin bulunduğu kenar çubuğuna arka plan resmini, kenarlık genişliklerini ve renk şemalarını da içeren tasarım şemaları uygulayın.
Footer (Altbilgi): Ödeme sayfasındaki altbilginin genişliğini ve mağaza politikalarının gösterilip gösterilmeyeceğini seçin.
Typography (Tipografi): 3 adede kadar üstbilgi düzeyi için yazı tipi boyutu, yazı tipi ailesi ve yazı tipi ağırlığını, boyutu, harf aralığını ve büyük/küçük harf kullanımını seçin.
Buttons (Düğmeler): Birincil ve ikincil düğmelerin dolgu, kenarlık ve stillerini seçin.
Forms (Formlar): Ödeme formu girişlerinin (onay kutuları, metin alanları ve listeden belirlenen seçenekler gibi) stilleri özelleştirin.
Product thumbnails (Ürün küçük resimleri): Ödeme sayfasındaki ürün görselleri için kenarlık ve köşe yarıçapı stillerini ayarlayın.

Adımlar:

Shopify yöneticinizde Uygulamalar > Checkout Blocks'a tıklayın.
Branding editor'a (Marka öğeleri düzenleyicisi) tıklayın.
Customizations (Kişiselleştirmeler) bölümünde, kişiselleştirmek istediğiniz öğelerden (Üstbilgi ve logo gibi) herhangi birine tıklayın.
Mevcut kişiselleştirme seçeneklerini kullanarak ödeme öğesini tercihlerinize uygun şekilde ayarlayın.
Kaydet'e tıklayın.

Ödeme yapılandırmalarını değiştirme

Marka öğeleri düzenleyicisini açtığınızda, varsayılan olarak o anda Etkin (yayınlanmış) olan ödeme yapılandırmasını düzenlersiniz. Ancak marka öğeleri düzenleyicisini kullanarak, düzenlemek istediğiniz ödeme yapılandırmasını değiştirebilir ve yeni ödeme yapılandırmaları oluşturabilirsiniz.

Yayınlanmış ve taslak ödeme sayfalarınızı yönetme hakkında daha fazla bilgi edinin.

Adımlar:

Shopify yöneticinizde Uygulamalar > Checkout Blocks'a tıklayın.
Branding editor'a (Marka öğeleri düzenleyicisi) tıklayın.
Mevcut ödeme yapılandırmasının adına tıklayarak, yayınlanmış olan yapılandırmanın yanı sıra taslak yapılandırmaların da yer aldığı bir açılır menüyü açın ve kişiselleştirmek istediğiniz ödeme yapılandırmasını seçin:
- Düzenlemek istediğiniz mevcut bir yapılandırmayı seçin.
- Shopify yöneticinizin Ödeme ayarlarına yönlendirilmek için ⊕ Create new configuration'a (Yeni yapılandırma oluştur) tıklayın.

Ödeme sayfanızın önizlemesini görme

Marka öğeleri düzenleyicisinde yaptığınız değişikliklerin önizlemesini dilediğiniz zaman, önizlemesini görmek istediğiniz ödeme yapılandırmasını seçip Preview (Önizleme) seçeneğine tıklayarak görebilirsiniz. Ödeme ve hesaplar düzenleyicisi, tüm değişiklikleriniz uygulanmış olarak, ayrı bir sekmede açılır. Böylece, değişikliklerin ödeme sayfasında nasıl görüneceğinin önizlemesini görebilirsiniz.

Adımlar:

Shopify yöneticinizde Uygulamalar > Checkout Blocks'a tıklayın.
Branding editor'a (Marka öğeleri düzenleyicisi) tıklayın.
Ödeme yapılandırmanızda değiştirmek istediğiniz renkleri veya ödeme sayfası öğelerini kişiselleştirin.
Önizle'ye tıklayın.

Ödeme yapılandırmalarını dışa ve içe aktarma

JSON dosyalarını kullanarak ödeme yapılandırmalarını dışa ve içe aktarabilirsiniz.

Bir ödeme yapılandırmasını dışa aktarma:

Shopify yöneticinizde Uygulamalar > Checkout Blocks'a tıklayın.
Branding editor'a (Marka öğeleri düzenleyicisi) tıklayın.
Marka öğeleri düzenleyicisini kullanarak, kişiselleştirmelerin uygulanmış olduğu ödeme yapılandırmasını seçin.
More actions (Diğer işlemler) > Export configuration'a (Yapılandırmayı dışa aktar) tıklayın.

Ödeme yapılandırması, yerel cihazınıza .json olarak indirilir.

Bir ödeme yapılandırmasını içe aktarma:

Shopify yöneticinizde Uygulamalar > Checkout Blocks'a tıklayın.
Branding editor'a (Marka öğeleri düzenleyicisi) tıklayın.
İçe aktarılan marka öğeleri profilini uygulamak istediğiniz ödeme yapılandırmasını seçin.
More actions > Import configuration (Diğer işlemler > Yapılandırmayı içe aktar) seçeneğine tıklayın.
Import checkout branding (Ödeme sayfası marka öğelerini içe aktarın) iletişim kutusunda, marka öğeleri JSON dosyanızı yükleyin:
1. Dosya Ekle'ye tıklayın.
2. Cihazınızdan uygun JSON dosyasını seçin.
3. Import and continue (İçe aktar ve devam et) seçeneğine tıklayın.
Önceden yüklenmiş kişiselleştirme yapılandırmasını gözden geçirin. Gerekirse değiştirin.
Kaydet'e tıklayın.

Ödeme stilinizi varsayılana sıfırlayın

Marka öğeleri düzenleyicisini kullanarak bir rengi veya ödeme öğesini düzenlerken, değiştirmiş olduğunuz rengin veya öğenin yanındaki Reset (Sıfırla) seçeneğine tıklayarak belirli bir değeri tekrar varsayılan değere döndürebilirsiniz.

Ödeme yapılandırmasındaki tüm marka öğelerini dilediğiniz zaman Shopify varsayılan değerlerine sıfırlayabilirsiniz. Ödeme yapılandırmasını sıfırladığınızda, marka öğeleri düzenleyicisinin tüm sayfalarındaki tüm kişiselleştirmeler temizlenir. Bu işlem geri alınamaz.

Adımlar:

Shopify yöneticinizde Uygulamalar > Checkout Blocks'a tıklayın.
Branding editor'a (Marka öğeleri düzenleyicisi) tıklayın.
Sıfırlamak istediğiniz ödeme yapılandırmasını seçin.
Reset to default'a (Varsayılana sıfırla) tıklayın.
Reset to default styles? (Varsayılan stillere sıfırlansın mı?) iletişim kutusunda, Continue (Devam) düğmesine tıklayın.