Kustomisasi Desain & Tema

Sesuaikan tampilan dan nuansa checkout, storefront, dan portal pelanggan Anda dari satu tempat. Pilih tema bawaan, atur tipografi dan warna, serta terapkan penyesuaian per-seksi dengan pratinjau langsung.

Halaman Design adalah pusat utama Anda untuk memberi branding pada setiap permukaan yang dihadapi pelanggan: checkout, storefront, dan Customer Portal. Perubahan diterapkan secara instan di ketiganya dan dipratinjau secara real time sebelum Anda menyimpannya. Test mode dan live mode memiliki desain terpisah — lihat Menyalin Design dari Test Mode ke Live Mode.

​

Sorotan Utama

• Hub Desain Terpadu — Konfigurasikan tampilan checkout, storefront, dan Customer Portal dari satu halaman
• Tema Siap Pakai — Mulai dengan tema pilihan, lalu sesuaikan sesuai kebutuhan
• Mode Terang & Gelap — Tentukan palet warna terpisah untuk setiap mode
• Pratinjau Langsung — Lihat tampilan perubahan Anda di semua permukaan sebelum menyimpan
• Penggantian per Bagian — Sesuaikan bagian individual tanpa memengaruhi bagian lainnya
• Kontrol Programatis — Ganti tema saat checkout melalui Checkout Sessions API (customization.theme_config). theme_config milik suatu sesi memiliki prioritas lebih tinggi daripada desain di dashboard. Opsi themeConfig sisi klien Checkout SDK sudah tidak digunakan lagi
• Salin Desain Test ke Live — Pindahkan desain yang telah Anda sempurnakan dalam mode test ke mode live dalam satu langkah

​

Memulai

Navigasikan ke Settings → Design di Merchant Dashboard Anda. Halaman Desain memiliki empat tab:

Tab	Tujuan
General	Nama bisnis, logo, pemilihan tema, dan pengaturan lanjutan global
Checkout	Override pengaturan tema khusus untuk halaman checkout
Storefront	Override pengaturan tema dan konfigurasikan layout storefront
Customer Portal	Override pengaturan tema untuk Customer Portal

​

Pengaturan Umum

Tab Umum mengendalikan identitas merek dasar dan tema global Anda.

​

Konfigurasi Dasar

Pengaturan	Deskripsi
Nama Bisnis	Nama yang ditampilkan di checkout, storefront, dan Customer Portal
Logo Bisnis	Logo brand Anda yang ditampilkan di semua halaman yang dihadapi pelanggan
Tema	Pilih tema siap pakai sebagai titik awal Anda

​

Pengaturan Lanjutan

Perluas Pengaturan Lanjutan untuk mengakses kontrol granular:

​

Tipografi

Pengaturan	Opsi	Deskripsi
Font Utama	Any Google Font	Font utama untuk judul dan teks isi
Font Sekunder	Any Google Font	Font aksen untuk label dan teks sekunder
Ukuran Font	xs, sm, md, lg, xl, 2xl	Ukuran font dasar global
Ketebalan Font	normal, medium, bold, extraBold	Ketebalan font default

​

Konfigurasi Warna

Tentukan palet warna terpisah untuk Light Mode dan Dark Mode. Setiap mode mendukung:

Properti	Deskripsi
Latar Belakang Utama	Warna latar belakang utama
Latar Belakang Sekunder	Latar belakang sekunder (tab, kartu)
Teks Utama	Warna teks utama
Teks Sekunder	Warna teks yang diredupkan
Tombol Utama	Latar belakang tombol utama
Teks Tombol Utama	Warna teks pada tombol utama
Tombol Sekunder	Latar belakang tombol sekunder
Teks Tombol Sekunder	Warna teks pada tombol sekunder
Border Utama	Warna border utama
Border Sekunder	Warna border aksen

​

Batas

Pengaturan	Deskripsi
Radius Border	Mengontrol tingkat kebulatan input, tombol, tab, dan kartu (misalnya, 0 untuk sudut tajam, 8px untuk sudut membulat, 16px untuk bentuk pil)

​

Tema Bawaan

Dodo Payments menyertakan empat tema kurasi. Pilih salah satunya dari dropdown Tema di tab Umum untuk langsung menerapkan desain yang kohesif di checkout, storefront, dan portal pelanggan.

​

Dodo Pulses

Tema default Dodo Payments. Aksen hijau limau memberi kesan energik dan segar. Tipografi sans-serif yang bersih dengan spasi yang lapang.

Light Mode

Dodo Pulses in light mode

