Menggunakan editor branding di Checkout Blocks

Anda dapat menggunakan editor branding di Checkout Blocks, yang didukung oleh Checkout Branding API, untuk menyesuaikan estetika halaman checkout dan akun Anda tanpa harus mengubah kode apa pun.

Anda dapat menggunakan editor branding untuk mengedit warna dan elemen checkout untuk konfigurasi checkout apa pun. Perubahan yang Anda buat pada desain checkout menggunakan editor branding berlaku untuk semua halaman checkout Anda, termasuk halaman terima kasih, halaman status pesanan, dan halaman akun pelanggan baru.

Untuk membuka editor branding dari admin Shopify Anda, klik Aplikasi > Checkout Blocks, lalu klik Editor branding.

Sesuaikan warna checkout

Di bagian Warna, Anda dapat menyesuaikan warna dasar checkout. Anda juga dapat menyesuaikan hingga 4 skema warna yang berlaku untuk setiap bagian saat ingin membuat editan yang lebih terperinci pada desain. Anda dapat mengedit jenis warna, termasuk warna aksen (untuk elemen interaktif, seperti tautan) dan warna merek (digunakan untuk elemen seperti tombol primer dan sekunder).

Langkah-langkah:

Sesuaikan elemen checkout

Di bagian Kustomisasi pada editor branding, Anda dapat mengedit elemen checkout berikut:

• Favicon: Pilih ikon yang ditampilkan kepada pelanggan di tab browser selama checkout.
• Global: Sesuaikan radius sudut untuk semua elemen (input formulir, tombol, dan kartu).
• Header & logo: Pilih posisi header di checkout, serta apakah akan menampilkan breadcrumb, tautan keranjang, dan logo.
• Utama: Terapkan skema desain ke area konten utama checkout, termasuk gambar latar belakang, lebar batas, dan skema warna.
• Ringkasan pesanan: Terapkan skema desain ke sidebar checkout yang berisi ringkasan pesanan pelanggan, termasuk gambar latar belakang, lebar batas, dan skema warna.
• Footer: Pilih lebar footer di checkout, serta apakah akan menampilkan kebijakan toko.
• Tipografi: Pilih ukuran font, jenis font, ketebalan font, ukuran, kerning, dan penggunaan huruf kapital untuk header hingga 3 tingkatan.
• Tombol: Pilih padding, batas, dan gaya tombol primer dan sekunder.
• Formulir: Sesuaikan gaya untuk input formulir checkout, seperti kotak centang, kolom teks, dan opsi yang dipilih dari daftar.
• Thumbnail produk: Sesuaikan gaya batas dan radius sudut untuk foto produk di checkout.

Langkah-langkah:

1. Dari admin Shopify, buka Aplikasi > Checkout Blocks.

2. Klik Editor branding.

3. Di bagian Kustomisasi, klik salah satu elemen yang ingin Anda sesuaikan, seperti Header & logo.

4. Dengan menggunakan opsi kustomisasi yang tersedia, sesuaikan elemen checkout sesuai preferensi Anda.

5. Klik Simpan.

Beralih konfigurasi checkout

Saat membuka editor branding, Anda akan mengedit konfigurasi checkout yang saat ini berstatus Aktif secara default. Namun, Anda dapat mengubah konfigurasi checkout yang ingin diedit menggunakan editor branding, serta membuat konfigurasi checkout baru.

Pelajari selengkapnya tentang cara mengelola konfigurasi checkout aktif dan draf Anda.

Langkah-langkah:

1. Dari admin Shopify, buka Aplikasi > Checkout Blocks.

2. Klik Editor branding.

3. Klik nama konfigurasi checkout saat ini untuk membuka menu tarik-turun yang berisi daftar konfigurasi aktif serta konfigurasi draf mana pun, lalu pilih konfigurasi checkout yang ingin Anda sesuaikan:

   • Pilih konfigurasi yang ada yang ingin Anda edit.
   • Klik ⊕ Buat konfigurasi baru untuk dialihkan ke pengaturan Checkout di admin Shopify Anda.

Pratinjau checkout Anda

Anda dapat mempratinjau perubahan yang dibuat di editor branding kapan saja dengan memilih konfigurasi checkout yang ingin dipratinjau, lalu mengeklik Pratinjau. Editor checkout dan akun akan terbuka di tab terpisah dengan semua perubahan yang diterapkan agar Anda dapat mempratinjau tampilannya di checkout.

Langkah-langkah:

1. Dari admin Shopify, buka Aplikasi > Checkout Blocks.

2. Klik Editor branding.

3. Buat kustomisasi pada warna atau elemen checkout di konfigurasi checkout Anda yang ingin disesuaikan.

4. Klik Pratinjau.

Mengekspor dan mengimpor konfigurasi checkout

Anda dapat mengekspor dan mengimpor konfigurasi checkout menggunakan file JSON.

Ekspor konfigurasi checkout:

1. Dari admin Shopify, buka Aplikasi > Checkout Blocks.

2. Klik Editor branding.

3. Pilih konfigurasi checkout yang kustomisasinya telah diterapkan menggunakan editor branding.

4. Klik Tindakan lainnya > Ekspor konfigurasi.

Konfigurasi checkout diunduh sebagai .json ke perangkat lokal Anda.

Impor konfigurasi checkout:

1. Dari admin Shopify, buka Aplikasi > Checkout Blocks.

2. Klik Editor branding.

3. Pilih konfigurasi checkout tempat Anda ingin menerapkan profil branding yang diimpor.

4. Klik Tindakan lainnya > Impor konfigurasi.

5. Di dialog Impor branding checkout, unggah file JSON branding Anda:

   1. Klik Tambahkan file.
   2. Pilih file JSON yang sesuai dari perangkat Anda.
   3. Klik Impor dan lanjutkan.

6. Tinjau konfigurasi kustomisasi yang telah dimuat. Ubah sesuai kebutuhan.

7. Klik Simpan.

Atur ulang gaya checkout Anda ke default

Saat mengedit warna atau elemen checkout menggunakan editor branding, Anda dapat mengatur ulang nilai spesifik kembali ke nilai default dengan mengeklik Atur ulang di sebelah warna atau elemen yang Anda ubah.

Anda dapat mengatur ulang seluruh branding konfigurasi checkout ke nilai default Shopify kapan saja. Mengatur ulang konfigurasi checkout akan menghapus semua kustomisasi di seluruh halaman editor branding. Tindakan ini tidak dapat dibatalkan.

Langkah-langkah:

1. Dari admin Shopify, buka Aplikasi > Checkout Blocks.

2. Klik Editor branding.

3. Pilih konfigurasi checkout yang ingin Anda atur ulang.

4. Klik Atur ulang ke default.

5. Di dialog Atur ulang ke gaya default?, klik Lanjutkan.