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

Herhangi bir kodu değiştirmenize gerek kalmadan ödeme ve hesaplar sayfalarınızın estetiğini özelleştirmek için Checkout Branding API tarafından desteklenen Checkout Blocks'taki marka öğeleri düzenleyicisini kullanabilirsiniz.

Herhangi bir ödeme yapılandırmasına yönelik renkleri ve ödeme öğelerini düzenlemek için marka öğeleri düzenleyicisini kullanabilirsiniz. Marka öğeleri düzenleyicisini kullanarak ödeme tasarımınızda yaptığınız değişiklikler; teşekkür sayfası, sipariş durumu sayfası ve yeni müşteri hesabı sayfaları da dahil olmak üzere ödemenizin tüm sayfalarına uygulanır.

Marka öğeleri düzenleyicisini Shopify yöneticinizden başlatmak için Uygulamalar > Checkout Blocks'a ve ardından Marka öğeleri düzenleyicisi'ne tıklayın.

Ödeme renklerini kişiselleştirin

Renkler bölümünde, ödemenizin temel renklerini kişiselleştirebilirsiniz. Tasarımınızda daha ayrıntılı düzenlemeler yapmak istediğinizde, tek tek bölümlere uygulanan en fazla 4 renk şemasını da kişiselleştirebilirsiniz. Vurgu renkleri (bağlantılar gibi etkileşimli öğeler için) ve marka renkleri (birincil ve ikincil düğmeler gibi öğeler için kullanılır) dahil olmak üzere renk türlerini düzenleyebilirsiniz.

Adımlar:

Genel renkleri kişiselleştirme
  1. Shopify yöneticinizden Uygulamalar > Checkout Blocks bölümüne gidin.

  2. Marka öğeleri düzenleyicisi'ne tıklayın.

  3. Renkler bölümünde Genel renkler'e tıklayın.

  4. Mevcut herhangi bir ödeme rengini geçersiz kılmak için Genel renkler bölümünde simgesine tıklayın ve ardından aşağıdaki işlemlerden birini yaparak istediğiniz rengi seçin:

    • Rengi seçmek için renk seçiciyi kullanın.
    • Mevcut alana HEX renk kodunu yazın.
  5. Kaydet'e tıklayın.

Renk şemalarını kişiselleştirme
  1. Shopify yöneticinizden Uygulamalar > Checkout Blocks bölümüne gidin.

  2. Marka öğeleri düzenleyicisi'ne tıklayın.

  3. Renkler bölümünde, belirli bir renk şemasını kişiselleştirmek için Şema 1, Şema 2, Şema 3 veya Şema 4'e tıklayın.

  4. Kişiselleştirmek istediğiniz aşağıdaki bileşenlerden herhangi birini seçin:

    • Ana renkler
    • Form denetimleri
    • Birincil düğme
    • İkincil düğme
  5. Temel bölümünde, kişiselleştirmek istediğiniz renk türünün yanındaki simgesine tıklayın ve ardından aşağıdaki işlemlerden birini yaparak istediğiniz rengi seçin:

    • Rengi seçmek için renk seçiciyi kullanın.
    • Mevcut alana HEX renk kodunu yazın.
  6. İsteğe bağlı: Form denetimleri, Birincil düğme veya İkincil düğme şemasını düzenliyorsanız Seçildiğinde veya Ü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 ardından aşağıdaki işlemlerden birini yaparak istediğiniz rengi seçin:

    • Rengi seçmek için renk seçiciyi kullanın.
    • Mevcut alana HEX renk kodunu yazın.
  7. Kaydet'e tıklayın.

Ödeme öğelerini kişiselleştirme

Marka öğeleri düzenleyicisinin Kişiselleştirmeler bölümünde, ödemenizin aşağıdaki öğelerini düzenleyebilirsiniz:

  • Favicon: Ödeme sırasında müşterilere tarayıcı sekmesinde gösterilen simgeyi seçin.
  • Genel: Tüm öğelerin (form girdileri, düğmeler ve kartlar) köşe yarıçapını ayarlayın.
  • Üstbilgi ve logo: Ödemedeki üstbilgi konumunun yanı sıra içerik haritasının, sepet bağlantısının ve logonun gösterilip gösterilmeyeceğini seçin.
  • Ana: Arka plan resimleri, kenarlık genişlikleri ve renk şemaları dahil olmak üzere, ödemenin ana içerik alanına tasarım şemaları uygulayın.
  • Sipariş özeti: Arka plan resimleri, kenarlık genişlikleri ve renk şemaları dahil olmak üzere, müşterinin sipariş özetini içeren ödeme kenar çubuğuna tasarım şemaları uygulayın.
  • Altbilgi: Ödemedeki altbilgi genişliğinin yanı sıra mağaza politikalarının gösterilip gösterilmeyeceğini seçin.
  • Tipografi: En fazla 3 düzeydeki üstbilgiler için yazı tipi ailesini, kalınlığını, boyutunu, harf aralığını ve büyük/küçük harf kullanımını seçin.
  • Düğmeler: Birincil ve ikincil düğmelerin iç boşluğunu, kenarlıklarını ve stillerini seçin.
  • Formlar: Onay kutuları, metin alanları ve bir listeden seçilen seçenekler gibi ödeme formu girdilerinin stillerini kişiselleştirin.
  • Ürün küçük resimleri: Ödeme sayfasındaki ürün görsellerinin kenarlık ve köşe yarıçapı stillerini ayarlayın.

