Menyesuaikan gaya checkout Anda

Jika Anda menjual produk menggunakan toko online, Anda dapat menyesuaikan gaya halaman checkout di editor checkout dan akun. Anda dapat menambahkan logo perusahaan, mengubah warna, atau memilih font baru agar checkout sesuai dengan bisnis Anda.

Beberapa branding yang Anda pilih untuk halaman checkout Anda juga berlaku untuk halaman akun pelanggan baru Anda.

Di halaman ini

Pertimbangan untuk menyesuaikan gaya checkout dan akun pelanggan Anda

Sebelum menyesuaikan gaya checkout Anda, tinjau pertimbangan berikut:

Area Konfigurasi di bagian pengaturan Checkout pada admin disembunyikan hingga Anda memilih paket dan membuat produk pertama.
Jika Anda menggunakan Shopify Plus, Anda dapat menggunakan Checkout Branding API untuk kustomisasi branding checkout tingkat lanjut.
Jika Anda memerlukan bantuan untuk menyesuaikan gaya keranjang dan checkout, Anda dapat mempekerjakan Mitra Shopify. Pelajari selengkapnya tentang mempekerjakan Mitra Shopify.
Meskipun Anda mungkin ingin menambahkan banyak warna dan hal menarik ke halaman checkout, sebaiknya jaga agar desainnya tetap sederhana. Pelanggan Anda menggunakan halaman ini untuk memasukkan informasi pengiriman dan pembayaran untuk pesanan mereka; jangan sampai perhatian mereka teralihkan atau informasi menjadi sulit dibaca. Pilih warna dengan kontras tinggi dan gambar yang tidak mengalihkan perhatian dari teks di halaman.

Buat palet warna untuk checkout dan akun pelanggan Anda

Anda dapat membuat palet warna sebagai cara cepat untuk menggunakan kembali warna di beberapa pengaturan di editor checkout dan akun Anda. Saat Anda mengubah warna dari palet warna, semua pengaturan yang menggunakan warna tersebut akan diperbarui secara dinamis ke warna baru. Hal ini juga berarti Anda tidak perlu mengingat kode heksadesimal jika ingin menggunakan warna lebih dari satu kali.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik untuk mengakses bilah sisi Pengaturan.
Di bagian Palet warna, klik + untuk memilih warna yang akan ditambahkan ke palet.
Opsional: Untuk menghapus warna yang tidak lagi Anda perlukan di palet:
1. Klik warna, lalu klik Hapus warna.
2. Pilih warna pengganti untuk menggantikan warna yang dihapus di mana pun warna tersebut digunakan di checkout Anda.
3. Klik Konfirmasi.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Edit pada konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, ketuk Pengaturan.
Di bagian Palet warna, ketuk + untuk memilih warna yang akan ditambahkan ke palet.
Opsional: Untuk menghapus warna yang tidak lagi Anda perlukan di palet:
1. Ketuk warna, lalu ketuk Hapus warna.
2. Pilih warna pengganti untuk menggantikan warna yang dihapus di mana pun warna tersebut digunakan di checkout Anda.
3. Ketuk Konfirmasi.
Ketuk Simpan atau ✓.

Menggunakan pemilih warna di editor checkout dan akun

Saat menyesuaikan kolom di editor checkout dan akun yang memerlukan warna, Anda dapat menggunakan pemilih warna untuk membantu Anda memilih warna yang diinginkan. Di pemilih warna, Anda dapat memilih warna dengan salah satu cara berikut:

Gunakan penggeser warna untuk mengubah rona warna yang tersedia di pratinjau pemilih.
Gunakan kolom heksadesimal untuk memasukkan kode warna tertentu, seperti #0000FF untuk warna biru murni standar.
Gunakan untuk mengambil warna tertentu menggunakan kursor Anda dari mana saja di layar.
Gunakan untuk mempersempit jumlah warna yang tersedia di pratinjau pemilih menjadi 40.

Bagian Palet warna menampilkan semua sampel warna yang telah Anda tambahkan ke palet warna di editor checkout dan akun.

Jika Anda telah memilih warna secara manual sebelumnya selama sesi di editor checkout dan akun, Anda juga dapat memilih dari sampel warna Baru-baru ini digunakan.

Menyesuaikan warna untuk header

Di bagian atas setiap halaman checkout dan akun pelanggan, sebuah header akan menampilkan nama toko Anda. Anda dapat mengubah warna latar belakang spanduk tersebut. Pilih warna yang sesuai dengan merek Anda.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik untuk mengakses bilah sisi Pengaturan.
Di bagian Header, lakukan salah satu penyesuaian warna berikut:
- Gunakan Latar belakang untuk menetapkan warna latar belakang header.
- Gunakan Aksen untuk menetapkan warna ikon keranjang dan tautan di header.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Edit pada konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, ketuk Pengaturan.
Di bagian Header, lakukan salah satu penyesuaian warna berikut:
- Gunakan Latar belakang untuk menetapkan warna latar belakang header.
- Gunakan Aksen untuk menetapkan warna ikon keranjang dan tautan di header.
Ketuk Simpan atau ✓.