Dark Mode

Dodo Pulses in dark mode

​

Terminal

Tema bernuansa pengembang dengan tipografi monospaced dan aksen biru kerajaan. Sudut tajam dan estetika teknis yang cocok untuk produk alat pengembang dan API-first.

Light Mode

Terminal in light mode

Dark Mode

Terminal in dark mode

​

Bumblebee

Aksen amber hangat dan emas dengan gaya modern melengkung. Berani dan kontras tinggi, cocok untuk produk konsumen yang ingin terasa premium.

Light Mode

Bumblebee in light mode

Dark Mode

Bumblebee in dark mode

​

Bubblegum

Aksen pink dan magenta yang menyenangkan dengan sudut penuh lingkaran. Tampilan modern dan ramah yang cocok untuk alat kreatif, produk desain, dan merek gaya hidup.

Light Mode

Bubblegum in light mode

Dark Mode

Bubblegum in dark mode

Setelah memilih tema siap pakai, sesuaikan properti individual di Advanced Settings. Properti yang tidak ditentukan akan menggunakan default tema.

​

Penimpaan per-Seksi

Setiap tab seksi (Checkout, Storefront, Portal Pelanggan) menyertakan toggle Timpa Tema. Saat diaktifkan, Anda dapat menyesuaikan tampilan seksi tersebut secara mandiri tanpa mengikuti tema global.

​

Tab Checkout

Override tipografi, warna, dan pengaturan border khusus untuk pengalaman checkout. Pratinjau langsung menampilkan:

• Informasi dan harga produk
• Opsi express checkout (Apple Pay, Google Pay)
• Pemilihan metode pembayaran dan formulir kartu
• Input kode diskon dan perincian harga

​

Tab Storefront

Konfigurasikan pengaturan khusus storefront:

Pengaturan	Deskripsi
URL Toko	Alamat storefront Anda (misalnya, store.dodopayments.com/your-store)
Nama Toko	Aktifkan/nonaktifkan dan tetapkan nama yang ditampilkan di storefront Anda
Logo Toko	Aktifkan/nonaktifkan dan unggah logo untuk header storefront
Banner Toko	Aktifkan/nonaktifkan dan unggah gambar banner
Deskripsi Produk	Aktifkan/nonaktifkan untuk menampilkan atau menyembunyikan deskripsi produk pada kartu
Override Tema	Aktifkan untuk menyesuaikan tipografi, warna, dan border khusus untuk storefront

​

Tab Customer Portal

Override tema untuk Customer Portal, yang mencakup:

• Pengelolaan langganan
• Riwayat penagihan
• Metode pembayaran
• Dompet dan kredit

​

Menyalin Design dari Test Mode ke Live Mode

Test mode dan live mode menyimpan konfigurasi desain secara terpisah. Tema yang Anda buat saat melakukan pengujian tidak otomatis muncul bagi pelanggan sebenarnya. Daripada membuatnya ulang secara manual, salin desain Anda dari test mode ke live mode dalam satu langkah.

1. Open Design in Test Mode

   Beralih ke mode test dan buka Settings → Design. Simpan semua perubahan yang masih tertunda terlebih dahulu: hanya desain test yang telah disimpan yang akan disalin.

2. Start the Copy

   Klik Copy to Live Mode. Tombol ini akan muncul setelah Anda menyimpan tema atau memublikasikan storefront test, dan mode live harus sudah diaktifkan.

3. Choose What to Copy

   Pilih Theme & customizations (tema umum beserta penggantian untuk checkout, storefront, dan Customer Portal) serta Storefront details (nama toko, logo, dan banner). Storefront details tidak tersedia jika tidak ada storefront yang dipublikasikan dalam mode test.

4. Confirm

   Klik Copy to Live Mode di dialog.

Penyalinan akan menimpa desain live mode yang ada. Tinjau checkout dan storefront live Anda setelah menyalin untuk memastikan semuanya terlihat sesuai harapan.

​

Halaman Terkait

Checkout Features

Fitur checkout termasuk mata uang, bahasa, pajak, diskon, dan lainnya.

Overlay Checkout SDK

Sematkan checkout sebagai overlay modal di halaman Anda.

Inline Checkout SDK

Sematkan checkout langsung ke dalam layout halaman Anda.

Storefront

Siapkan dan kelola storefront bermerek Anda.

Customer Portal

Portal self-service pelanggan untuk langganan dan penagihan.

Multi-Brand Setup

Jalankan beberapa brand dalam satu akun dengan branding terpisah.