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 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

1. Pusat Desain Terpadu - Atur tampilan checkout, storefront, dan portal pelanggan dari satu halaman.
2. Tema Bawaan - Mulai dengan tema yang kurasi dan sesuaikan dari sana.
3. Mode Terang & Gelap - Tentukan palet warna terpisah untuk masing-masing mode.
4. Pratinjau Langsung - Lihat bagaimana perubahan muncul di checkout, portal pelanggan, dan storefront sebelum menyimpan.
5. Penimpaan per-Seksi - Sesuaikan bagian tertentu (checkout, storefront, portal pelanggan) tanpa memengaruhi bagian lainnya.
6. Kontrol Programatik - Timpa tema saat checkout melalui API atau Checkout SDK.

​

Memulai

Navigasikan ke Settings → Design di 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

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 bawaan, Anda dapat menyesuaikan properti individual lebih lanjut di Pengaturan Lanjutan. Properti yang tidak ditentukan akan kembali ke 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

Timpa tipografi, warna, dan pengaturan batas secara khusus untuk pengalaman checkout. Pratinjau langsung menampilkan:

• 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

Atur pengaturan khusus 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

Timpa tema untuk portal pelanggan, yang mencakup:

• 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.