Cara Menambahkan Pop-up di Shopify

Cara Menambahkan Pop-up di Shopify
Joko Setiawan

Joko Setiawan

May 21 2023

7.5k

Anda dapat menambahkan pop-up di Shopify Anda dengan melakukan coding atau menggunakan aplikasi Shopify. Melalui coding, Anda dapat men

Ada dua cara untuk menambahkan sebuah pop-up pada toko Shopify Anda yaitu dengan melakukan coding atau menggunakan aplikasi Shopify. Untuk coding, Anda perlu meng-edit kode tema Anda, sedangkan sebuah aplikasi dapat membantu Anda dengan berbagai macam fitur canggih dengan tampilan yang mudah dipahami.

Untuk menambahkan pop-up ke dalam Toko Shopify Anda, ikuti langkah berikut:

  1. Log in ke panel admin Shopify Anda.
  2. Untuk mengakses toko online dari panel admin. Klik “Online Store” pada sidebar sebelah kiri
  3. Pada bagian Online Store, klik “Themes”.
  4. Pada bagian Themes, temukan tema yang saat ini Anda gunakan dan klik tombol (titik 3) “Actions” di sebelahnya. Kemudian pilih “Edit code”

Catatan: Selalu disarankan untuk membuat salinan cadangan tema Anda sebelum melakukan perubahan apapun. Anda dapat melakukannya dengan menggandakan tema Anda.

  1. Pada bagian code editor, arahkan ke folder “Layout” dan buka file “theme.liquid”.
  2. Di dalam file "theme.liquid", cari tag penutup .
  3. Sebelum tag penutup , masukkan kode berikut:

window.onload = function() {

var popup = document.createElement('div');

// Customize the content and styling of your pop-up

popup.innerHTML = 'This is your pop-up content.';

popup.style.backgroundColor = 'white';

popup.style.color = 'black';

popup.style.width = '300px';

popup.style.height = '200px';

popup.style.position = 'fixed';

popup.style.top = '50%';

popup.style.left = '50%';

popup.style.transform = 'translate(-50%, -50%)';

document.body.appendChild(popup);

};

Ubah konten dan gaya pop-up Anda dengan memodifikasi innerHTML, warna latar belakang, warna teks, lebar, tinggi, posisi, dan properti CSS lainnya dari elemen pop-up sesuai keinginan Anda.

  1. Simpan perubahan yang Anda buat ke file “theme.liquid”
  2. Preview toko Anda untuk melihat pop-up tersebut berjalan. Sebelum mengaktifkan perubahan yang Anda buat, gunakan tombol “Preview” pada bagian atas code editor untuk melihat perubahan yang Anda buat.
  3. Jika Anda sudah puas dengan tampilan pop-up tersebut, klik “Save” untuk mengaktifkannya pada toko Shopify Anda.

Ingatlah, Ini hanyalah penerapan dasar dari pop-up dan mungkin tidak mencakup fitur canggih seperti trigger saat pengguna hendak keluar atau penundaan waktu tertentu.. Jika Anda membutuhkan fungsi-fungsi yang lebih canggih, Anda mungkin ingin menggunakan aplikasi Shopify atau mencari bantuan dari seorang pengembang.

Jika Anda memilih untuk menambahkan pop-up ke dalam Shopify tanpa harus melakukan coding, Anda bisa menggunakan aplikasi Shopify yang menawarkan berbagai macam fungsi pop-up, ini adalah caranya:

  1. Log in ke panel admin Shopify Anda.
  2. Dari panel admin, klik “Apps” di bagian kiri
  3. Klik opsi “Recommended Apps”.
  4. Pada bagian “Apps”, klik “Shopify App Store” yang terletak di bagian bawah.
  5. Untuk menemukan aplikasi pop-up di Shopify App Store, cukup dengan melakukan pencarian. Ada beberapa pilihan populer yang tersedia, termasuk Privy, Poptin, dan Justuno. Pilih aplikasi yang sesuai dengan kebutuhan Anda dan memiliki ulasan yang baik.
  6. Untuk meng-install aplikasi tersebut, ikuti arahan yang telah disediakan oleh pengembang aplikasi tersebut. Meskipun setiap aplikasi mungkin memiliki proses instalasi yang sedikit berbeda, biasanya semua aplikasi yang ada perlu mengklik tombol “Add app” atau “Install App” dan memberikan beberapa izin yang diperlukan.
  7. Setelah meng-install aplikasinya, konfigurasikan pengaturan pop-up Biasanya Anda akan melakukan penyesuaian konten, desain, triggers, dan opsi penargetan untuk pop-up Anda.
  8. Tinjau kembali dan uji pop-up Anda untuk memastikan tampilannya sesuai dengan keinginan Anda.
  9. Setelah Anda puas dengan pengaturan tersebut, aktifkan pop-up untuk membuatnya muncul di toko Shopify Anda.

Menggunakan aplikasi pop-up membuat Anda tidak perlu bersusah payah melakukan coding dan juga aplikasi ini menyediakan tampilan yang mudah Anda pahami untuk membuat dan mengelola pop-up di toko Shopify Anda. Untuk terlibat sepenuhnya dengan pelanggan Anda, jelajahi fitur-fitur dan kemampuan aplikasi yang dipilih dan manfaatkan potensinya secara maksimal.

Joko Setiawan

Author

Joko Setiawan

Joko Setiawan adalah growth engineer yang membantu toko bisnis online dengan wawasan dan rekomendasi yang dapat membantu untuk menerapkan taktik Optimisasi Tingkat Konversi (Conversion Rate Optimization).