Cara menambahkan popup ke toko Shopify tanpa developer

Oleh Andrey Davydov · diperbarui 18 September 2026

Panduan langkah demi langkah untuk popup di Shopify: pasang satu baris, tulis modal di editor Clew, dan tentukan kapan muncul — setelah beberapa detik, saat di-scroll, atau pada kunjungan ulang — tanpa menyentuh tema lagi.

Waktu: ● 10 menit
Harga: Uji coba gratis 14 hari, tanpa kartu
Siapa yang mengerjakan: Pemilik toko atau staf dengan akses tema

Contoh: popup di Shopify

Toko pakaian ingin pembeli yang kembali tahu soal gratis ongkir untuk belanja di atas Rp500.000, tanpa menyambut pengunjung pertama dengan lapisan popup. Popup “Gratis ongkir di atas Rp500.000 bulan ini” muncul di halaman koleksi pada kunjungan kedua, sekali, dan tombolnya membuka halaman pengiriman.

Format ini termasuk dalam paket Pro. Setiap akun baru dimulai dengan uji coba gratis 14 hari dengan semua format dan aturan audiens, tanpa kartu. Setelah uji coba berakhir, tidak ada yang dihapus dan yang sudah dipublikasikan tetap tampil; tur dan tooltip tetap gratis di paket Free.

Cara menambahkan popup di Shopify, langkah demi langkah

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.
```

<script src="https://tryclew.io/widget/TEMPEL_KUNCI_SITUS_ANDA.js" async></script>
```
Langkah 1 · ilustrasi skematis
Langkah 02
Buka kode tema
Di admin Shopify buka Online Store → Themes, klik … di samping tema yang live, lalu pilih Edit code.
Langkah 2 · ilustrasi skematis
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.
Langkah 3 · ilustrasi skematis
Langkah 04
Cek tampilan toko
Buka toko di jendela privat baru (dengan kata sandi toko jika belum diluncurkan) dan pastikan halaman dimuat normal.
Langkah 4 · ilustrasi skematis
Langkah 05
Tulis popup di Clew
Di Clew buka Alur → + Alur baru, lalu atur Format ke Jendela modal. Tambahkan satu langkah: judul singkat, satu atau dua kalimat, dan di Teks link / URL link isi teks tombol serta halaman yang dibukanya. Modal tidak butuh selector: selalu tampil di tengah.
Langkah 5 · ilustrasi skematis

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:

Pengaturan	Nilai
Format	Jendela modal
Di mana ditampilkan (URL halaman)	Bagian berdasarkan prefiks `/collections`
Kapan ditampilkan	Pada kunjungan ke-N: 2
Target audiens	Tanpa aturan: semua yang membuka halaman
Frekuensi	Sekali per pengunjung

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.
Langkah 7 · ilustrasi skematis

Jebakan umum: popup di Shopify

Checkout tidak bisa dijangkau

Shopify tidak menjalankan skrip tema di halaman checkout, jadi popup 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 popup — 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.

Jangan ditumpuk dengan popup bawaan builder

Jika tema atau plugin sudah menampilkan popup newsletter atau cookie di halaman yang sama, pengunjung melihat dua lapisan. Matikan salah satunya atau beri Clew pemicu lain (scroll atau kunjungan kedua).

Tanya jawab

Bisakah popup menampilkan kode diskon?

Bisa, sebagai teks — misalnya “Pakai HEMAT10 saat checkout”. Clew tidak membuat atau memvalidasi kode; buat diskonnya dulu di Shopify.

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.

Bisakah popup hanya tampil di satu halaman?

Bisa. Pasang baris kode di seluruh situs, lalu pilih Path persis atau Bagian berdasarkan prefiks di Di mana ditampilkan (URL halaman). Popup tidak akan muncul di halaman lain.

Apakah popup gratis?

Format modal termasuk dalam Pro; akun baru mendapat uji coba 14 hari dengan semua fitur, tanpa kartu. Tur dan tooltip gratis di paket Free.

Tombolnya mengarah ke mana?

Ke halaman mana pun yang Anda isi di URL link. Halaman itu terbuka di tab baru, jadi pengunjung tidak kehilangan halaman yang sedang dibuka.

Cara menambahkan popup ke toko Shopify tanpa developer

Contoh: popup di Shopify

Cara menambahkan popup di Shopify, langkah demi langkah

Salin snippet Clew Anda

Buka kode tema

Tempel baris ke theme.liquid

Cek tampilan toko

Tulis popup di Clew

Tentukan di mana, kapan, dan untuk siapa tampil

Publikasikan dan cek di situs live