Bayangkan Anda menjual kit pemutih gigi, layanan detailing mobil, atau sekumpulan preset Lightroom. Apa yang membuat calon pelanggan memutuskan untuk membeli? Dengan produk seperti ini, orang menginginkan lebih dari sekadar janji Anda. Mereka ingin melihat hasilnya.
Slider sebelum-dan-sesudah memungkinkan pembeli membayangkan dengan tepat apa yang mereka bayar. Seret gagangnya, saksikan transformasinya, dan nilainya terjual dengan sendirinya. Ini adalah salah satu cara tercepat untuk membangun kepercayaan dan membedakan produk Anda di pasar yang ramai.
Jika Anda berjualan di Shopify, ada satu kendala: Tema bawaannya tidak menyertakan blok sebelum-dan-sesudah secara langsung. Untuk menambahkannya, Anda punya tiga pilihan: Instal aplikasi dari Shopify App Store, sematkan widget no-code gratis, atau tulis kode slider khusus ke dalam file tema Anda. Panduan ini membahas ketiga metode tersebut sehingga Anda bisa mulai mengubah pengunjung menjadi pembeli.
Pilihan 1: Instal ekstensi Shopify App Store
Bagi sebagian besar penjual, naluri pertama adalah membuka Shopify App Store dan mencari “slider sebelum-dan-sesudah.” Anda akan menemukan banyak pilihan, dan sebagian besar terinstal sebagai blok aplikasi native. Setelah Anda menambahkan aplikasinya, slider akan muncul langsung di dalam editor tema Anda sebagai bagian atau blok yang bisa Anda letakkan di halaman produk. Kemudahan itulah daya tariknya.
Namun, ada dua biaya yang menyertainya.
Yang pertama adalah apa yang disebut pemilik toko sebagai “pajak aplikasi.” Hampir setiap aplikasi slider khusus berjalan dengan langganan bulanan — biasanya sekitar $1 hingga $10 per bulan untuk satu fitur interaktif. Satu slider di sini, satu penghitung waktu mundur di sana, dan setahun kemudian Anda membayar uang yang tidak sedikit untuk fitur-fitur yang dulunya merupakan tambahan sekali bayar.
Biaya kedua adalah kecepatan. Aplikasi visual front-end sering menyuntikkan JavaScript pihak ketiga mereka sendiri ke setiap halaman yang mereka sentuh. Instal beberapa di antaranya, dan halaman produk Anda membawa beban skrip eksternal, yang dapat memperlambat kecepatan halaman — langsung memengaruhi tingkat konversi sekaligus SEO Anda.
Jika Anda sudah mempertimbangkan kompromi tersebut dan tetap ingin memilih jalur aplikasi native, berikut cara pengaturannya:
- Buka Shopify App Store, pastikan Anda sudah masuk ke akun Shopify Anda. Cari “slider sebelum-dan-sesudah.”
- Pilih sebuah aplikasi dan klik Install untuk menambahkannya ke toko Anda.
- Ikuti petunjuk aplikasi untuk mengaturnya. Sebagian besar aplikasi mengharuskan Anda mengatur pembayaran sebelum menggunakannya, jadi Anda perlu melakukan ini sebelum menambahkannya ke tema Anda.
Pilihan 2: Gunakan widget slider no-code gratis (direkomendasikan)
Jika Anda menginginkan slider perbandingan yang dapat disesuaikan dan responsif tanpa langganan bulanan, rute terbaik adalah widget yang disematkan secara gratis. Jotform Before and After Slider dibuat khusus untuk ini. Anda mengonfigurasinya secara visual, menyalin satu kode sematan, dan meletakkannya ke halaman Shopify Anda. Tidak ada aplikasi yang perlu diinstal dan tidak ada biaya berulang.
Karena widget dimuat dari server Jotform alih-alih menyuntikkan skrip ke tema Anda, widget ini menjaga kode toko Anda tetap ringan, yang membantu melindungi kecepatan halaman. Anda dapat mengatur pengungkapan horizontal atau vertikal; memilih interaksi seret, klik, atau arahkan kursor; menambahkan label dan keterangan; dan bahkan menumpuk hingga tiga pasang perbandingan dalam carousel yang ringkas.
Berikut cara menambahkannya:
- Di halaman Jotform Before and After Slider, tambahkan gambar sebelum dan sesudah Anda serta tulis label dan keterangan untuk setiap pasangan. Jotform menarik gambar berdasarkan URL, jadi jika foto Anda belum online, unggah terlebih dahulu ke Shopify di bawah Settings > Files dan salin URL setiap gambar. Anda juga dapat memilih opsi unggah gambar jika Anda lebih suka menambahkan gambar langsung di Jotform.
- Sesuaikan arah pengungkapan, posisi pembatas, warna, dan ukuran agar cocok dengan toko Anda.
- Salin kode sematan yang dihasilkan Jotform. Anda dapat melakukannya dengan mengklik tombol Copy Code di tab Publish.
- Di editor tema Shopify Anda, buka templat produk atau halaman tempat Anda ingin menaruh slider, klik Add section (atau Add block), dan pilih Custom Liquid. Tempelkan kode sematan lalu klik Save.
Pilihan 3: Edit kode tema Shopify Anda
Jika Anda lebih memilih untuk tidak menyentuh aplikasi eksternal atau sematan sama sekali, Anda dapat membangun slider perbandingan langsung di tema Anda. Ini adalah rute dengan kontrol terbanyak dan overhead paling sedikit, tetapi juga merupakan pilihan yang paling mudah rusak.
Pembuatannya terdiri dari tiga bagian: HTML untuk menampung dua gambar, CSS untuk menumpuk dan memotongnya, serta JavaScript untuk menggerakkan pembatas saat pengunjung menyeretnya. Tempat paling sederhana untuk meletakkan semuanya adalah satu blok Custom Liquid, sehingga Anda tidak perlu mengedit file templat secara langsung.
Berikut yang harus dilakukan:
- Tambahkan markup dengan dua URL gambar Anda. Gambar “before” berada di atas dan akan dipotong; gambar “after” berada di bawahnya.
html<div class="ba-slider" id="baSlider"> <img src="BEFORE_IMAGE_URL" alt="Before" class="ba-img ba-before" id="baBefore"> <img src="AFTER_IMAGE_URL" alt="After" class="ba-img"> <div class="ba-handle" id="baHandle"></div></div>- Tambahkan CSS. Pemosisian absolut menumpuk gambar, clip-path menampilkan setengah gambar “before” di awal, dan touch-action: none mencegah halaman menggulir saat seseorang menyeret di ponsel.
- Tambahkan JavaScript. Pointer event mencakup mouse dan sentuhan dalam satu jalur, sehingga handle mengikuti gerakan kursor atau geseran jari. Simpan, lalu uji di ponsel asli.
Peringatan: Ini adalah opsi yang berisiko. Sebuah tanda kurung yang salah atau gaya yang bocor ke seluruh tema Anda dapat merusak tata letak seluler Anda atau, lebih buruk lagi, mengganggu alur checkout. Perilaku sentuh harus diuji di berbagai perangkat nyata, bukan hanya di browser desktop Anda, dan Anda sendiri yang menanggung setiap bug serta setiap perbaikan di masa depan. Jika pertukaran itu terdengar lebih buruk daripada menggunakan widget, kami merekomendasikan Opsi 2.
Tingkatkan toko Shopify Anda dengan widget cerdas tanpa kode
Slider sebelum dan sesudah memang layak ditambahkan, tetapi jarang menjadi satu-satunya elemen interaktif yang dibutuhkan sebuah toko. Shopify meraih tempatnya di antara pembuat situs web e-commerce terbaik sebagian karena sangat mudah diperluas, dan add-on yang tepat adalah hal yang mengubah toko yang fungsional menjadi toko yang terpoles. Jebakannya adalah membayar langganan bulanan terpisah untuk masing-masingnya, karena biaya-biaya itu diam-diam menggerogoti margin yang Anda upayakan untuk lindungi.
Itulah alasan untuk beralih ke widget gratis yang di-host sebagai gantinya. Alat seperti Jotform Before and After Slider menjaga keuntungan Anda tetap utuh, halaman Anda memuat dengan cepat, dan pembeli Anda tetap terlibat. Dan direktori yang sama mencakup jauh lebih banyak daripada sekadar perbandingan gambar.
Beberapa widget Jotform lain yang layak dijelajahi untuk toko Shopify meliputi
- Sebuah timer hitung mundur untuk menambah urgensi pada flash sale atau peluncuran produk
- Sebuah widget FAQ untuk menjawab pertanyaan umum tentang produk langsung di halaman
- Verifikasi usia untuk produk dengan batasan usia
- Sebuah tombol kembali ke atas untuk membuat halaman produk yang panjang lebih mudah dinavigasi
Jelajahi direktori widget situs web Jotform lengkap untuk melihat apa yang cocok untuk toko Anda. Selain itu, Anda dapat menghubungkan formulir dan data Anda secara langsung melalui integrasi Jotform-Shopify. Coba widget tanpa kode pertama Anda secara gratis dan siapkan hanya dalam beberapa menit.
Artikel ini ditujukan untuk pemilik toko Shopify, dropshipper, dan merek e-commerce (terutama di bidang kecantikan, kebugaran, preset, dan dekorasi rumah) yang ingin menampilkan transformasi produk secara visual tanpa membayar langganan aplikasi bulanan.
Kirim Komentar: