Built Web

Web Development

Membuat Quick View Product

Pengaturan Tokoo Quick View Trigger

Fitur Quick View Trigger adalah salah satu fitur unggulan tema ToKoo yang memungkinkan calon pembeli melihat pratinjau cepat detail produk dalam bentuk jendela pop-up (modal) secara instan. Fitur ini sangat efektif untuk mempercepat proses belanja tanpa memaksa pengunjung berpindah dari halaman katalog utama.

Cara Menambahkan Blok Quick View ke Gambar Produk

Untuk meletakkan tombol ikon mata (Quick View) melayang di atas gambar produk seperti pada demo tema ToKoo, ikuti langkah-langkah berikut:

  1. Masuk ke Appearance > Editor (Tampilan > Editor) lalu pilih komponen kartu produk Anda (biasanya di dalam Template Parts > Product Card).
  2. Klik tombol + (Add Block / Tambah Blok) di pojok kiri atas editor.
  3. Di kolom pencarian, ketik “quick view”.
  4. Temukan dan klik blok bernama Tokoo Quick View Trigger (memiliki ikon mata).
  5. Drag atau letakkan blok tersebut di atas komponen Gambar Produk (Product Image). Anda dapat menggunakan fitur posisi absolut/melayang (overlay) bawaan Gutenberg untuk menaruhnya di sudut gambar produk.
quick-view-tokoo

Panduan Pengaturan Sidebar (Block Settings)

Setelah blok berhasil dipasang, klik tombol Quick View tersebut untuk memunculkan panel pengaturan khusus di Sidebar Kanan (Tab Block).

quick-view-control

1. Quick View Trigger

  • Tokoo Quick View Trigger: Sistem akan secara otomatis membaca konteks produk di sekitarnya (loop context atau single product context) untuk memicu pop-up produk yang sesuai secara dinamis.

2. Panel Trigger Colors (Warna Tombol)

Bagian ini memungkinkan Anda mengatur estetika warna tombol dalam dua kondisi: Kondisi Normal dan Kondisi Hover (ketika kursor diarahkan ke atas tombol).

  • Background: Mengatur warna latar belakang lingkaran/kotak tombol saat kondisi normal (misalnya: putih polos agar kontras dengan gambar produk di belakangnya).
  • Text: Mengatur warna ikon mata (atau teks pendukung) di dalam tombol (misalnya: warna merah aksen tema Anda).
  • Border: Mengatur warna garis tepi tombol jika Anda ingin memberikan garis pembatas halus.
  • Hover Background: Mengatur perubahan warna latar belakang tombol saat kursor diarahkan ke tombol tersebut.
  • Hover Text: Mengatur perubahan warna ikon mata saat kondisi di-hover.
  • Hover Border: Mengatur perubahan warna garis tepi saat kondisi di-hover.

3. Size Settings (Pengaturan Ukuran)

Klik tab menu Size Settings di bagian bawah untuk mengatur:

  • Dimensi lebar/tinggi tombol ikon.
  • Ukuran ikon mata di dalamnya agar proporsional (tidak terlalu besar dan tidak terlalu kecil).

Tips Penerapan Terbaik (Best Practices)

  • Kontras yang Kuat: Karena tombol ini diletakkan di atas gambar produk, pastikan warna Background tombol cukup kontras (seperti warna putih tebal atau semi-transparan) agar tetap terlihat jelas apa pun warna dari foto produk Anda.
  • Efek Hover Interaktif: Berikan transisi warna yang menyenangkan saat di-hover. Contoh kombinasi yang bagus:
    • Normal: Background Putih + Ikon Merah.
    • Hover: Background Merah + Ikon Putih.
  • Konsistensi Posisi: Jika Anda menaruh tombol Quick View di sudut kiri bawah gambar produk pada satu kolom, pastikan posisinya sama di seluruh kartu produk lainnya agar tata letak katalog toko online Anda terlihat rapi dan simetris.