Blog

Cara Menambahkan Banner Kustom ke Situs Web Shopify

Tanggal Pembaruan Terakhir: 
Cara Menambahkan Banner Kustom ke Situs Web Shopify

Banner promosi yang menarik perhatian adalah salah satu pendorong konversi paling ampuh bagi toko online. Banner adalah hal pertama yang dilihat pembeli saat membuka situs Anda, sehingga ajakan bertindak (call to action/CTA) yang jelas dapat meningkatkan rasio penambahan ke keranjang dan penjualan secara keseluruhan. Baik Anda ingin mengarahkan pembeli ke promo Black Friday, mengumumkan batas minimum gratis ongkir, maupun menjaring prospek dengan imbalan kode diskon, banner promosi adalah salah satu alat terbaik untuk tujuan tersebut.

Namun, mengapa hanya menggunakan banner statis? Penghitung waktu mundur dapat menciptakan rasa urgensi, konten multimedia dapat membuat banner lebih berdampak, dan formulir pengumpulan email dapat langsung menghasilkan prospek. Sayangnya, Shopify tidak membuat semua itu mudah diterapkan. Tema Shopify OS 2.0 memang menyertakan bagian “announcement bar” dan “image bar” bawaan, tetapi keduanya terbatas pada teks biasa di bagian atas halaman serta dua gambar statis, sedikit teks, dan dua tombol pada banner. 

Jika Anda ingin menyematkan banner promo di Shopify dengan formulir pengumpulan prospek yang tampil berbeda di perangkat seluler atau desktop, atau yang dilengkapi penghitung waktu mundur atau video, Anda tidak bisa melakukannya tanpa menulis Liquid dan JavaScript khusus. Shopify Magic, pembuat berbasis AI dari Shopify, memang dapat menghasilkan banner Liquid kustom di Shopify, tetapi tidak menyediakan dukungan. Dan jika Anda tidak memahami kode yang dibuat Shopify Magic, kecepatan dan aksesibilitas toko Anda bisa terpengaruh. 

Hal ini membuat sebagian besar pemilik toko hanya memiliki dua pilihan: menginstal aplikasi pihak ketiga berbayar dari Shopify App Store, atau menggunakan widget serverless yang gratis dan ringan yang menjaga kecepatan halaman dan arsitektur tema Anda. 

Mari kita lihat cara menambahkan banner ke situs web Shopify.

Opsi 1: Instal integrasi Shopify App Store khusus

Menambahkan announcement bar Shopify ke toko Anda dengan aplikasi banner atau popup pihak ketiga memang efektif, tetapi memiliki kekurangan. Kita akan membahasnya nanti.

Berikut cara menyiapkannya: 

1. Buka Shopify App Store dan cari aplikasi banner atau popup. Saya memilih Essential Announcement Bar, tetapi Anda bisa memilih aplikasi apa pun yang Anda sukai. 

Pencarian "banner" di Shopify App Store

2. Klik Install. 

Halaman Essential Announcement Bar di Shopify App Store

3. Ikuti panduan orientasi atau penyiapan yang tersedia agar Anda memahami dasar-dasar plug-in tersebut. 

Opsi menu aplikasi Essential Announcer di Shopify App Store

4. Konfigurasikan banner atau popup Anda di dalam aplikasi. Anda dapat menyesuaikan teks, desain, penempatan, dan fitur lainnya. Setelah selesai, klik Publish.

Penyesuaian announcement bar Essential Announcer di Shopify App Store

Announcement bar atau popup tersebut kini akan tampil di toko Anda. Sejauh ini, semuanya berjalan lancar. 

Namun, setiap aplikasi yang Anda instal untuk toko Shopify akan menambahkan CSS dan JavaScript-nya sendiri ke storefront Anda. Hal ini dapat memengaruhi Core Web Vitals, membuat situs berjalan lebih lambat, menyebabkan lag saat proses checkout, dan memengaruhi peringkat SEO Anda. Menambahkan satu aplikasi jarang menjadi masalah, tetapi menambahkan puluhan aplikasi dapat berdampak nyata. Jika Anda bisa melakukan sesuatu tanpa menginstal aplikasi, Anda punya lebih banyak ruang untuk menginstal aplikasi yang benar-benar diperlukan. 

Selain itu, aplikasi pihak ketiga di Shopify sering kali memerlukan langganan berbayar. Versi gratisnya biasanya memiliki fitur terbatas, hanya berlaku untuk 1.500 tayangan pertama per bulan, menyertakan watermark, atau kurang efektif. Jika Anda menginginkan fitur lanjutan atau sekadar banner yang bersih tanpa branding dan mampu menangani lonjakan trafik di musim liburan, Anda biasanya harus membayar biaya langganan bulanan. 

Jika Anda ingin memastikan banner berfungsi sesuai kebutuhan dan terlihat oleh semua pelanggan tanpa membayar biaya bulanan, ada opsi yang lebih baik. 

Opsi 2: Tambahkan widget banner interaktif gratis (disarankan)

