> ## 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. # Editor tema > Ganti banner, teks, dan produk di setiap halaman toko online, susun ulang section, lalu simpan dan lihat hasilnya di desktop dan HP. Editor tema adalah tempat Anda mengubah isi dan susunan halaman toko online: banner, judul, produk unggulan, dan teks. Setiap perubahan langsung terlihat di preview, lalu tampil di toko setelah Anda klik **Simpan**. ## Sebelum mulai * Buka editor dari **Tema** → **Sesuaikan**. Lihat [Tema](https://docs.simplus.id/web-jualan/tema.md). * Editor hanya bisa dibuka di layar yang lebar, misalnya laptop atau tablet mendatar. Di HP muncul pesan "Silakan akses editor tema di layar yang lebih besar". * Mengubah tema **Default** berarti mengubah toko yang sedang dilihat pembeli, setelah Anda klik **Simpan**. Untuk persiapan yang lama, ubah tema lain dulu, lalu jadikan Default saat siap. Pengecualiannya Custom Page: header, footer, dan isinya milik toko, jadi perubahannya langsung terlihat di Custom Page toko dari tema mana pun. ![Pesan Silakan akses editor tema di layar yang lebih besar di HP](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/editor-tema/p01-layar-kecil.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=e8ae32756b4265f2c45a8cf8e3f9dc77) Pesan saat editor dibuka di HP. ## Mengenal editor Halaman toko tersusun dari **section** (bagian besar, misalnya banner atau daftar produk). Di dalam section ada **block** (isi kecil, misalnya judul, teks, atau tombol). ![Editor tema dengan pilihan halaman, tombol preview desktop dan HP, serta tombol Simpan ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/editor-tema/d01-editor.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=3e605568988952f4247a6a3f898dbaa6) Editor tema dengan Layout Halaman di kiri dan preview di kanan. | Bagian | Fungsinya | | - | - | | Ikon kiri | **Layout Halaman** (section dan block), **Atur Tema** (logo, warna, huruf), dan **Checkout and Accounts** (halaman Checkout, Orders List, dan Profile) | | **Layout Halaman** | Daftar section, dikelompokkan menjadi **Header**, **Template**, dan **Footer** | | Pilihan halaman | Halaman yang sedang diedit, misalnya **Home Page** | | Ikon monitor dan HP | Ganti preview antara desktop dan HP | | Ikon panah keluar | **Kunjungi website**, membuka toko dengan tema Default | | **Reset** | Buang semua perubahan yang belum disimpan | | **Simpan** | Simpan semua perubahan ke tema | **Header** dan **Footer** berlaku di semua halaman toko. Mengubah announcement bar atau footer di Home Page juga mengubahnya di halaman produk, keranjang, dan Custom Page. Section di **Template** hanya berlaku di halaman yang sedang dibuka. Untuk logo, warna, huruf, dan tampilan checkout, lihat [Atur tema](https://docs.simplus.id/web-jualan/atur-tema.md). ## Mengganti konten contoh template Tema baru berisi konten contoh: teks berbahasa Inggris seperti "Browse our latest products", "Your collection's name", dan produk contoh. Pembeli juga melihat konten ini sampai Anda menggantinya. Mulailah dari Home Page. | Konten contoh | Yang Anda lakukan | | - | - | | Gambar banner bawaan | Unggah foto toko Anda di **First image** section Image Banner | | Judul dan tombol berbahasa Inggris | Ganti teks di block **Heading** dan **Buttons** | | Produk contoh di Featured Collection | Pilih **Collection** milik toko Anda. Lihat [Kategori, brand, dan collection](https://docs.simplus.id/web-jualan/kategori-brand-collection.md). | | "Your collection's name" di Collection List | Pilih collection Anda, atau hapus section-nya | | Section yang tidak dipakai (Slideshow, Collage, Video, Contact Form, dan lainnya) | Hapus section-nya | | "Welcome to our store" di Announcement Bar | Ganti teks block **Announcement** | ### Mengubah section **1. Klik nama section** Di **Layout Halaman**, klik nama section, misalnya **Image Banner**. Panel kiri berganti menjadi pengaturan section itu, dan section yang dipilih diberi garis biru di preview. **2. Ubah isinya** Misalnya klik kotak **First image** untuk mengunggah foto banner. Disarankan foto dengan rasio 3:2. Preview langsung berubah, dan di atas editor muncul "Anda memiliki perubahan yang belum disimpan. Klik Simpan untuk menyimpan." ![Pengaturan Image Banner dengan kotak First image berisi foto baru ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/editor-tema/d02-section.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=1c1f66804ce0c227575173aa870f8658) Pengaturan section Image Banner. **3. Kembali ke Layout Halaman** Klik panah kembali di samping judul section. ### Mengubah block **1. Buka daftar block** Klik panah **›** di samping nama section. Block di dalamnya muncul di bawahnya, misalnya **Heading** dan **Buttons**. Klik nama block. ![Layout Halaman dengan Image Banner terbuka, block Heading ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/editor-tema/d03-blocks.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=38484fc533468e9af6994cce5715babc) Block di dalam Image Banner. **2. Ketik isi baru** Ganti teksnya, misalnya **Koleksi Lebaran 2026**. Preview langsung menampilkan teks baru. ![Pengaturan block Heading berisi Koleksi Lebaran 2026 dan preview banner yang sudah berubah](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/editor-tema/d04-block.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=0141c929cfd7f5c79f728f724f250aec) Mengubah judul banner. Saat section atau block dipilih, preview menampilkan tombol kecil untuk **duplikat** dan **hapus** di bawahnya. ## Menambah, mengurutkan, dan menghapus section ### Menambah section **1. Arahkan mouse ke tepi section** Arahkan mouse ke tepi atas atau bawah sebuah section di **Layout Halaman**. Muncul garis putus-putus dengan tombol **+**. Klik **+**. ![Garis putus-putus dengan tombol plus di bawah Featured Collection ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/editor-tema/d05-tambah-section.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=2b94dae31d6252ea195cf5ef93795f81) Tombol + untuk menambah section di antara dua section. **2. Pilih section** Di **Pilih Section**, klik jenis section, misalnya **Rich Text**. Section baru masuk di posisi garis tadi, lengkap dengan block contoh yang bisa Anda ubah. ![Jendela Pilih Section dengan Rich Text ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/editor-tema/d06-pilih-section.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=f6946fb8936805cecae05c32c4a7e793) Daftar section yang bisa ditambahkan. Block ditambahkan dengan cara yang sama: arahkan mouse ke tepi sebuah block, lalu klik **+**. Kalau section belum punya block, klik **Tambah Block** di bawahnya. ### Mengurutkan section dan block Tarik ikon **≡** di kiri nama section atau block ke posisi baru. ### Menghapus dan menyembunyikan Arahkan mouse ke nama section atau block. Di kanannya muncul dua ikon: ![Ikon tempat sampah dan ikon mata di samping Featured Collection ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/editor-tema/d07-hapus-sembunyikan.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=82fa582ef8083bdeed40bdb41f01174a) Ikon hapus dan mata di samping section. | Ikon | Yang terjadi | | - | - | | Tempat sampah | Section atau block langsung dihapus, tanpa konfirmasi. Masih bisa dibatalkan dengan **Reset** selama belum disimpan. | | Mata | Section disembunyikan **hanya di preview editor**, untuk melihat tampilan tanpa section itu. Setelah disimpan, section tetap tampil di toko. | Untuk menghilangkan section dari toko, pakai ikon tempat sampah. Ikon mata cukup untuk mencoba tampilan di preview. Section wajib tidak punya ikon hapus, misalnya **Header**, **Footer**, serta **Product Information** dan **Related Products** di halaman Products. **Product Information** punya ikon panah melingkar untuk mengembalikan section ke pengaturan awal, dengan konfirmasi "Reset section ke pengaturan awal (default)?". ## Mengedit halaman lain Klik pilihan halaman di atas preview, misalnya **Home Page**, lalu pilih halaman lain. ![Pilihan halaman terbuka dengan Home Page, Products, All Collection, Collection List, Cart, Search, 404 Page, Thank You, dan Custom Page](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/editor-tema/d08-halaman.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=c15b86921fcf87426637f00de517f847) Halaman yang bisa diedit. | Halaman | Yang diatur | | - | - | | **Home Page** | Halaman depan toko | | **Products** | Halaman detail produk, misalnya foto, harga, varian, dan tombol beli. Setelah memilih Products, pilih satu produk di **Pilih Catalog** untuk contoh preview. Pengaturannya berlaku untuk semua produk. | | **All Collection** dan **Collection List** | Halaman daftar produk dan daftar collection | | **Cart** dan **Search** | Halaman keranjang dan hasil pencarian | | **404 Page** | Halaman yang tampil kalau alamat tidak ditemukan. Teks "Page not found" dan tombolnya belum bisa diubah, yang bisa diatur hanya header, footer, dan Custom CSS. | | **Thank You** | Halaman setelah pembeli selesai checkout. Atur color scheme dan **Show Address Map** untuk menampilkan peta alamat pengiriman. | | **Custom Page** | Halaman buatan Anda, misalnya Tentang Kami. Lihat [Menu dan Custom Page](https://docs.simplus.id/web-jualan/menu-dan-custom-page.md). | Klik **Simpan** sebelum pindah ke halaman lain supaya perubahan aman. ## Melihat tampilan di HP Klik ikon HP di atas preview. Preview berubah ke ukuran HP, tempat sebagian besar pembeli berbelanja. Klik ikon monitor untuk kembali ke desktop. ![Editor dengan preview ukuran HP dan ikon HP ditandai](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/editor-tema/d09-preview-hp.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=adcf21c67ed5ff5c216403c33d929d25) Preview tampilan HP. ## Menyimpan, Reset, dan keluar * **Simpan**: semua perubahan tersimpan dan muncul pesan "Tema telah disimpan." Kalau tema ini Default, toko langsung berubah. * **Reset**: konfirmasi "Reset semua perubahan yang belum disimpan?". Semua perubahan sejak terakhir disimpan dibuang. * **Keluar** (panah kiri atas): kalau masih ada perubahan yang belum disimpan, muncul "Ada perubahan yang belum disimpan. Lanjutkan?". Klik **Batal** untuk kembali dan menyimpan dulu. ![Pesan hijau Tema telah disimpan di atas preview](https://mintcdn.com/simplus/zczX3u4gwKEkQq3G/images/web-jualan/editor-tema/d10-tersimpan.webp?fit=max\&auto=format\&n=zczX3u4gwKEkQq3G\&q=85\&s=ec39d586e275355cf8d33e789042a316) Pesan setelah Simpan. ## Nova, asisten AI tema Coming Soon Tombol **AI** (**Tanya Nova**) akan membantu mengubah tema lewat perintah tertulis, misalnya "ganti warna tombol jadi hijau". Fitur ini memerlukan paket dengan Nova, dan karyawan memerlukan izin asisten AI. Tombol **AI** hanya tampil kalau fitur ini aktif untuk toko Anda. ## 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 | | - | - | - | | Anda memiliki perubahan yang belum disimpan. Klik Simpan untuk menyimpan. | Ada perubahan yang belum masuk ke toko | Klik **Simpan** kalau sudah selesai | | Tema telah disimpan. | Perubahan tersimpan | Cek hasilnya lewat **Kunjungi website** | | Reset semua perubahan yang belum disimpan? | Konfirmasi sebelum perubahan dibuang | Klik **OK** untuk membuang, **Batal** untuk lanjut mengedit | | Ada perubahan yang belum disimpan. Lanjutkan? | Anda keluar editor sebelum menyimpan | Klik **Batal**, lalu **Simpan** | | Gagal mengambil data untuk halaman: ... / Gagal menyimpan beberapa halaman: ... | Sebagian halaman gagal dimuat atau disimpan | Muat ulang editor, lalu ulangi perubahan di halaman yang disebut | | Tidak ada halaman yang bisa disimpan. Muat ulang editor lalu coba lagi. | Editor belum selesai memuat halaman | Muat ulang halaman, lalu ulangi perubahan | | Silakan akses editor tema di layar yang lebih besar | Layar terlalu kecil untuk editor | Buka builder dari laptop atau tablet mendatar | ## Tips * Ganti konten contoh di semua halaman yang dilihat pembeli, minimal **Home Page** dan **Products**. * Simpan berkala saat mengedit banyak bagian. * Setelah menyimpan, buka toko di HP untuk memastikan tampilannya rapi. ## Langkah berikutnya > [card] [Atur tema](https://docs.simplus.id/web-jualan/atur-tema.md) > > Logo, warna, huruf, dan checkout. > [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.