Cara Menambahkan Tombol WhatsApp Gratis di Shopify (Tanpa Aplikasi Tambahan)

Jawaban singkat: Buat widget WAButton gratis, salin kode embed-nya, lalu tempel tepat di atas tag penutup </body> di file theme.liquid tema Shopify Anda. Anda tidak perlu aplikasi atau keahlian coding.

Tombol WhatsApp memberi pembeli cara untuk bertanya soal ukuran, waktu pengiriman, atau checkout sebelum membeli, dan bertanya kepada orang, bukan mengisi formulir.

Banyak aplikasi chat Shopify mengenakan biaya bulanan dan menambahkan skripnya sendiri ke toko Anda. Jika Anda hanya perlu tombol, Anda bisa menempelkannya ke tema.

Panduan ini menunjukkan cara menambahkan tombol chat WhatsApp ke tema Shopify Anda, gratis, dan tanpa aplikasi.

---

Bedanya WhatsApp dengan widget live chat

Dengan widget live chat, percakapan biasanya berada di tab browser. Jika pengunjung menutupnya sebelum tim Anda membalas, mereka mungkin tidak akan pernah melihat jawabannya.

Tombol click-to-chat WhatsApp bekerja berbeda dalam dua hal:

1. Percakapan tetap di ponsel mereka: Chat berpindah ke aplikasi WhatsApp milik pembeli. Saat tim Anda membalas, pembeli mendapat notifikasi di ponselnya.
2. Pesan pertama bisa ditulis untuk mereka: Anda dapat mengatur pesan sehingga saat pembeli mengetuk tombol, WhatsApp terbuka dengan nama produk yang sudah terisi (misalnya, "Halo, saya punya pertanyaan tentang [Nama Produk]").

Jika Anda juga berjualan di platform lain, lihat Direktori Integrasi CMS kami untuk panduan langkah demi langkah di WordPress, WooCommerce, Webflow, dan Squarespace.

---

Langkah demi Langkah: Menambahkan Tombol WhatsApp ke Tema Shopify Anda

Anda tidak perlu keahlian coding untuk menambahkan WAButton ke tema Shopify Anda. Snippet ini berdiri sendiri dan tidak memiliki dependensi pustaka.

Langkah 1: Buat Widget Anda di Dashboard WAButton

1. Buat akun WAButton gratis, atau masuk ke dashboard Anda jika sudah punya.
2. Buat widget dan masukkan nomor telepon WhatsApp Business Anda dalam format internasional E.164 (misalnya +14155552671 tanpa spasi, tanda hubung, atau angka nol di awal).
3. Atur pesan terisi otomatis yang menarik, misalnya:

   Halo! Saya sedang melihat-lihat toko Anda dan punya pertanyaan tentang pesanan saya.
   

4. Di editor widget, buka Share & install > Website install lalu salin kode embed Anda. Kode itu sudah berisi ID widget Anda, jadi langsung berfungsi begitu ditempel.

Langkah 2: Buka Editor Kode Tema Shopify Anda

1. Masuk ke dashboard Shopify Admin Anda.
2. Di bilah navigasi kiri, buka Online Store > Themes.
3. Temukan tema aktif Anda saat ini (misalnya Dawn, Sense, Refresh, atau Impact).
4. Klik tombol titik tiga (...) di samping Customize, lalu pilih Edit code.

Langkah 3: Tempel Kode Embed di theme.liquid

1. Di daftar file sebelah kiri, buka folder Layout dan klik theme.liquid.
2. Gulir ke bagian paling bawah file sampai Anda menemukan tag penutup </body>.
3. Tepat sebelum tag </body>, tempel kode embed WAButton Anda:

<!-- WAButton WhatsApp Widget -->
<script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script>
<!-- End WAButton WhatsApp Widget -->

4. Klik Save di sudut kanan atas.

Selesai! Kunjungi URL toko live Anda di desktop dan ponsel untuk menguji widget. Saat diklik, widget akan membuka WhatsApp Web di browser desktop atau menjalankan aplikasi WhatsApp asli di smartphone.

---

Lanjutan: Menambahkan Tombol Formulir Pesanan WhatsApp ke Halaman Produk

Jika Anda menjalankan toko butik, merek pakaian custom, atau katalog grosir, Anda mungkin ingin pelanggan mengirim pesanan langsung lewat WhatsApp daripada melewati checkout standar.

Dengan Generator Formulir Pesanan WhatsApp gratis kami, Anda dapat membuat pertanyaan pesanan terstruktur yang terisi otomatis:

• SKU dan nama produk
• Varian yang dipilih (ukuran, warna, bahan)
• Alamat pengiriman dan kode pos
• Metode pembayaran pilihan (Bayar di Tempat, Transfer Bank, Stripe)

Ini bisa cocok untuk pasar di mana pelanggan Anda sudah terbiasa memesan lewat WhatsApp.

---

Mengapa skrip kecil itu penting

Core Web Vitals mengukur bagaimana halaman dimuat dan seberapa stabil tampilannya, termasuk Largest Contentful Paint (LCP) dan Cumulative Layout Shift (CLS). Google menyarankan untuk menargetkan skor yang baik.

Aplikasi chat pihak ketiga dapat memuat skrip, font, dan stylesheet mereka sendiri di setiap halaman, dan itu menambah beban kerja browser.

WAButton menjaga jejaknya tetap kecil:

• Tanpa dependensi: JavaScript biasa dan ikon SVG.
• Pemuatan asinkron (async): Skrip diunduh secara paralel dan tidak menghalangi gambar serta teks produk Anda untuk dirender.
• Tidak ada pergeseran tata letak dari tombol: Tombol melayang di posisi tetap, sehingga halaman Anda tidak melonjak saat dimuat.

Baca Panduan Integrasi Shopify khusus kami untuk tips konfigurasi lebih lanjut dan untuk mengirim ketukan tombol ke Google Analytics 4 dan Meta Pixel.

---

Pertanyaan yang Sering Diajukan

Bisakah saya menampilkan tombol WhatsApp hanya selama jam kerja?

Ya. Anda dapat mengatur aturan visibilitas terjadwal atau menyesuaikan pesan pergi otomatis dengan Generator Pesan Pergi WhatsApp gratis kami untuk menetapkan ekspektasi saat tim Anda offline.

Apakah ini berfungsi di semua tema Shopify?

Ya. Kode embed adalah HTML5 standar dan berfungsi di semua tema Shopify Online Store 2.0 (Dawn, Refresh, Craft, Studio, Publisher) serta tema lama.

Apakah saya perlu akun WhatsApp Business API?

Tidak. WAButton berfungsi dengan nomor pribadi WhatsApp standar, akun WhatsApp Business App, dan nomor WhatsApp Cloud API resmi.

---

Ingin lebih banyak cara menggunakan WhatsApp di toko Anda? Baca WhatsApp untuk Toko Online atau coba Generator Tautan WhatsApp gratis kami.

---

Sumber

• Memahami Core Web Vitals dan hasil penelusuran Google, Google Search Central
• Cara menggunakan click to chat, Pusat Bantuan WhatsApp