Menambahkan popup ke toko Shopify Anda adalah hal yang patut Anda lakukan saat Anda perlu menarik perhatian pengunjung pada momen yang tepat—mungkin untuk memperluas daftar email, mengumumkan penawaran kilat, atau dengan halus mengingatkan pengunjung tentang penawaran istimewa sebelum mereka meninggalkan situs. Popup bisa meningkatkan keterlibatan, menjaga minat pengunjung, dan mendorong lebih banyak kunjungan ulang, terutama ketika muncul tepat saat pengunjung membutuhkannya.
popup widget adalah cara praktis untuk menangani ini. Ia memungkinkan Anda membuat, menyesuaikan, dan mengelola popups langsung di dasbor Shopify Anda, sehingga Anda tidak perlu repot dengan kode rumit atau pembaruan manual. Semuanya tetap terbarui secara otomatis, desainnya selaras dengan merek Anda, dan Anda menghemat waktu sambil memastikan pengunjung melihat pesan yang paling penting.
- Panduan pengaturan langkah demi langkah. Petunjuk rinci untuk menyematkan pop-up di Shopify.
- Metode alternatif. Perbandingan opsi berbasis aplikasi dan manual, termasuk kelebihan dan kekurangan.
- Daftar Periksa Ahli. Poin-poin utama untuk memverifikasi kinerja popup dan kepatuhan.
- Saran Pemecahan Masalah. Solusi untuk masalah pengaturan dan tampilan yang paling umum.
Untuk menjaga kemudahan, instruksinya dibagi menjadi langkah-langkah yang jelas, sehingga Anda bisa menyiapkan popup dengan cepat dan menyesuaikan rincian kapan pun Anda siap.
Cara Cepat Menambahkan Popup di Shopify
Panduan praktis menambahkan popup di situs Shopify Anda dalam empat langkah mudah.
- Buka Elfsight’s editor dan pilih template.
- Sesuaikan widget popup Anda.
- Klik ‘Tambahkan ke situs web secara gratis’ dan salin kodenya.
- Tempelkan ke backend situs Shopify Anda.
Bangun dan pratinjau popup Shopify kustom Anda di editor langsung!
Popup yang Membantu Situs Web Anda Terhubung dan Mengonversi
Anda telah melihat betapa mudahnya menata pop-up. Inilah apa yang bisa dilakukan widget ini untuk membantu Anda mencapai tujuan Anda:
| Fitur Utama | Mengapa Ini Penting |
|---|---|
| Tipe popup apa pun: notifikasi, diskon, penangkapan email, niat keluar | Pilih pesan atau tawaran yang sesuai dengan audiens dan kampanye Anda, sehingga setiap popup terasa relevan. |
| Penargetan presisi dengan pemicu dan kondisi | Tampilkan popup pada waktu yang tepat dan untuk pengunjung yang tepat, sehingga pesannya lebih mudah diperhatikan. |
| Kustomisasi desain lengkap untuk tata letak, warna, gambar, dan pesan | Sesuaikan pop-up dengan branding Anda, menjaga tampilan situs Anda tetap konsisten. |
| Editor langsung tanpa coding dengan pratinjau instan dan kode semat | Setup popups cepat, lihat perubahan secara real-time, dan luncurkan tanpa masalah teknis. |
| Template siap pakai dan fleksibilitas membangun dari nol | Hemat waktu dengan memulai dari template atau buat popup unik untuk setiap kampanye. |
Fitur-fitur ini hanyalah sebagian cara popup widget Elfsight membantu Anda berinteraksi dengan pengunjung dan meraih hasil. Untuk melihat semua yang ditawarkannya, kunjungi halaman fitur popup. Selanjutnya, mari kita bahas masing-masing langkah untuk menghubungkan widget ke situs Anda.
Panduan Lengkap Menambahkan dan Menyesuaikan Popup untuk Situs Shopify Anda
Bagian ini menjelaskan setiap langkah untuk membuat, menyesuaikan, dan menyematkan popup Anda di situs Shopify, termasuk tips bermanfaat untuk menargetkan audiens berbeda atau tujuan konversi.
1. Pilih templat
Popup widget editor, the first step is selecting a template. Elfsight offers 20+ professionally designed popup templates suited for different marketing goals — whether you want to boost sales with special offers, collect newsletter subscribers, or announce new launches. Each template comes pre-configured with relevant content blocks and messaging to accelerate your setup.”>Saat Anda membuka editor widget Popup, langkah pertama adalah memilih sebuah templat. Elfsight menawarkan lebih dari 20 templat popup yang dirancang secara profesional untuk berbagai tujuan pemasaran — apakah Anda ingin meningkatkan penjualan dengan penawaran khusus, mengumpulkan pelanggan newsletter, atau mengumumkan peluncuran produk baru. Setiap templat dilengkapi blok konten dan pesan yang relevan secara pra-konfigurasi untuk mempercepat pengaturan Anda.
Pilih templat yang sejalan dengan tujuan konversi utama Anda dan klik “Lanjutkan dengan templat ini” untuk melanjutkan ke langkah berikutnya. Anda selalu bisa menyesuaikannya lebih lanjut agar sesuai dengan kebutuhan spesifik Anda.
2. Tambah dan Sesuaikan Blok Konten
Pindah ke tab Builder untuk merakit pop-up Anda menggunakan sistem blok konten yang fleksibel dari Elfsight.
Widget ini mendukung lebih dari 12 tipe blok yang bisa disesuaikan, memungkinkan Anda membuat pop-up yang sangat terarah tanpa coding:- Teks & Judul – Judul, teks isi, dan salinan deskriptif
- Gambar & Video – Unggah foto produk, gambar promosi, atau konten video yang disematkan
- Tombol & CTA – Tombol ajakan bertindak yang mengarahkan ke URL tertentu atau memicu tindakan
- Formulir – Kolom pendaftaran email, formulir kontak, atau elemen survei
- Kupon – Tampilkan kode diskon yang bisa disalin pengunjung dengan satu klik
- Jarak & Pemisah – Atur konten secara visual demi keterbacaan yang lebih baik
- iFrame & HTML Kustom – Sematkan konten eksternal atau kode kustom untuk kasus penggunaan lanjutan
3. Sesuaikan Tampilan & Branding
Klik bidang Latar Belakang untuk memastikan popup Anda selaras dengan identitas merek dan sistem desain situs Anda. Anda bisa memilih dari:
- Warna solid – Pilih dari warna yang tersedia atau tetapkan warna khusus, atur opasitas
- Latar Belakang Gradien – Atur warna gradien dan arah percampuran
- Unggah Gambar – Tambahkan gambar dari berkas media Anda untuk digunakan sebagai latar belakang
- Tautkan Video – Tempel URL YouTube atau Vimeo untuk menjadikan video latar belakang
Editor visual memberikan pratinjau langsung semua kustomisasi Anda, sehingga Anda bisa melihat persis bagaimana popup Anda akan terlihat sebelum dipublikasikan. Untuk kebutuhan branding tingkat lanjut, Elfsight juga mendukung CSS Kustom untuk gaya yang presisi per piksel.
3. Pilih Tata Letak Pop-up
Buka tab Layout untuk memilih bagaimana pop-up Anda akan tampil di situs Anda. Elfsight Pop-up menawarkan tiga opsi tata letak yang kuat, masing-masing dirancang untuk berbagai kasus penggunaan dan pengalaman pengguna:
- Modal (Pusat) – Popup klasik yang berada di pusat layar dan menutupi konten halaman dengan latar belakang semi-transparan. Sempurna untuk pesan prioritas tinggi, tawaran sambutan, atau pengumuman penting yang membutuhkan perhatian segera
- Slide-in – Popup yang meluncur masuk dari sudut layar, tetap terlihat tanpa menutupi konten halaman secara penuh. Ideal untuk penawaran exit-intent atau pengambilan leads yang tidak mengganggu dan menghormati pengalaman pengguna
- Panel – Panel terpisah yang ditempatkan di tepi kiri atau kanan layar. Cocok untuk pesan yang tetap terlihat atau formulir multi-langkah yang memungkinkan pengguna berinteraksi secara bertahap
Anda juga bisa menyesuaikan dimensi pop-up (lebar, tinggi, dan perataan), menambah atau menghapus tombol tutup, serta mengatur warna overlay latar belakang atau gambar agar sesuai merek Anda.
4. Atur Pemicu & Perilaku Tampilan
Buka tab Pengaturan untuk menentukan kapan dan bagaimana popup Anda muncul. Di sinilah kemampuan penargetan presisi Elfsight benar-benar bersinar, memungkinkan Anda menampilkan pesan yang tepat pada saat yang tepat. Popup kami menawarkan 6 pemicu canggih untuk mengaktifkan popup berdasarkan perilaku pengguna:
- Saat Halaman Dimuat – Tampil segera saat halaman selesai dimuat. Sempurna untuk pesan selamat datang atau pengumuman yang sensitif waktu
- Waktu di Halaman – Memicu setelah pengunjung menghabiskan sejumlah detik tertentu di halaman ini. Cocok saat pengunjung telah memiliki waktu untuk berinteraksi dengan konten Anda.
- Saat Gulir (%) – Aktifkan saat pengguna menggulir ke persentase halaman tertentu (mis. 50% atau 75%). Efektif untuk menarik perhatian setelah keterlibatan konten
- Saat Digulir ke Elemen – Tampilkan saat pengguna menggulir melewati elemen tertentu pada halaman Anda. Sempurna untuk mempromosikan produk terkait atau penawaran khusus di titik konten yang strategis
- Saat Diklik – Tampilkan popup saat pengunjung mengklik tombol atau tautan tertentu. Cocok untuk tombol “Pelajari Selengkapnya” atau informasi produk yang rinci
- Niat Keluar – Aktifkan saat pengguna menggerakkan kursor untuk menutup tab atau berpindah. Kesempatan konversi terakhir untuk pengabaian keranjang atau penawaran khusus
5. Atur Frekuensi Tampilkan & Penargetan
Tetap di tab Pengaturan dan sesuaikan frekuensi, penargetan halaman, dan penargetan perangkat untuk mengoptimalkan jangkauan popup Anda dan menghindari frustrasi pengguna:
- Opsi Frekuensi. Tentukan seberapa sering popup Anda muncul: setiap kali, hingga ditutup, sekali, setiap hari, atau setiap minggu.
- Penargetan Halaman – Tentukan halaman mana yang menampilkan popup atau kecualikan halaman tertentu. Tampilkan penawaran khusus hanya di halaman produk, atau sembunyikan popup di halaman checkout
- Penargetan Perangkat – Pilih apakah popup muncul di desktop, seluler, tablet, atau semua perangkat. Optimalkan untuk pengalaman pengguna yang berbeda pada layar yang lebih kecil.
6. Dapatkan Kode Instalasi
Setelah popup Anda sepenuhnya dikonfigurasi dan diuji, klik “Tambahkan ke Situs” — popup akan muncul dengan skrip pemasangan unik Anda. Salin seluruh cuplikan kode ini; Anda akan menggunakannya untuk menanamkan widget di situs Anda.
7. Tambahkan Popup ke Shopify
Pilih metode di bawah yang sesuai dengan lokasi widget ini muncul di toko Anda:
Halaman Tertentu — Online Store 2.0
- Di admin Shopify, buka Saluran Penjualan → Toko Online → Tema dan klik Kustomisasi.
- Pilih halaman tujuan dari dropdown di bagian atas editor visual.
- Klik Tambahkan bagian dan pilih Kustom Liquid.
- Simpan
Halaman Spesifik — Tema Vintage
- Di admin Shopify buka Toko Online → Tema → Sesuaikan.
- Pilih halaman yang akan diedit dari dropdown di bagian atas.
- Klik Tambahkan bagian → Konten Kustom. Di dalam blok Konten Kustom, gunakan Tambahkan blok → HTML Kustom jika diperlukan.
- Tempelkan kode sematan ke bidang HTML, atur lebar wadah menjadi 100% jika diperlukan, lalu klik Simpan.
Semua Halaman (seluruh situs)
- Di admin Shopify klik menu … dan pilih Sunting Kode.
- Open Layout → theme.liquid
- Tempel kode Anda sebelum tag penutup dan klik Simpan.
Halaman Produk
Menambahkan ke deskripsi produk
- Pergi ke Produk dan buka produk tersebut untuk diedit.
- Klik ikon
</>untuk membuka editor HTML, tempelkan cuplikan kode, lalu klik Simpan.
Menambahkan ke semua halaman produk
- Di admin Shopify buka Toko Online → Tema → Aksi → Sunting Kode.
- Open Sections → main-product.liquid
- Tempel kode Elfsight di tempat yang Anda inginkan muncul dan klik Simpan.
Jika Anda ingin menjelajahi cara alternatif untuk menambahkan widget, bagian berikut akan menjelaskan berbagai pendekatan untuk menampilkan pop-up di situs Shopify Anda.
Cara Menambahkan Popup di Shopify
Ada beberapa cara bawaan dan resmi untuk menambahkan pop-up di situs Shopify Anda, tetapi masing-masing memiliki kompromi yang signifikan dibandingkan menggunakan widget pop-up khusus seperti Elfsight.
Editor Tema Bawaan Shopify
Editor tema Shopify menyediakan fungsionalitas pop-up dasar untuk pengumuman sederhana atau formulir langganan buletin.
- Buka Editor Tema. Buka admin Shopify Anda dan pilih “Online Store,” lalu “Themes,” dan klik “Customize.”
- Tambahkan Bagian atau Blok Aplikasi. Pilih untuk menambahkan bagian baru atau blok di mana pop-up didukung, seperti pop-up buletin.
- Pilih Fitur Popup atau Bilah Pengumuman. Pilih opsi popup bawaan atau bilah pengumuman jika tema Anda mendukungnya.
- Kustomisasi Konten dan Tampilan. Ubah teks, gambar, dan opsi gaya yang disediakan tema.
- Simpan dan Publikasikan Perubahan. Pratinjau dan terbitkan perubahan Anda agar popup tampil.
Detail lebih lanjut tersedia dalam dokumentasi bantuan resmi Shopify.
Popup Kustom Menggunakan Kode Shopify Liquid
Shopify memungkinkan Anda membuat popup kustom dengan mengedit file Liquid tema Anda dan menambahkan HTML, CSS, dan JavaScript kustom.
- Akses Kode Tema. Pergi ke “Toko Online,” lalu “Tema,” dan klik “Edit kode.”
- Tambahkan HTML untuk Popup. Sisipkan kontainer pop-up dan konten di berkas tema terkait, misalnya theme.liquid.
- Sertakan CSS untuk Gaya. Tambahkan CSS kustom di stylesheet tema Anda untuk memberi gaya pada popup.
- Tambahkan JavaScript untuk Perilaku. Tulis JavaScript untuk menangani logika tampilan popup, seperti pengaturan waktu atau aksi tombol.
- Uji dan Publikasikan. Cek perubahan Anda di situs web dan publikasikan saat sudah puas.
Detail lebih lanjut tersedia di sumber daya pengembang Shopify.
Fitur Popup Aplikasi Email Shopify
Aplikasi Shopify Email menyertakan formulir pendaftaran pop-up dasar yang bisa diaktifkan untuk membangun daftar.
- Pasang Aplikasi Email Shopify. Tambahkan aplikasi Email Shopify dari admin Shopify Anda.
- Arahkan ke Bagian Formulir. Pergi ke area Formulir atau Formulir Pendaftaran di dalam aplikasi.
- Aktifkan Formulir Popup. Aktifkan fitur pendaftaran popup.
- Sesuaikan Kolom dan Pesan. Edit kolom formulir, ajakan bertindak, dan tampilan.
- Aktifkan dan Pantau. Aktifkan popup dan pantau langganan melalui dasbor aplikasi.
Detail lebih lanjut tersedia di bagian bantuan aplikasi Shopify Email.
Bagaimana Perbandingan Metode Menambahkan Popup Ini?
| Metode | Pro Utama 👍 | Kendala Utama 👎 |
|---|---|---|
| Widget Pop-up Elfsight | Desain yang sangat bisa disesuaikan dan pemicu canggih. | Akun diperlukan untuk akses ke dasbor. |
| Editor Tema Shopify | Mudah diatur tanpa coding. | Jenis pop-up terbatas dan opsi pemicu dasar. |
| Kode Liquid Shopify Kustom | Kontrol penuh atas desain pop-up dan pemicu. | Butuh keahlian pemrograman dan memakan waktu untuk diperbarui. |
| Shopify Email App Popup | Pengumpulan email sederhana dan gratis untuk memperluas daftar Anda. | Hanya bekerja untuk pendaftaran email dasar, tidak ada popup promosi. |
Jika Anda ingin tips praktis untuk membuat popup Anda berjalan lancar dan terlihat bagus di situs Shopify Anda, lanjutkan membaca untuk tips praktis berikutnya.
📝 Daftar Periksa Esensial untuk Keberhasilan Widget Popup
Berdasarkan pengalaman tim Elfsight dalam menerapkan dan menguji pop-up di ribuan situs, kami tahu bahwa detail setup kecil membuat perbedaan besar dalam performa. Berikut rekomendasi teratas kami untuk membantu Anda memaksimalkan Popup Widget.
- Tentukan tujuan spesifik untuk setiap popup. Putuskan apakah Anda ingin mengumpulkan alamat email, mengurangi pengabaian keranjang, mempromosikan diskon, atau menyampaikan pesan kunci sebelum Anda mulai menyesuaikan.
- Pilih pemicu dan waktu yang tepat. Gunakan exit-intent atau scroll-depth untuk penawaran khusus, tunda popup untuk pengunjung baru, dan hindari gangguan langsung agar keterlibatan tetap tinggi.
- Segmentasi audiens Anda dengan aturan penargetan. Atur popup Anda muncul berdasarkan tipe perangkat, halaman spesifik, atau tindakan pengguna untuk memastikan relevansi dan menghindari kelelahan.
- Jaga desain tetap sejalan dengan merek dan bebas gangguan. Sesuaikan warna popup, tipografi, dan gambar dengan branding Anda. Batasi elemen yang bersaing agar pesan Anda jelas dan dapat ditindaklanjuti.
- Gunakan templat siap pakai untuk kecepatan, lalu sesuaikan. Mulailah dengan templat yang mendekati kasus penggunaan Anda, lalu sesuaikan tata letak dan konten agar sesuai dengan kebutuhan kampanye Anda.
- Pratinjau dan uji responsivitas di semua perangkat. Gunakan pratinjau waktu-nyata editor langsung untuk memastikan popup Anda terlihat dan bekerja dengan baik di desktop, tablet, dan ponsel.
- Integrasikan elemen interaktif secara cerdas. Tambahkan formulir atau kode kupon yang dapat disalin hanya di tempat yang mendukung tujuan Anda, dan buat interaksinya tetap sederhana bagi pengguna.
- Atur frekuensi dan batas penjadwalan. Kendalikan seberapa sering pop-up muncul untuk pengunjung yang kembali agar tidak mengganggu dan menghindari kebutaan banner.
- Verifikasi penyematan yang mulus di platform situs web Anda. Gunakan kode semat instan dan periksa penempatan di CMS atau pembuat situs Anda agar popup muncul seperti yang diinginkan.
Selanjutnya, kami akan menjelaskan sebuah skenario nyata yang menunjukkan bagaimana sebuah bisnis menambahkan Popup Widget untuk menonjolkan penawaran terbatas waktu dan memperluas daftar email mereka langsung dari beranda.
Widget Popup Membimbing Pengunjung Wisata Tanpa Mengganggu
Let’s Go Peak District, sebuah direktori pariwisata komprehensif yang menghubungkan wisatawan dengan atraksi, akomodasi, dan pengalaman di Peak District, membutuhkan cara untuk menyampaikan informasi penting kepada pengunjung situs web tanpa memenuhi tata letak halaman atau mengganggu pengalaman pengguna.
Sebelum Elfsight
Tim menghadapi tantangan UX yang krusial:
- Tata letak halaman statis tidak memberi ruang untuk pesan promosi utama atau informasi penting.
- Pembaharuan penting tentang acara, fitur khusus, dan layanan sering terselip di konten halaman.
- Membangun solusi popup kustom memerlukan pengetahuan pemrograman dan pemeliharaan berkelanjutan.
- Sistem notifikasi generik mengurangi pengalaman situs pariwisata kelas premium.
Solusi: Mengimplementasikan Elfsight Popup Widget
Phil mengintegrasikan widget Elfsight Popup di halaman utama untuk menampilkan informasi penting pada momen-momen strategis dalam perjalanan pengguna. Popup ini dirancang agar terasa selaras dengan estetika premium situs — muncul pada waktu yang tepat tanpa terasa mengganggu atau agresif.
Strategi popup mencakup pemicu yang ditargetkan dan aturan tampilan, memastikan popup muncul hanya saat relevan untuk segmen pengunjung tertentu dan hanya di halaman yang memberikan nilai, bukan menambah gesekan. Pendekatan terarah ini membuat para pelancong mengetahui atraksi baru atau pengalaman musiman pada saat yang paling tepat untuk terlibat.
Hasil Nyata
Setelah mengimplementasikan widget Elfsight Popup:
- Keterlibatan Pengunjung yang Meningkat: Penempatan popup yang strategis meningkatkan rasio klik pada atraksi dan layanan unggulan tanpa mengganggu pengunjung
- Arsitektur Informasi yang Lebih Baik: Pesan-pesan kunci kini muncul pada saat yang tepat dalam perjalanan pengguna, meningkatkan kesadaran dan keterlihatan.
- Peningkatan Persepsi Merek: Desain pop-up yang profesional meningkatkan kualitas yang dirasakan pada platform pariwisata
- Tidak Mengganggu Desain: Berbeda dengan banner statis tradisional, pop-up muncul secara kontekstual, menjaga tata letak halaman yang bersih dan hierarki visual
- Uji A/B yang Mudah: Pesan popup dan timing bisa dengan cepat disesuaikan untuk mengoptimalkan konversi dan keterlibatan
Gambaran Besar: Pemasaran Pariwisata Multikanal
“Kami telah banyak menggunakan Formulir Kontak, dan kami menjual widget Ulasan atau Umpan Instagram sebagai upsell atau dengan paket listing kami yang lebih tinggi. Ini bekerja sangat, sangat baik.”
Phil Sproson, Let’s Go Peak District
Let’s Go Peak District’s use of Popup was just one component of a larger strategy that included the Pricing Table to transparently display advertising packages, Event Calendar to showcase upcoming Peak District activities, and Contact Form to capture tourism business inquiries. By combining these tools, the platform transformed into an interactive ecosystem where travelers find inspiration, discover experiences, and tourism businesses increase their visibility.
Masalah Popup Shopify & Perbaikan Praktis
Menambahkan popup ke situs Shopify biasanya mudah, tetapi pengalaman nyata menunjukkan beberapa masalah yang sering muncul—mulai dari popup tidak muncul setelah pemasangan hingga gangguan tata letak pada perangkat tertentu. Yuk kita selesaikan masalah ini bersama:
Mengapa popup saya tidak muncul setelah menginstal kode?
Pop-up saya menutupi tombol checkout atau navigasi. Bagaimana cara memperbaiki masalah tumpang tindih?
Mengapa pop-up bekerja di desktop tetapi tidak di ponsel?
Apa yang harus saya lakukan jika pop-up saya muncul kosong atau dengan gaya yang rusak?
Apakah ekstensi peramban atau pemblokir bisa menyembunyikan popup Shopify?
Jika Anda masih mengalami masalah setelah mencoba perbaikan ini, cek pusat bantuan resmi Elfsight dan saluran dukungan untuk panduan yang lebih terarah.
Pertanyaan atau Ide?
Kami berharap panduan ini memberi fondasi yang kokoh untuk mulai menambahkan popup ke situs Shopify Anda. Kami peduli membantu Anda menciptakan pengalaman yang lebih baik bagi pengunjung, jadi jika Anda memiliki masukan, ide, atau solusi popup kreatif untuk dibagikan, kami ingin mendengar dari Anda. Terhubung dengan tim Elfsight di X, Facebook, atau LinkedIn untuk pembaruan dan percakapan.
