Buy Button Shopify: Cara Mengubah Situs Web Apa Pun Menjadi Toko Online

Anda dapat menggunakan Shopify untuk berjualan online, bahkan jika tidak ingin membuat toko online lengkap.

Buy Button memungkinkan Anda memonetisasi halaman web apa pun baik itu blog, portofolio, atau akun media sosial.

Di bawah ini, temukan cara menyematkan Buy Button ke berbagai jenis situs web untuk memberikan pengunjung opsi membeli produk.

Apa itu Buy Button?

Buy Button memungkinkan Anda membuat dan menyematkan opsi pembayaran di berbagai jenis situs web, sehingga pelanggan dapat membeli produk langsung dari halaman yang sedang mereka kunjungi.

Shopify menghasilkan kode yang diperlukan untuk menyematkan dan menampilkan produk, membuat tombol ini mudah diatur, ramah seluler, dan aman.

Anda dapat menyesuaikan skema warna, detail produk, dan gambar produk yang ditampilkan dengan Buy Button agar sesuai dengan gaya halaman Anda.

Pelajari lebih lanjut tentang Shopify Buy Button.

Memulai dengan Buy Button: 3 langkah

1. Tambahkan saluran penjualan Buy Button ke toko Shopify Anda
2. Buat Buy Button
3. Tambahkan kode sematan Buy Button ke HTML situs web Anda

1. Tambahkan saluran penjualan Buy Button ke toko Shopify Anda

Mulailah dengan masuk ke Shopify. Jika Anda melihat Buy Button tercantum di bawah saluran penjualan Anda di menu sisi kiri, maka Anda dapat langsung ke langkah 2.

Di desktop

1. Buka halaman saluran penjualan Buy Button di Shopify App Store.

2. Instal aplikasi

3. Sematkan aplikasi ke navigasi admin Anda (opsional)

Jika tidak menyematkan Buy Button, Anda dapat menemukannya lagi dengan mengklik "Sales channels" lalu "Buy Button" di bawah saluran yang terinstal.

Di perangkat seluler

• Buka aplikasi Shopify di perangkat seluler Anda dan pilih "Store" dari menu bawah.
• Di samping "Sales channels", pilih "Add channel" di iPhone atau "+" di Android.
• Pilih "Buy Button", lalu ketuk "Add Buy Button".

2. Buat Buy Button

Setelah menambahkan saluran penjualan Buy Button, Anda siap membuat Buy Button.

Di tab Buy Button, klik "Create a Buy Button".

Anda dapat membuat Buy Button untuk satu produk atau seluruh koleksi produk. Di layar berikutnya akan diminta untuk memilih opsi mana yang diinginkan.

Pilih opsi, lalu pilih produk mana yang ingin Anda buatkan Buy Button-nya.

Setelah membuat pilihan, Anda akan dibawa ke editor Buy Button, di mana tampilan Buy Button dapat disesuaikan.

Cara menyesuaikan Buy Button Anda

Di editor Buy Button akan terlihat sejumlah opsi yang berada di sisi kiri untuk menyesuaikan tampilan dan nuansa Buy Button. Di sebelah kanan akan terlihat pratinjau tampilan Buy Button.

Sesuaikan opsi di sebelah kiri sesuai keinginan. Pratinjau akan diperbarui secara otomatis, sehingga tampilan Buy Button dapat terlihat saat menyesuaikannya. Anda juga dapat melihat bagaimana Buy Button akan muncul di layar desktop dan seluler dengan mengklik ikon desktop atau seluler yang berada di tengah bagian atas editor.

Berikut adalah rincian opsi yang dapat Anda sesuaikan:

