Clew

Cara menambahkan tooltip ke toko Shopify tanpa developer

Oleh · diperbarui

Petunjuk kontekstual di Shopify: satu kalimat di samping elemen yang membuat pengunjung ragu, dipasang dengan satu klik di editor visual dan ditampilkan tepat saat dibutuhkan.

Waktu
● 10 menit
Harga
Paket Free
Siapa yang mengerjakan
Pemilik toko atau staf dengan akses tema

Contoh: tooltip di Shopify

Retur karena ukuran adalah biaya terbesar toko ini. Di halaman produk, 8 detik setelah dimuat, tooltip di samping pilihan ukuran berbunyi “Ukurannya kecil — kebanyakan pembeli memilih satu ukuran lebih besar”.

Gratis di paket Free Clew, tanpa kartu dan tanpa batas waktu: satu situs dan hingga 3 tur atau tooltip yang dipublikasikan. Aturan audiens dan A/B test tersedia di Pro.

Cara menambahkan tooltip di Shopify, langkah demi langkah

  1. Langkah 01

    Salin snippet Clew Anda

    Buat akun gratis (atau masuk), tambahkan situs Anda, lalu buka Ringkasan di admin. Klik baris pada kartu Belum ada sinyal dari widget. untuk menyalinnya: baris itu sudah berisi kunci situs asli Anda, bukan placeholder.

    <!-- Clew: ganti TEMPEL_KUNCI_SITUS_ANDA dengan kunci situs dari Admin > Ringkasan -->
<script src="https://tryclew.io/widget/TEMPEL_KUNCI_SITUS_ANDA.js" async></script>
    Ringkasan di admin Clew dengan baris embed dan kunci situs yang disamarkan (tooltip di Shopify)
    Langkah 1 · ilustrasi skematis
  2. Langkah 02

    Buka kode tema

    Di admin Shopify buka Online Store → Themes, klik … di samping tema yang live, lalu pilih Edit code.

    Jalur ke kolom kode head di builder populer, termasuk theme.liquid Shopify (tooltip di Shopify)
    Langkah 2 · ilustrasi skematis
  3. Langkah 03

    Tempel baris ke theme.liquid

    Buka layout/theme.liquid, tempel baris Clew tepat sebelum </head>, lalu klik Save. Baris ini dimuat di setiap halaman toko.

    Editor kode tema dengan skrip Clew sebelum penutup head (tooltip di Shopify)
    Langkah 3 · ilustrasi skematis
  4. Langkah 04

    Cek tampilan toko

    Buka toko di jendela privat baru (dengan kata sandi toko jika belum diluncurkan) dan pastikan halaman dimuat normal.

    Bar atas toko dengan tombol Save disorot (tooltip di Shopify)
    Langkah 4 · ilustrasi skematis
  5. Langkah 05

    Tempelkan tooltip ke elemen

    Di Clew buka Alur → + Alur baru, biarkan Tooltip langkah demi langkah, lalu klik Edit di situs Anda. Di halaman Anda klik Pilih elemen, klik kolom atau tombolnya, lalu tulis judul singkat dan satu kalimat. Atur Posisi jika posisi otomatis menutupi sesuatu yang penting.

    Gelembung tooltip di samping kolom formulir di website, dengan penjelasan singkat (tooltip di Shopify)
    Langkah 5 · ilustrasi skematis
  6. Langkah 06

    Tentukan di mana, kapan, dan untuk siapa tampil

    Di editor yang sama, isi Di mana ditampilkan (URL halaman), Kapan ditampilkan, Target audiens, dan Frekuensi. Ini pengaturan untuk contoh di atas:

    PengaturanNilai
    FormatTooltip langkah demi langkah
    Di mana ditampilkan (URL halaman)Bagian berdasarkan prefiks /products
    Kapan ditampilkanSetelah N detik: 8 detik
    Target audiensTanpa aturan: semua yang membuka halaman
    FrekuensiSekali per pengunjung
    Editor tur Clew dengan format, aturan URL, pemicu, dan aturan audiens (tooltip di Shopify)
    Langkah 6 · ilustrasi skematis
  7. Langkah 07

    Publikasikan dan cek di situs live

    Ubah Status menjadi Terbit lalu simpan. Buka halaman di jendela privat: Clew mengingat siapa yang sudah melihat item “sekali”, jadi browser yang biasa Anda pakai mungkin melewatinya. Tayangan, penyelesaian, dan titik berhenti muncul di statistik.

    Ringkasan di admin Clew dengan kartu hijau widget aktif (tooltip di Shopify)
    Langkah 7 · ilustrasi skematis

Jebakan umum: tooltip di Shopify

Checkout tidak bisa dijangkau

Shopify tidak menjalankan skrip tema di halaman checkout, jadi tooltip bisa ada di halaman produk, koleksi, keranjang, dan konten, tetapi tidak di checkout. Rencanakan pesannya sebelum pelanggan sampai di sana.

Custom pixel tidak bisa menampilkan UI

Settings → Customer events menjalankan kode di sandbox tanpa akses ke halaman. Cocok untuk analitik, bukan untuk tooltip — pakai theme.liquid.

Ganti tema berarti baris hilang

Baris ini tinggal di tema. Saat Anda mempublikasikan tema baru atau versi terbaru, tempel lagi di theme.liquid tema tersebut.

Builder bisa membuat ulang elemen saat publish

Website builder kadang mengganti id elemen saat blok diduplikasi atau dibuat ulang. Setelah perubahan desain besar, buka Kesehatan: jika petunjuk kehilangan elemennya, pilih ulang.

Tanya jawab

Bisakah hanya tampil di sebagian produk?

Bisa. Pakai Bagian berdasarkan prefiks dengan path koleksi, atau URL mengandung dengan sebagian handle produk.

Apakah ada aplikasi Shopify untuk Clew?

Tidak, dan tidak diperlukan: satu baris di theme.liquid sudah merupakan seluruh pemasangan. Tidak ada biaya aplikasi atau app block tambahan di tema.

Apakah tooltip gratis?

Ya, di paket Free — hingga 3 tur dan tooltip yang dipublikasikan di satu situs.

Bisakah petunjuk hanya terbuka saat diklik?

Bisa. Pilih Saat elemen diklik, isi selector ikon atau tautan yang membukanya, lalu atur Setiap kunjungan.

Yang juga bisa ditambahkan di Shopify

Tooltip di platform lain

Cara menambahkan tooltip dan petunjuk ke website tanpa developerWebsite builder & CMS: panduan pemasanganHarga

Satu baris di situs Anda — lalu tur, tooltip, dan checklist tanpa rilis.

Dapatkan kunci situs gratisCara kerja ClewPaket gratis selamanya, tanpa kartu kredit

Product tour, popup, dan onboarding di era AI

7 pola lengkap dengan jumlah langkah, aturan teks, dan metrik, apa yang diubah AI, serta checklist sebelum terbit. PDF, 2 halaman. Isi panduan →

Panduannya dalam bahasa Inggris.