Tambahkan logo ke halaman checkout

Anda dapat menambahkan logo toko ke halaman checkout. Anda dapat menyelaraskan logo Anda di kiri, kanan, atau tengah area spanduk di halaman checkout.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik untuk mengakses bilah sisi Pengaturan.
Di bagian Logo, klik bidang Gambar.
Klik Pilih dari pustaka untuk memilih gambar yang ada di pustaka Anda.
Opsional: Di bagian Logo, sesuaikan logo Anda dengan pengaturan berikut:
- Gunakan Lebar untuk memilih ukuran logo, dalam piksel.
- Gunakan Penyejajaran untuk memilih apakah logo Anda ditampilkan di kiri, tengah, atau kanan spanduk.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Edit pada konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, ketuk Pengaturan.
Di bagian Logo, ketuk bidang Gambar.
Ketuk Pilih dari pustaka untuk memilih gambar yang ada dari pustaka Anda.
Opsional: Di bagian Logo, sesuaikan logo Anda dengan pengaturan berikut:
- Gunakan Lebar untuk memilih ukuran logo, dalam piksel.
- Gunakan Penyejajaran untuk memilih apakah logo Anda ditampilkan di kiri, tengah, atau kanan spanduk.
Ketuk Simpan atau ✓.

Tambahkan warna latar belakang ke area konten utama

Anda dapat menambahkan warna latar belakang ke area konten utama halaman checkout. Ini adalah area tempat pelanggan Anda memasukkan informasi pengiriman dan pembayaran mereka, jadi pastikan Anda dapat membaca kolom dengan jelas pada latar belakang tersebut.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik untuk mengakses bilah sisi Pengaturan.
Di bagian Utama, klik Warna untuk membuka pemilih warna, lalu pilih warna atau masukkan kode heksadesimal.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Edit pada konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, ketuk Pengaturan.
Di bagian Utama, ketuk Warna untuk membuka pemilih warna, lalu pilih warna atau masukkan kode heksadesimal.
Ketuk Simpan atau ✓.

Ubah warna kolom formulir

Anda dapat mengubah warna kolom formulir di checkout Anda. Anda juga dapat mengubah warna pesan kesalahan menjadi putih atau transparan. Pastikan Anda dapat membaca teks di dalam kolom dengan jelas.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik untuk mengakses bilah sisi Pengaturan.
Di bagian Kolom input, lakukan salah satu penyesuaian berikut:
- Untuk mengubah warna kolom input, buka Input, lalu klik Transparan atau Putih.
- Untuk mengubah warna pesan kesalahan, klik kolom Kesalahan, lalu pilih warna.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Edit pada konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, ketuk Pengaturan.
Di bagian Kolom input, lakukan salah satu penyesuaian berikut:
- Untuk mengubah warna kolom input, buka Input, lalu ketuk Transparan atau Putih.
- Untuk mengubah warna pesan kesalahan, ketuk kolom Kesalahan, lalu pilih warna.
Ketuk Simpan atau ✓.

Tambahkan gambar atau warna latar belakang ke ringkasan pesanan

Saat pelanggan mengeklik Tampilkan ringkasan pesanan di halaman checkout, daftar produk yang dibeli akan ditampilkan. Anda dapat menambahkan gambar atau warna latar belakang ke ringkasan pesanan. Anda dapat mengeklik Tampilkan ringkasan pesanan di pratinjau dalam editor tema untuk memastikan tampilan ringkasan pesanan sesuai dengan keinginan Anda.

Gambar yang lebih kecil akan diulang secara vertikal dan horizontal di latar belakang, mirip seperti ubin.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik untuk mengakses bilah sisi Pengaturan.
Di bagian Ringkasan pesanan, klik ringkasan pesanan.
Tambahkan warna latar belakang atau gambar:
- Untuk menambahkan warna, klik Latar belakang guna membuka pemilih warna, lalu pilih warna atau masukkan kode heksadesimal.
- Untuk menambahkan gambar, klik Gambar > Pilih. Klik Pilih dari pustaka untuk memilih gambar yang ada dari pustaka Anda.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Edit pada konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, ketuk Pengaturan.
Di bagian Ringkasan pesanan, ketuk ringkasan pesanan.
Tambahkan warna latar belakang atau gambar:
- Untuk menambahkan warna, ketuk Latar belakang guna membuka pemilih warna, lalu pilih warna atau masukkan kode heksadesimal.
- Untuk menambahkan gambar, ketuk Gambar > Pilih. Ketuk Pilih dari pustaka untuk memilih gambar yang ada dari pustaka Anda.
Ketuk Simpan atau ✓.

