> ## Documentation Index > Fetch the complete documentation index at: https://docs.simplus.id/llms.txt > Use this file to discover all available pages before exploring further. # Atur tema: logo, warna, dan huruf > Pasang logo dan favicon, ubah warna lewat color scheme, pilih huruf atau tambah font kustom, dan atur tampilan checkout toko online. **Atur Tema** mengatur hal yang berlaku di seluruh toko: logo, warna, huruf, tombol, kartu produk, dan tampilan checkout. Isi halaman, seperti banner dan teks, diatur di [editor tema](https://docs.simplus.id/web-jualan/editor-tema.md). ## Membuka Atur Tema Buka **Tema** → **Sesuaikan**, lalu klik ikon roda gigi di kiri editor. Daftar pengaturan muncul di panel kiri, dan preview di kanan langsung menampilkan perubahan. ![Panel Atur Tema dengan daftar Logo, Colors, Typography, Layout, dan lainnya, ikon roda gigi ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/atur-tema/d01-atur-tema.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=9bf86e2a8b9b9e1b263131352e543e7c) Daftar pengaturan di Atur Tema. Semua perubahan di Atur Tema, kecuali warna scheme, baru tampil di toko setelah Anda klik **Simpan** di kanan atas editor. ## Logo dan favicon **1. Buka Logo** Di **Atur Tema**, klik **Logo**. **2. Unggah gambar** Klik kotak **Logo** untuk mengunggah logo toko. Klik kotak **Favicon image** untuk ikon kecil di tab browser, yang diperkecil menjadi 32 × 32 px. ![Pengaturan Logo dengan kotak Logo dan Favicon image berisi gambar ditandai, logo tampil di header preview](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/atur-tema/d02-logo.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=bdfec6da040ae596adca4bc35d31f9f9) Logo dan favicon toko. **3. Atur lebar dan simpan** Geser **Desktop logo width** sampai ukuran logo pas di header, lalu klik **Simpan**. Tanda **×** di pojok kotak menghapus gambar itu. Klik **Simpan** setelahnya. Logo checkout diatur terpisah di bagian [Checkout](#tampilan-checkout). ## Warna lewat color scheme Warna toko diatur lewat **scheme**: satu set warna latar, teks, dan tombol. Setiap section memilih satu scheme, misalnya header memakai **Scheme 5**. Mengubah satu scheme mengubah semua section yang memakainya. **1. Pilih scheme** Di **Atur Tema**, klik **Colors**, lalu klik scheme yang ingin diubah. Lingkaran kecil di setiap scheme menunjukkan warnanya. ![Daftar Scheme 1 sampai Scheme 5 dengan Scheme 5 ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/atur-tema/d03-colors.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=e5285e8c412e4a90e9aa3326f34b8449) Daftar color scheme. **2. Ubah warnanya** Di **Ubah Scheme**, ketik kode warna atau klik lingkaran warna di kanan setiap isian: **Background**, **Background gradient**, **Text**, **Solid button background**, **Solid button label**, **Outline button**, dan **Shadow**. **3. Simpan** Klik **Simpan** di jendela itu. ![Jendela Ubah Scheme dengan isian warna Background sampai Shadow, tombol Simpan ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/atur-tema/d04-ubah-scheme.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=b4c6848d35e727a6acbeab47bff1e88c) Mengubah warna Scheme 5. > [!NOTE] > > **Simpan** di jendela Ubah Scheme langsung menyimpan warna ke tema, tanpa perlu klik Simpan di editor. Kalau tema ini Default, toko langsung berubah warna. Untuk menambah scheme baru, klik tombol **+** di kanan bawah daftar Colors. Scheme baru bisa dipilih di pengaturan **Color scheme** setiap section. ## Huruf (Typography) **1. Buka Typography** Di **Atur Tema**, klik **Typography**. Ada dua pengaturan: **Headings** untuk header toko (announcement bar dan menu), dan **Body** untuk judul serta teks di semua section lain. **2. Pilih font** Klik isian **Font**, ketik nama font di kotak pencarian, lalu klik font-nya. Geser **Font size scale** untuk memperbesar atau memperkecil ukuran huruf. ![Pengaturan Typography dengan font Headings Playfair Display dan tombol Tambah ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/atur-tema/d05-typography.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=01fdd4aeb84af4407f653c79a34e054d) Memilih font untuk Headings. **3. Simpan** Klik **Simpan** di kanan atas editor. Di bawah pilihan font tertulis "Memilih font berbeda dapat memengaruhi kecepatan toko." Pakai satu atau dua font saja supaya toko tetap cepat dibuka. ### Menambah font kustom Kalau font yang Anda mau belum ada di daftar, tambahkan sendiri. Setiap toko bisa punya **maksimal 20 font kustom**. **1. Klik Tambah** Di **Typography**, klik **+ Tambah** di kanan atas panel. **2. Isi font** Pilih salah satu tab: * **Google Fonts**: ketik nama keluarga font persis seperti di fonts.google.com, misalnya **Playfair Display**. Bobot 400 sampai 700 ikut ditambahkan otomatis. * **Unggah file**: unggah file `.woff2`, `.woff`, `.ttf`, atau `.otf`, maksimal 2 MB per font, lalu cek **Nama tampilan**. Nama ini terisi otomatis dari nama file dan bisa Anda ganti. ![Jendela Tambah font tab Google Fonts dengan nama Playfair Display dan tombol Tambahkan ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/atur-tema/d06-tambah-font.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=3fe1386dc6ccb6283995d094a809fc02) Menambah font dari Google Fonts. **3. Tambahkan dan pilih** Klik **Tambahkan**. Font muncul di **Font Kustom** dengan label **GOOGLE** atau **FILE**, dan bisa dipilih di Headings atau Body dengan label **KUSTOM**. Untuk menghapus font kustom, klik ikon tempat sampah di sampingnya, lalu konfirmasi "Hapus font kustom?". Setelah terhapus muncul pesan "Font ... dihapus". Font yang masih dipakai di Headings, Body, atau checkout tidak bisa dihapus. Pengecekan ini berlaku untuk semua tema di **Tema Saya**, bukan hanya tema yang sedang diedit. Ganti font-nya di setiap tema yang memakainya dan klik **Simpan**. ## Pengaturan lain | Pengaturan | Yang diatur | | - | - | | **Layout** | Lebar halaman, jarak antar section, dan jarak antar kolom | | **Animations** | Efek muncul saat scroll dan efek saat mouse diarahkan | | **Buttons**, **Variant Pills**, **Inputs** | Ketebalan garis, sudut, dan bayangan tombol, pilihan varian, serta isian | | **Product Cards**, **Collection Cards** | Gaya kartu produk dan collection, perataan teks, dan scheme | | **Content Containers**, **Media**, **Dropdown and Pop-ups**, **Drawers** Coming Soon | Gaya kotak konten, gambar, menu dropdown, dan panel samping. Pilihan ini tersimpan, tapi belum mengubah tampilan toko. | | **Badges** | Warna label **Sale** dan **Sold out** di keranjang. Di kartu produk, label memakai scheme kartu produk. Pengaturan posisi dan sudut Coming Soon. | | **Brand Information** | Judul dan deskripsi merek di footer | | **Search Behavior** | Saran pencarian. Pilihan menampilkan harga dan vendor produk Coming Soon | | **Currency Format** | Menampilkan kode mata uang, misalnya Rp10.000 atau 10.000 IDR | | **Cart** | Jenis keranjang: **Drawer** (panel samping), **Page** (halaman keranjang), atau **Popup notification**. **Show vendor**, **Enable cart note**, dan collection di drawer Coming Soon. | | **Custom CSS** | Kode CSS untuk seluruh toko, untuk pengguna yang paham CSS | ## Tampilan checkout Klik ikon troli di kiri editor untuk membuka **Checkout and Accounts**. Preview berganti ke halaman checkout. Panel ini juga punya pilihan halaman **Checkout**, **Orders List**, dan **Profile** untuk melihat halaman akun pembeli. ![Panel Checkout and Accounts dengan ikon troli ditandai dan preview halaman checkout](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/atur-tema/d07-checkout.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=6c140a912bb65ce0c234af282c3256ad) Pengaturan Checkout and Accounts. | Bagian | Yang diatur | | - | - | | **Logo** | Logo di halaman checkout dan lebarnya | | **Checkout Header** | Posisi dan perataan logo. Gambar latar Coming Soon | | **Checkout Layout** Coming Soon | **One page checkout** atau **Three page checkout**. Pilihan ini tersimpan, tapi belum mengubah checkout toko. | | **Background 1** dan **Background 2** | Warna latar formulir checkout dan ringkasan pesanan. Gambar latar Coming Soon | | **Color** | Warna aksen, tombol, dan pesan error. **Fields and cards** Coming Soon | | **Typography** | Font untuk judul dan teks di checkout | | **Address autocompletion** Coming Soon | Saran alamat otomatis saat pembeli mengetik. Pilihan ini belum berpengaruh di checkout. | | **Header menu** Coming Soon | Menu di header halaman akun pembeli. Pilihan ini tersimpan, tapi belum tampil. | | **Buy again button** Coming Soon | Tombol pesan lagi. Saat ini **Buy again** selalu tampil di pesanan pembeli, apa pun pilihannya. | Produk di preview checkout adalah contoh. Pembeli melihat produk di keranjangnya sendiri. Klik **Simpan** setelah selesai. ## Siapa yang boleh mengatur Owner, atau karyawan dengan izin **Mengelola Toko Online** di [Grup Hak Akses](https://docs.simplus.id/tutorial/pengguna/grup-hak-akses.md). ## Pesan yang mungkin muncul | Pesan | Artinya | Yang perlu dilakukan | | - | - | - | | Editing this scheme's colors will affect all sections that use this scheme. | Satu scheme dipakai banyak section | Buat scheme baru kalau hanya satu section yang ingin berubah warna | | Maksimal 20 font kustom per toko. Hapus font yang tidak dipakai dulu. / Batas 20 font kustom tercapai. Hapus font yang tidak dipakai dulu. | Slot font kustom penuh. **Tambahkan** tidak bisa diklik. | Hapus font kustom yang tidak dipakai | | Font ini masih dipakai di tipografi tema atau checkout. Ganti font headings/body dulu, lalu hapus. | Font yang mau dihapus masih dipakai di salah satu tema | Pilih font lain di Headings, Body, atau checkout di setiap tema yang memakainya, simpan, lalu hapus | | Nama font ini sudah ada di katalog toko Anda. | Font itu sudah pernah ditambahkan | Pilih font tersebut dari daftar | | Nama tidak valid | Nama font memakai simbol selain huruf, angka, spasi, atau tanda hubung | Ketik nama keluarga font, misalnya Playfair Display | | Gagal menambahkan Google Font. | Font gagal ditambahkan | Coba lagi. Salin nama persis dari fonts.google.com. Nama dengan ejaan berbeda tetap diterima, tapi font-nya tidak tampil. | | Format tidak didukung. Unggah file .woff2, .woff, .ttf, atau .otf. | Format file font tidak didukung | Pilih file .woff2, .woff, .ttf, atau .otf | | Ukuran maksimal 2 MB per font. | File font terlalu besar | Pakai file `.woff2` yang lebih kecil | | Font bawaan sistem tidak dapat dihapus. | Font bawaan bukan font kustom | Tidak perlu dihapus, cukup tidak dipilih | ## Langkah berikutnya > [card] [Editor tema](https://docs.simplus.id/web-jualan/editor-tema.md) > > Ubah banner, teks, dan section di setiap halaman. > [card] [Menu dan Custom Page](https://docs.simplus.id/web-jualan/menu-dan-custom-page.md) > > Susun menu toko dan buat halaman sendiri. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.