Halaman Desain adalah pusat utama Anda untuk membangun identitas merek di semua permukaan yang dihadapi pelanggan: checkout, storefront, dan portal pelanggan. Perubahan diterapkan secara instan di ketiganya dan dipratinjau secara real time sebelum Anda menyimpannya.
Sorotan Utama
- Pusat Desain Terpadu - Atur tampilan checkout, storefront, dan portal pelanggan dari satu halaman.
- Tema Bawaan - Mulai dengan tema yang kurasi dan sesuaikan dari sana.
- Mode Terang & Gelap - Tentukan palet warna terpisah untuk masing-masing mode.
- Pratinjau Langsung - Lihat bagaimana perubahan muncul di checkout, portal pelanggan, dan storefront sebelum menyimpan.
- Penimpaan per-Seksi - Sesuaikan bagian tertentu (checkout, storefront, portal pelanggan) tanpa memengaruhi bagian lainnya.
- Kontrol Programatik - Timpa tema saat checkout melalui API atau Checkout SDK.
Memulai
Navigasikan ke Desain di sidebar utama Merchant Dashboard Anda. Halaman Desain memiliki empat tab:| Tab | Tujuan |
|---|---|
| Umum | Nama bisnis, logo, pemilihan tema, dan pengaturan lanjutan global |
| Checkout | Timpa pengaturan tema secara khusus untuk halaman checkout |
| Storefront | Timpa pengaturan tema dan konfigurasikan tata letak storefront |
| Portal Pelanggan | Timpa pengaturan tema untuk portal pelanggan |
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 portal pelanggan |
| Logo Bisnis | Logo merek Anda yang ditampilkan di semua halaman yang dihadapi pelanggan |
| Tema | Pilih tema bawaan 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 utama |
| 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 Mode Terang dan Mode Gelap. Setiap mode mendukung properti berikut:| 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 lembut |
| 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 Batas | Mengontrol kelengkungan input, tombol, tab, dan kartu (misalnya, 0 untuk sudut tajam, 8px untuk melengkung, 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
- 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
- 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
- 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
- Dark Mode
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
- Informasi produk dan harga
- Opsi checkout ekspres (Apple Pay, Google Pay)
- Pilihan metode pembayaran dan formulir kartu
- Input kode diskon dan rincian harga
Tab Storefront
| Pengaturan | Deskripsi |
|---|---|
| URL Toko | Alamat storefront Anda (misalnya, store.dodopayments.com/your-store) |
| Nama Toko | Aktifkan dan atur nama yang ditampilkan di storefront |
| Logo Toko | Aktifkan dan unggah logo untuk header storefront |
| Banner Toko | Aktifkan dan unggah gambar banner |
| Deskripsi Produk | Aktifkan untuk menampilkan atau menyembunyikan deskripsi produk di kartu |
| Timpa Tema | Aktifkan untuk menyesuaikan tipografi, warna, dan batas hanya untuk storefront |
Tab Portal Pelanggan
- Manajemen langganan
- Riwayat penagihan
- Metode pembayaran
- Dompet dan kredit
Sumber 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 tata letak halaman Anda.
Storefront
Siapkan dan kelola storefront bermerek Anda.
Customer Portal
Portal swalayan pelanggan untuk langganan dan penagihan.
Multi-Brand Setup
Jalankan beberapa merek di bawah satu akun dengan branding terpisah.