Adımlar:

  1. Shopify yöneticinizden Uygulamalar > Checkout Blocks bölümüne gidin.

  2. Marka öğeleri düzenleyicisi'ne tıklayın.

  3. Kişiselleştirmeler bölümünde, Üstbilgi ve logo gibi kişiselleştirmek istediğiniz öğelerden herhangi birine tıklayın.

  4. Mevcut kişiselleştirme seçeneklerini kullanarak ödeme öğesini tercihinize göre ayarlayın.

  5. Kaydet'e tıklayın.

Ödeme yapılandırmaları arasında geçiş yapma

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

Etkin ve taslak ödeme sayfası yapılandırmalarınızı yönetme hakkında daha fazla bilgi edinin.

Adımlar:

  1. Shopify yöneticinizden Uygulamalar > Checkout Blocks bölümüne gidin.

  2. Marka öğeleri düzenleyicisi'ne tıklayın.

  3. Etkin yapılandırmanın ve mevcut taslak yapılandırmaların listesini içeren bir açılır menü açmak için mevcut ödeme sayfası yapılandırmasının adına tıklayın, ardından kişiselleştirmek istediğiniz ödeme sayfası 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 ⊕ Yeni yapılandırma oluştur'a tıklayın.

Ödeme sayfanızı önizleme

Marka öğeleri düzenleyicisinde yaptığınız değişiklikleri istediğiniz zaman, önizlemek istediğiniz ödeme yapılandırmasını seçip ardından Önizleme'ye tıklayarak önizleyebilirsiniz. Ödeme ve hesaplar düzenleyicisi, yaptığınız tüm değişiklikler uygulanmış olarak ayrı bir sekmede başlatılır. Böylece, değişikliklerin ödeme sayfasında nasıl göründüğünü önizleyebilirsiniz.

Adımlar:

  1. Shopify yöneticinizden Uygulamalar > Checkout Blocks bölümüne gidin.

  2. Marka öğeleri düzenleyicisi'ne tıklayın.

  3. Ödeme yapılandırmanızın renklerinde veya ödeme öğelerinde, ayarlamak istediğiniz kişiselleştirmeleri yapın.

  4. Önizleme'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:

  1. Shopify yöneticinizden Uygulamalar > Checkout Blocks bölümüne gidin.

  2. Marka öğeleri düzenleyicisi'ne tıklayın.

  3. Marka öğeleri düzenleyicisini kullanarak kişiselleştirmelerin uygulandığı ödeme yapılandırmasını seçin.

  4. Diğer işlemler > Yapılandırmayı dışa aktar'a tıklayın.

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

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

  1. Shopify yöneticinizden Uygulamalar > Checkout Blocks bölümüne gidin.

  2. Marka öğeleri düzenleyicisi'ne tıklayın.

  3. İçe aktarılan marka profilini uygulamak istediğiniz ödeme yapılandırmasını seçin.

  4. Diğer işlemler > Yapılandırmayı içe aktar'a tıklayın.

  5. Ödeme marka öğelerini içe aktar 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. İçe aktar ve devam et'e tıklayın.
  6. Önceden yüklenmiş kişiselleştirme yapılandırmasını inceleyin. Gerektiğinde değiştirin.

  7. Kaydet'e tıklayın.

Ödeme stilinizi varsayılana sıfırlama

Marka öğeleri düzenleyicisini kullanarak bir rengi veya ödeme öğesini düzenlediğinizde, değiştirdiğiniz rengin ya da öğenin yanındaki Sıfırla'ya tıklayarak ilgili değeri varsayılan değerine sıfırlayabilirsiniz.

Dilediğiniz zaman, tüm ödeme yapılandırması marka öğelerinizi Shopify'ın varsayılan değerlerine sıfırlayabilirsiniz. Ödeme yapılandırmasını sıfırlama işlemi, marka öğeleri düzenleyicisinin tüm sayfalarındaki tüm kişiselleştirmeleri temizler. Bu işlem geri alınamaz.

Adımlar:

  1. Shopify yöneticinizden Uygulamalar > Checkout Blocks bölümüne gidin.

  2. Marka öğeleri düzenleyicisi'ne tıklayın.

  3. Sıfırlamak istediğiniz ödeme yapılandırmasını seçin.

  4. Varsayılana sıfırla'ya tıklayın.

  5. Varsayılan stillere sıfırlansın mı? iletişim kutusunda Devam'a tıklayın.