Mengubah atau menghapus gambar dari ringkasan pesanan

Anda dapat mengubah atau menghapus gambar yang telah ditambahkan ke ringkasan pesanan.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik untuk mengakses bilah sisi Pengaturan.
Di bagian Ringkasan pesanan, klik ringkasan pesanan.
Di bawah gambar yang ingin Anda ganti, klik Ubah untuk memilih gambar dari pustaka Anda, atau jelajahi gambar gratis.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Edit pada konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, ketuk Pengaturan.
Di bagian Ringkasan pesanan, ketuk ringkasan pesanan.
Di bawah gambar yang ingin Anda ganti, ketuk Ubah untuk memilih gambar dari pustaka Anda, atau jelajahi gambar gratis.
Ketuk Simpan atau ✓.

Untuk menghapus gambar, klik Ubah > Hapus gambar. Tindakan ini tidak akan menghapus gambar dari Shopify.

Ubah font di halaman checkout

Anda dapat memilih dari daftar font untuk menyesuaikan halaman checkout Anda.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik untuk mengakses bilah sisi Pengaturan.
Di bagian Tipografi, klik menu tarik-turun Judul atau menu tarik-turun Isi, lalu pilih font.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Edit pada konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, ketuk Pengaturan.
Di bagian Tipografi, ketuk menu tarik-turun Judul atau menu tarik-turun Isi, lalu pilih font.
Ketuk Simpan atau ✓.

Ubah warna tombol dan aksen di halaman checkout

Anda dapat mengubah warna tombol dan aksen seperti tautan di halaman checkout. Jika Anda mengubah warnanya, pastikan teks terlihat jelas dengan latar belakang area konten utama dan ringkasan pesanan.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik untuk mengakses bilah sisi Pengaturan.
Di bagian Aksen dan tombol, klik kotak warna di samping Aksen atau Tombol guna membuka pemilih warna, lalu pilih warna atau masukkan kode heksadesimal.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Edit pada konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, ketuk Pengaturan.
Di bagian Aksen dan tombol, ketuk kotak warna di samping Aksen atau Tombol untuk membuka pemilih warna, lalu pilih warna atau masukkan kode heksadesimal.
Ketuk Simpan atau ✓.

Ubah tata letak checkout Anda

Secara default, tata letak checkout di toko Anda diatur sebagai checkout satu halaman. Anda dapat beralih antara checkout satu halaman dan checkout tiga halaman dari admin Shopify. Tinjau perbedaan antara checkout satu halaman dan tiga halaman sebelum mengubah tata letak checkout Anda.

Saat Anda mengganti tata letak checkout, pratinjau di editor checkout dan akun tidak ditampilkan secara real-time. Setelah menyimpan perubahan, buka checkout etalase toko online Anda untuk melihat tata letak checkout yang baru.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik ikon roda gigi untuk mengakses sidebar Pengaturan.
Di bagian Tata letak checkout, klik tata letak saat ini untuk membuka opsi tata letak checkout.
Klik Checkout satu halaman atau Checkout tiga halaman untuk mengatur tata letak checkout.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Sesuaikan.
Di editor checkout dan akun, ketuk ikon roda gigi untuk mengakses sidebar Pengaturan.
Di bagian Tata letak checkout, ketuk Checkout satu halaman atau Checkout tiga halaman untuk mengatur tata letak checkout.
Ketuk Simpan atau ✓.

Kelola tombol Beli lagi

Tombol Beli lagi ditampilkan di halaman status pesanan Anda agar pelanggan dapat memesan ulang item yang telah mereka beli.

Langkah-langkah:

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Sesuaikan di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik ikon Pengaturan.
Di bagian Tombol Beli lagi, aktifkan atau nonaktifkan tombol tersebut.

Tampilkan kolom kode diskon secara default di perangkat seluler

Secara default, saat pelanggan melakukan checkout di perangkat seluler, ringkasan pesanan dan kolom kode diskon disembunyikan. Pelanggan dapat mengetuk Tampilkan ringkasan pesanan untuk memperluas detail lengkap ringkasan pesanan dan menampilkan kolom kode diskon, sehingga dapat menambahkan kode diskon atau kode kartu hadiah ke pesanan mereka.

Anda dapat mengubah perilaku default agar ringkasan pesanan dan kolom kode diskon selalu ditampilkan saat checkout di perangkat seluler. Pelanggan dapat mengetuk Sembunyikan ringkasan pesanan untuk menyembunyikan kolom kode diskon.