• Product variant: Pilih varian produk mana yang ingin dapat dibeli melalui Buy Button. Semua varian akan dipilih secara default.
• Layout: Pilih antara "Basic", "Classic", dan "Full view". Di sebelah kanan akan terlihat pratinjau setiap tata letak saat memilihnya dari menu drop-down "Layout".
• Action when people click: Pilih antara "Add product to cart", "Direct to pembayaran", atau "Open product details". Opsi "Add product to cart" akan membuat widget keranjang di sisi kanan layar. Opsi "Direct to pembayaran" akan membuat tombol Buy Now yang akan membawa pengguna langsung ke pembayaran (perhatikan bahwa pelanggan tidak akan dapat menambahkan lebih dari satu item ke keranjang mereka menggunakan opsi ini). Opsi "Open product details" akan membuat tombol View Product yang membuka pop-up berisi  informasi produk dan tombol Add to Cart.
• Button style: Di sini Anda dapat menyesuaikan warna, tulisan, ukuran, dan bentuk sudut Buy Button.
• Layout: Menu Layout akan memungkinkan penyesuaian yang lebih detail pada tata letak tombol dibuat. Anda dapat menyesuaikan warna tulisan, teks tombol, dan pengaturan tipografi.
• Shopping cart: Di sini Anda akan dapat menyesuaikan pengaturan widget keranjang belanja, termasuk teks dan warna. Perhatikan bahwa opsi ini akan berwarna abu-abu jika menggunakan tata letak "Direct to checkout", karena tidak ada widget keranjang.
• Detailed pop-up: Jika memilih "Open product details" di bawah "Action when people click", Anda akan dapat menyesuaikan teks, warna, dan opsi tipografi untuk pop-up di bagian ini.
• Advanced settings: Di sini Anda dapat menyesuaikan bagaimana pembayaran Anda disajikan kepada pengguna Anda. Anda dapat memilih "Open pop-up window" (yang akan membuat pembayaran pop-up yang menutup saat pesanan selesai), atau "Redirect in the same tab" (yang akan mengirim pengguna ke halaman pembayaran Shopify dan mengembalikan mereka ke halaman Anda setelah transaksi selesai).

Ingat bahwa menyesuaikan pengaturan ini tidak akan mengubah Buy Button yang sudah disematkan.

Ketika Anda puas dengan desain, klik tombol "Next" di sudut kanan atas.

3. Tambahkan kode sematan Buy Button ke HTML situs web Anda

Ketika mengklik "Next", kode sematan untuk Buy Button akan dibuat secara otomatis. Klik tombol "Copy Code" jika sudah siap untuk menyematkannya di halaman web.

Kode yang telah disalin dapat ditempelkan ke HTML halaman web mana pun. Ini akan membuat Buy Button dan keranjang yang akan terhubung langsung ke admin Shopify memungkinkan Anda mengelola serta memproses pesanan dari halaman web mana pun di sana.

Proses menambahkan kode sematan bervariasi tergantung pada bagaimana Anda ingin tombol terlihat dan pembuat situs web serta tema mana yang Anda gunakan.

Menambahkan tag script Buy Button

Beberapa pembuat situs web mengharuskan untuk menempelkan tag script secara terpisah di header, sambil menempelkan sisa kode di badan halaman, di mana pun Anda ingin Buy Button muncul.

Untuk melakukan ini, Anda perlu memisahkan elemen script dari elemen div dalam kode sematan Buy Button.

Anda akan melihat elemen div di bagian atas kode. Tampilannya seperti ini:

Elemen script membentuk sisa kode sematan, dimulai dengan script type="text/javascript" dan diakhiri dengan /script.

Salin dan tempelkan elemen script, secara keseluruhan, ke header halaman situs web Anda.

Kemudian, buka editor halaman untuk halaman tempat Anda ingin menambahkan Buy Button. Tempelkan elemen div ke halaman di mana pun Anda ingin Buy Button muncul.

Tambahkan ecommerce ke situs web apa pun dengan Buy Button

Buy Button memungkinkan penjual menemui pelanggan di mana pun mereka berada. Menjual langsung kepada pelanggan tanpa mengirim mereka ke halaman lain mengurangi hambatan dan dapat membantu meningkatkan penjualan.

Untuk blogger, seniman, penulis, desainer, podcaster, influencer, dan siapa pun yang ingin memonetisasi karya mereka, Buy Button adalah cara mudah untuk menggunakan Shopify tanpa membangun situs web baru.