Indeks & Panduan Custom Block ToKoo
Tema ToKoo dilengkapi dengan Custom Block bawaan yang dirancang khusus untuk mempercepat pembuatan toko online profesional langsung dari Block Editor (Gutenberg). Blok-blok ini menggantikan kebutuhan akan berbagai plugin tambahan yang dapat membebani kinerja situs Anda.
Berikut adalah direktori lengkap fungsi dan cara penggunaan setiap Custom Block yang tersedia di tema ToKoo.
Kategori Blok: Konversi & Penjualan (WooCommerce)
Blok-blok dalam kategori ini dirancang khusus untuk mempermudah navigasi belanja, memicu keputusan pembelian instan, dan meningkatkan angka penjualan (conversion rate) toko online Anda.
⚡ 1. Flash Sale (Countdown Timer)
- Fungsi: Menampilkan penghitung mundur (countdown) interaktif untuk promo terbatas.
- Tempat Terbaik: Halaman Beranda (Landing Page), bagian atas halaman toko, atau template Single Product.
- Cara Pakai: Masukkan blok ToKoo Flash Sale, lalu atur tanggal & jam berakhirnya promo di sidebar kanan. Anda juga bisa mengatur warna latar belakang kotak angka agar kontras dengan desain halaman.
🛒 2. Buy Now Button
- Fungsi: Tombol pembelian instan yang langsung mengarahkan pelanggan ke halaman pembayaran (Checkout), melewati keranjang belanja biasa (Cart).
- Tempat Terbaik: Halaman produk tunggal (Single Product Page) di bawah tombol “Add to Cart” bawaan WooCommerce.
- Cara Pakai: Tambahkan blok ToKoo Buy Now di dalam template Single Product. Anda dapat menyesuaikan teks tombol, warna latar belakang, ikon, serta animasi tombol saat kursor diarahkan (hover state).
👁️ 3. Quick View
- Fungsi: Tombol pintas yang menampilkan detail singkat produk dalam bentuk pop-up modal tanpa memuat ulang halaman.
- Tempat Terbaik: Di dalam daftar produk (Product Loop/Grid) di halaman Shop, Kategori, atau Beranda.
- Cara Pakai: Sisipkan blok ToKoo Quick View ke dalam desain layout kartu produk Anda di Site Editor. Pelanggan cukup mengeklik tombol ini untuk memilih variasi produk dan membelinya langsung.
🔍 4. Search Hallo (Live Product Search)
- Fungsi: Kotak pencarian produk pintar yang menampilkan hasil pencarian produk atau artikel blog.
- Tempat Terbaik: Area Header Utama.
- Cara Pakai: Letakkan blok ToKoo Search Hallo di dalam area Header. Anda dapat mengatur apakah hasil pencarian hanya menampilkan Produk WooCommerce saja, Postingan Blog saja, atau keduanya.
Kategori Blok: Tata Letak & Navigasi (Layout & Navigation)
Gunakan blok-blok ini untuk menyusun tata letak halaman yang dinamis, rapi, dan mudah dijelajahi oleh pengunjung di berbagai perangkat.
🍔 5. Mega Menu
- Fungsi: Membuat menu navigasi bertingkat yang besar dan kaya konten (bisa memuat kolom teks, gambar promosi, hingga daftar produk terlaris).
- Tempat Terbaik: Header Utama (Desktop).
- Cara Pakai: Tambahkan blok ToKoo Mega Menu di dalam navigasi header Anda. Anda dapat mengedit konten di dalam area dropdown mega menu ini layaknya mengedit halaman biasa menggunakan blok Gutenberg apa pun.
🎠 6. Hallo Slide (Swiper Integration)
- Fungsi: Membuat slider spanduk (banner slider) responsif yang mendukung sentuhan geser (touch-swipe) ramah seluler.
- Tempat Terbaik: Bagian paling atas Halaman Beranda (Hero Section).
- Cara Pakai: Tambahkan blok ToKoo Hallo Slide, lalu masukkan gambar atau konten di setiap slide-nya. Pada pengaturan sidebar kanan, aktifkan fitur Autoplay, atur kecepatan transisi, dan pilih jenis navigasi (titik-titik bullet atau panah kiri-kanan).
🗂️ 7. Tabs Block
- Fungsi: Mengelompokkan konten yang panjang ke dalam tab-tab horizontal yang rapi untuk menghemat ruang halaman.
- Tempat Terbaik: Bagian spesifikasi produk, detail panduan ukuran, atau ulasan tambahan.
- Cara Pakai: Tambahkan blok ToKoo Tabs, tentukan judul tab, lalu isi bagian konten di bawahnya dengan teks, gambar, atau bahkan tombol.
📂 8. Accordion Block
- Fungsi: Daftar menu lipat yang bisa dibuka-tutup secara dinamis untuk menyembunyikan/menampilkan teks.
- Tempat Terbaik: Halaman Tanya-Jawab (FAQ) atau Syarat & Ketentuan Pembelian di halaman produk.
- Cara Pakai: Tambahkan blok ToKoo Accordion. Anda dapat mengaktifkan opsi Auto-close (jika satu akordeon dibuka, akordeon lainnya akan menutup otomatis) melalui panel kustomisasi di sebelah kanan.
Kategori Blok: Interaksi & Utilitas (Utility & Interactive)
Blok-blok pendukung untuk memperkaya pengalaman membaca artikel blog, berbagi konten, serta memberikan opsi kenyamanan membaca kepada pengunjung.
🌓 9. Dark Mode Switcher
- Fungsi: Tombol pintas yang memungkinkan pengunjung mengubah warna website ke mode gelap (Dark Mode) demi kenyamanan mata.
- Tempat Terbaik: Sudut kanan atas Header atau bagian navigasi melayang (sticky navigation).
- Cara Pakai: Masukkan blok ToKoo Dark Mode. Sistem tema ToKoo akan secara cerdas menyesuaikan palet warna background dan teks ke skema warna gelap yang sudah Anda konfigurasi secara global.
📋 10. Hallo TOC (Table of Contents)
- Fungsi: Membuat daftar isi artikel secara otomatis berdasarkan tag heading (
H2,H3,H4) yang ada di dalam konten blog Anda. - Tempat Terbaik: Di awal artikel blog yang panjang atau di area sidebar artikel.
- Cara Pakai: Sisipkan blok ToKoo Hallo TOC di template postingan tunggal (Single Post). Blok ini sangat bagus untuk meningkatkan keramahan SEO artikel Anda di Google.
📢 11. Hallo Share
- Fungsi: Tombol bagikan (social share) minimalis dan ringan ke berbagai platform media sosial populer (WhatsApp, Facebook, Twitter/X, Telegram).
- Tempat Terbaik: Di bagian awal atau akhir artikel blog dan halaman produk tunggal.
- Cara Pakai: Tambahkan blok ToKoo Hallo Share. Blok ini dirancang sangat ringan tanpa menggunakan skrip pelacak eksternal yang dapat memperlambat loading website Anda.
(Catatan: Blok tambahan lainnya dapat langsung Anda temukan di daftar pencarian blok WordPress dengan mengetikkan kata kunci “ToKoo”.)
Panduan Umum Penggunaan Block ToKoo
Untuk mendapatkan hasil performa dan estetika terbaik, harap perhatikan beberapa hal berikut saat menggunakan Custom Block ToKoo:
- Optimalkan Gambar Slider: Untuk blok Hallo Slide, pastikan Anda mengunggah gambar yang sudah dikompresi (format
.webpsangat direkomendasikan) dengan dimensi rasio yang konsisten agar slider tidak bergeser atau timpang saat berganti slide. - Gunakan Fitur Duplikasi: Jika Anda sudah membuat satu blok dengan gaya warna dan font yang pas (misalnya blok Accordion), Anda bisa menduplikasinya dengan mengeklik ikon titik tiga di blok tersebut lalu pilih Duplicate untuk menghemat waktu penyusunan konten berikutnya.