> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-overview.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=89f19bfb791cb903fccb3ea7127246ba" alt="Halaman pengaturan desain dengan pratinjau langsung dari checkout, portal pelanggan, dan etalase" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="1920" data-path="images/design/general-overview.jpg" />
</Frame>

<Info>
  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.
</Info>

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

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-advanced-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=00131c2a9d74d4c120bf85f588e358d8" alt="Tab umum menunjukkan pengaturan lanjutan dengan tipografi, warna, dan konfigurasi border" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2672" data-path="images/design/general-advanced-settings.jpg" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-color-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=c09ecc738beb79cff0d130f46bb72b0a" alt="Pengaturan lanjutan diperluas menunjukkan konfigurasi warna penuh untuk mode terang dan gelap" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="4192" data-path="images/design/general-color-settings.jpg" />
</Frame>

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

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Dodo Pulses in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=f081086300770146c0df373b6304ea12" alt="Tema Dodo Pulses dalam mode terang menunjukkan checkout, portal pelanggan, dan etalase" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Dodo Pulses in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=d2fe47c69734ccb419471609095627fe" alt="Tema Dodo Pulses dalam mode gelap menunjukkan checkout, portal pelanggan, dan etalase" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-dark.png" />
    </Frame>
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Terminal in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=3e3320fc9c073ed9bf3ebe7b03bf7a3f" alt="Tema Terminal dalam mode terang menunjukkan checkout dengan aksen biru dan font monospaced" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Terminal in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=dea087e1c0fad9cf7a66fc37cfbda8ac" alt="Tema Terminal dalam mode gelap menunjukkan checkout dengan aksen biru dan font monospaced" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bumblebee

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

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bumblebee in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-bumblebee-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=e276288fe683a831d10add3f8af4eae0" alt="Tema Bumblebee dalam mode terang menunjukkan checkout dengan aksen kuning amber" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bumblebee in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bumblebee-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a35df24ccd45a9acb717652ce5b5fd19" alt="Tema Bumblebee dalam mode gelap menunjukkan checkout dengan aksen emas" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-dark.png" />
    </Frame>
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bubblegum in light mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-light.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b53c9d3c6d07ef0ff44d4c613520789" alt="Tema Bubblegum dalam mode terang menunjukkan checkout, portal pelanggan, dan etalase dengan aksen merah muda" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bubblegum in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=ef4a70ff8f289715628377b0631adf25" alt="Tema Bubblegum dalam mode gelap menunjukkan checkout, portal pelanggan, dan etalase dengan aksen merah muda" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-dark.png" />
    </Frame>
  </Tab>
</Tabs>

<Tip>
  Setelah memilih tema bawaan, Anda dapat menyesuaikan properti individual lebih lanjut di Pengaturan Lanjutan. Properti yang tidak ditentukan akan kembali ke default tema.
</Tip>

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

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/checkout-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a17880492490e6abe2f6b8b9e9f4680e" alt="Tab checkout menunjukkan pratinjau penuh checkout dengan rincian produk dan formulir pembayaran" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/checkout-tab.jpg" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/storefront-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b45fc842eb771be573ae1a5744d82c5" alt="Tab etalase menunjukkan URL toko, kontrol branding, dan pratinjau etalase" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/storefront-tab.jpg" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/customer-portal-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=38c16ef9ed1648f0f5d3851d7c91f17c" alt="Tab portal pelanggan menunjukkan manajemen langganan, riwayat penagihan, dan pratinjau metode pembayaran" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/customer-portal-tab.jpg" />
</Frame>

Timpa tema untuk portal pelanggan, yang mencakup:

* Manajemen langganan
* Riwayat penagihan
* Metode pembayaran
* Dompet dan kredit

## Sumber Terkait

<CardGroup cols={2}>
  <Card title="Checkout Features" icon="cart-shopping" href="/features/checkout">
    Fitur checkout termasuk mata uang, bahasa, pajak, diskon, dan lainnya.
  </Card>

  <Card title="Overlay Checkout SDK" icon="layer-group" href="/developer-resources/overlay-checkout">
    Sematkan checkout sebagai overlay modal di halaman Anda.
  </Card>

  <Card title="Inline Checkout SDK" icon="credit-card" href="/developer-resources/inline-checkout">
    Sematkan checkout langsung ke tata letak halaman Anda.
  </Card>

  <Card title="Storefront" icon="store" href="/features/storefront">
    Siapkan dan kelola storefront bermerek Anda.
  </Card>

  <Card title="Customer Portal" icon="user" href="/features/customer-portal">
    Portal swalayan pelanggan untuk langganan dan penagihan.
  </Card>

  <Card title="Multi-Brand Setup" icon="building-columns" href="/features/multi-brands">
    Jalankan beberapa merek di bawah satu akun dengan branding terpisah.
  </Card>
</CardGroup>