Checkout Anda harus menggunakan tata letak checkout tiga halaman untuk mengakses pengaturan ini.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik ikon bagian untuk mengakses sidebar Bagian.
Di halaman Informasi, Pengiriman, atau Pembayaran, klik Ringkasan pesanan.
Aktifkan pengaturan Selalu tampilkan kolom kode diskon.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Edit pada konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, ketuk Bagian.
Di halaman Informasi, Pengiriman, atau Pembayaran, ketuk Ringkasan pesanan.
Aktifkan pengaturan Selalu tampilkan kolom kode diskon.
Ketuk Simpan atau ✓.

Tambahkan blok ke halaman checkout Anda

Anda dapat menambahkan fitur seperti banner kustom atau hadiah loyalitas ke pengalaman checkout pelanggan menggunakan blok. Beberapa aplikasi checkout, termasuk yang menyesuaikan halaman informasi, pengiriman, dan pembayaran di checkout, hanya tersedia untuk toko di paket Shopify Plus. Lihat ketersediaan aplikasi checkout saat memilih aplikasi untuk ditambahkan ke checkout Anda.

Anda dapat menambahkan blok yang ada langsung ke bagian di halaman menggunakan sidebar Bagian atau sidebar Aplikasi.

Pelajari selengkapnya tentang menyesuaikan konfigurasi checkout Anda dengan aplikasi.

Tambahkan blok menggunakan sidebar Bagian

Anda dapat menambahkan blok dari aplikasi yang telah diinstal ke halaman yang sedang Anda lihat menggunakan sidebar Bagian. Hanya blok yang tersedia untuk diinstal pada suatu halaman atau bagian yang akan ditampilkan sebagai opsi yang dapat dipilih.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, pilih halaman tempat Anda ingin menambahkan aplikasi, lalu klik untuk mengakses sidebar Bagian.
Klik ⊕ Tambahkan blok di bagian tempat Anda ingin menambahkan aplikasi.
Klik blok yang ingin Anda tambahkan.
Sesuaikan blok sesuai kebutuhan:
- Untuk mengatur ulang lokasi blok, seret dan lepaskan blok ke atas atau ke bawah di daftar Bagian, atau gunakan tombol pindah di jendela pratinjau.
- Klik blok untuk mengonfigurasi pengaturan blok apa pun.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Sesuaikan pada konfigurasi checkout yang ingin Anda sesuaikan.
Di editor checkout dan akun, pilih halaman tempat Anda ingin menambahkan aplikasi, lalu ketuk Bagian.
Ketuk ⊕ Tambahkan blok di bagian tempat Anda ingin menambahkan aplikasi.
Ketuk blok yang ingin Anda tambahkan.
Sesuaikan blok sesuai kebutuhan:
- Untuk mengatur ulang lokasi blok, seret dan lepaskan blok ke atas atau ke bawah di daftar Bagian, atau gunakan tombol pindah di jendela pratinjau.
- Ketuk blok untuk mengonfigurasi pengaturan blok apa pun.
Ketuk Simpan atau ✓.

Tambahkan blok menggunakan sidebar Aplikasi

Anda dapat menambahkan blok dari aplikasi yang telah diinstal ke halaman yang sedang Anda lihat menggunakan sidebar Aplikasi. Saat menambahkan blok, hanya halaman yang mendukung pemasangan blok tertentu yang ditampilkan sebagai opsi.

Pelajari selengkapnya tentang menggunakan sidebar Aplikasi di editor checkout dan akun.

Langkah-langkah:

Desktop

Dari admin Shopify Anda, buka Pengaturan > Checkout.
Di bagian Konfigurasi, klik Edit di sebelah konfigurasi yang ingin Anda sesuaikan.
Di editor checkout dan akun, klik untuk mengakses sidebar Aplikasi.
Di samping blok yang ingin Anda tambahkan, klik ⊕.
Di pop-out Tambahkan ke, klik halaman tempat Anda ingin menambahkan blok.
Sesuaikan blok sesuai kebutuhan:
- Untuk mengatur ulang lokasi blok, gunakan tombol pindah di jendela pratinjau.
- Konfigurasikan pengaturan blok apa pun.
Klik Simpan.

Seluler

Dari Shopify app, ketuk , lalu ketuk Pengaturan.
Di bagian Pengaturan toko, ketuk Checkout.
Di bagian Konfigurasi, ketuk Sesuaikan pada konfigurasi checkout yang ingin Anda sesuaikan.
Di editor checkout dan akun, ketuk Aplikasi.
Di samping blok yang ingin Anda tambahkan, ketuk ⊕.
Di pop-out Tambahkan ke, ketuk halaman tempat Anda ingin menambahkan blok.
Sesuaikan blok sesuai kebutuhan:
- Untuk mengatur ulang lokasi blok, gunakan tombol pindah di jendela pratinjau.
- Konfigurasikan pengaturan blok apa pun.
Ketuk Simpan atau ✓.