Jika Anda menginginkan banner dinamis dengan konversi tinggi yang dilengkapi konten multimedia, kupon, formulir, dan penghitung waktu mundur, tanpa harus membayar langganan bulanan, memperlambat situs, atau mengkhawatirkan Core Web Vitals, pilihan paling cerdas adalah menggunakan embed hosting yang andal seperti Widget Banner Jotform. Semua proses berat berlangsung di luar toko Shopify Anda, sehingga Anda mendapatkan banner yang mulus dan responsif tanpa kekurangan yang biasanya muncul pada aplikasi pihak ketiga yang diinstal. Ini adalah widget banner gratis terbaik untuk Shopify. 

Berikut cara menyiapkannya:

1. Buka Widget Banner Jotform dan masuk ke akun Jotform Anda. Jika belum punya akun, Anda dapat mendaftar secara gratis.

Halaman landing Widget Banner di Jotform Website Widgets

2. Tambahkan badge, judul, dan deskripsi ke banner Anda. Anda dapat menjadikan seluruh banner dapat diklik dan menambahkan fitur seperti tombol CTA, penghitung waktu mundur, kupon, dan formulir pengumpulan email. 

Widget Banner di Jotform Website Widget Builder

3. Gunakan tab Style untuk menyesuaikan tampilan banner Anda. Anda dapat mengatur font kustom, menggunakan CSS kustom, dan menonaktifkan branding Jotform.

Tab Style pada penyesuaian Widget Banner di Jotform Website Widget Builder

4. Gunakan tab Layout untuk mengatur tata letak elemen pada banner Anda. Anda juga dapat menentukan apakah banner tampil di desktop, perangkat seluler, atau keduanya. 

Tab Layout pada Widget Banner di Jotform Website Widget Builder

5. Buka tab Settings, tempat Anda dapat memberi judul pada banner. Anda juga dapat mengaktifkan atau menonaktifkannya, yang berguna jika Anda ingin menyiapkan banner promo hari raya jauh-jauh hari. 

Tab Settings di Jotform Website Widget Builder

6. Buka Publish, lalu klik Copy Code untuk menyalin kode embed banner Anda. 

Tab Publish di Jotform Website Widget Builder

7. Kembali ke Shopify. Pilih Online Store di sidebar, lalu pilih Edit Theme. 

Tombol "Edit theme" di Shopify Store Builder

8. Klik Add Section, lalu pilih Custom Liquid. 

Menu "Add section" dengan blok "Custom Liquid" di Theme Editor Shopify Store Builder

9. Tempel kode embed ke kotak Custom Liquid. Setelah itu, Anda dapat menempatkan banner pengumuman di posisi mana pun yang Anda inginkan dan mengatur tampilannya. 

Kotak kode embed pada blok "Custom Liquid" di menu "Add section" Theme Editor Shopify Store Builder

10. Setelah selesai, klik Save, dan banner Anda akan tayang di situs Anda. 

Keunggulan terbesar Widget Banner Jotform adalah Anda mendapatkan kendali visual yang tak tertandingi atas banner tanpa memerlukan langganan premium atau keterampilan coding. Dengan editor yang mudah digunakan, Anda dapat menyesuaikan gambar latar belakang banner atau bahkan menyematkan video YouTube atau Vimeo. Anda juga dapat menambahkan tombol CTA, penghitung waktu mundur, atau formulir pendaftaran email, semuanya tanpa biaya.

Untuk memasang banner kustom di Shopify, cukup salin dan tempel kode embed ke Shopify. Karena Jotform membuat banner di luar server Anda, banner tersebut tidak akan bentrok dengan gaya situs global Shopify atau memengaruhi kecepatan muat halaman Anda. Anda mendapatkan banner yang andal dan membuat kampanye Anda berjalan lancar. 

Tingkatkan performa toko Shopify Anda dengan widget serverless yang cerdas

Direktori Jotform Website Widgets menawarkan beragam widget situs web gratis yang bermanfaat, termasuk Widget Banner Jotform. Dengan widget Jotform, widget feed Instagram dapat menampilkan produk Anda saat digunakan, testimoni dapat menonjolkan betapa populernya produk Anda, notifikasi penjualan dapat menyorot setiap penjualan, dan panduan ukuran dapat membantu pelanggan menemukan produk dengan ukuran yang pas. Masih banyak alat gratis lainnya yang dapat memaksimalkan konversi add-to-cart sekaligus menjaga toko Anda tetap cepat dimuat dan ringan.

Dengan mengurangi sebagian kerumitan dalam berjualan di Shopify, Jotform Website Widgets memungkinkan Anda memfokuskan waktu dan anggaran untuk mencari produk unggulan, menjalankan pemasaran online, dan membangun toko e-commerce yang sukses. Anda tidak perlu membayar hanya untuk banner sederhana di halaman produk. 

Jika Anda ingin memanfaatkan Shopify lebih jauh, lihat integrasi Jotform + Shopify selengkapnya. Anda dapat menggunakannya untuk menambahkan formulir ke toko Shopify Anda, menerima pembayaran, dan banyak lagi.

Artikel ini ditujukan bagi pemilik toko Shopify, dropshipper, dan manajer e-commerce yang ingin menyematkan banner promosi interaktif dengan penghitung waktu mundur atau formulir pengumpulan prospek tanpa bergantung pada blok bawaan yang sederhana atau menginstal aplikasi yang membebani situs.

Kirim Komentar:

Jotform Avatar
Situs ini dilindungi oleh reCAPTCHA dan tunduk pada Kebijakan Privasi serta Ketentuan Layanan Google.

Podo Comment Jadilah yang pertama berkomentar.