Cara menambahkan tombol khusus ke Shopify

Jika Anda berjualan di Shopify, desain tombol CTA Anda sangatlah penting. Baik mengarah ke halaman promosi, pendaftaran buletin VIP, atau tautan afiliasi, tombol yang menarik perhatian akan lebih sering diklik daripada tombol yang menyatu dengan halaman — dan di sebuah etalase toko, lebih banyak klik berarti lebih banyak penjualan.

Tema Shopify OS 2.0, termasuk Dawn, memiliki blok tombol bawaan, tetapi blok tersebut memberikan sedikit kontrol atas tampilan tombol-tombol itu. Blok ini memungkinkan Anda mengatur label, tautan, dan apakah gayanya solid atau berbingkai, sementara warnanya berasal dari pengaturan tema global Anda. Hal ini menjaga toko Anda tetap konsisten (yang memang menjadi tujuan pengaturan tema), tetapi juga berarti tombol yang dimaksudkan untuk menonjol akan terlihat seperti tombol lainnya di situs Anda.

Untuk mendapatkan tombol mandiri dengan warna, efek hover, atau ikonnya sendiri, ada dua pendekatan yang bisa dilakukan. Anda bisa menambahkan blok Custom Liquid di editor tema Anda dan menulis sendiri HTML dan CSS-nya, atau Anda bisa menggunakan widget hosted gratis yang menangani penataan gaya dan memberikan kode sematan untuk ditempelkan.

Jika Anda menginginkan tombol CTA khusus yang dioptimalkan untuk konversi di toko Shopify Anda tanpa mengedit kode tema atau membayar pengembang, panduan ini membahas cara menambahkan tombol di Shopify menggunakan kedua metode tersebut.

Watch on youtube

How to Add a Custom Button to Shopify

Opsi 1: Gunakan Custom Liquid dan CSS

Cara standar untuk mendapatkan desain tombol unik di etalase Shopify tanpa memasang aplikasi pihak ketiga adalah dengan menulis kodenya sendiri. Editor tema Shopify menyertakan bagian Custom Liquid tempat Anda bisa menambahkan HTML dan CSS Anda sendiri, sehingga Anda bisa mendefinisikan sebuah tombol dan menatanya persis seperti yang Anda inginkan tanpa mengedit berkas tema Anda secara langsung.

Berikut cara menambahkan tombol di Shopify menggunakan Custom Liquid dan CSS:

1. Dari admin Shopify Anda, buka Online Store di menu sisi kiri. Lalu klik ikon pensil di samping Online Store atau klik Edit theme di layar.

2. Di bilah sisi kiri, klik Add section, cari Custom Liquid, dan pilih. Sebuah bidang teks akan muncul di sebelah kanan tempat kode Anda akan ditempatkan.

3. Tambahkan HTML untuk tombol Anda beserta blok <style> yang berisi CSS Anda, lalu klik Save di sudut kanan atas. Perubahan Anda akan muncul di pratinjau saat Anda bekerja.

Satu peringatan saat menggunakan metode ini: Menulis sendiri penataan gaya berarti Anda berisiko membuat kesalahan. Aturan yang ditulis tanpa selektor terbatas (scoped) dapat memengaruhi elemen lain di halaman, dan Custom Liquid yang ditambahkan ke header atau footer Anda akan tampil di setiap halaman toko Anda — sehingga kesalahan kecil dapat berdampak lebih besar daripada sekadar tombol yang sedang Anda tata. Shopify juga menyarankan untuk menggandakan tema Anda sebagai cadangan sebelum mengedit kode, yang mencerminkan bagaimana platform ini memandang risiko tersebut.

Menyewa pengembang mungkin dapat menyelesaikan masalah teknis tetapi menambah biaya yang lebih sulit dibenarkan hanya untuk satu tombol, terutama ketika Anda ingin menguji beberapa versi dan setiap perubahan berarti permintaan lain lagi.

Opsi 2: Tambahkan widget tombol gratis yang dapat disesuaikan (direkomendasikan)

Ingin kontrol desain tanpa risiko? Widget tombol gratis yang di-hosting adalah alternatif Custom Liquid di Shopify dengan warna, status hover, dan ikonnya sendiri. Anda bisa menyesuaikan tombol di pembuat visual, menyalin kode sematan, dan menempelkannya ke dalam blok Custom Liquid di editor tema Anda.

Widget Tombol dari Jotform menawarkan opsi penataan gaya yang tidak disertakan oleh blok bawaan Shopify. Anda mengatur warna latar belakang, teks, dan hover secara independen, menambahkan ikon sebelum atau sesudah label, serta menyesuaikan radius sudut, tinggi, padding, dan bayangan (drop shadow).

Berikut cara menambahkan tombol di Shopify menggunakan widget tombol dari Jotform: 

1. Di halaman Jotform Workspace Anda, klik Create, pilih Website Widget, cari “Button,” lalu klik Use Widget.

2. Di bawah tab General, pilih tindakan tombol Anda, masukkan informasi yang diminta (email, nomor telepon, tautan URL, dll.), dan tulis label tombol Anda. Tambahkan baris kedua atau teks di sekitarnya jika penawaran Anda memerlukan konteks.

3. Di bawah tab Styles, atur warna Anda, aktifkan ikon dan pilih posisinya, lalu sesuaikan bentuk dan ukurannya. Tab Layout mengontrol apakah tombol bersifat inline atau mengambang, serta apakah tombol tersebut muncul di desktop, seluler, atau keduanya.

4. Klik Publish di bilah navigasi atas, lalu klik Copy Code di bagian Embed pada menu kiri.

Anda juga bisa mengeklik Platforms dan memilih Shopify untuk mendapatkan instruksi penyematan khusus platform.

5. Untuk menyematkan tombol khusus Anda di Shopify, buka editor tema Anda, pilih templat halaman Anda, klik Add section atau Add block, pilih Custom Liquid, tempelkan kode sematan Anda, lalu klik Save di sudut kanan atas. 

Dengan opsi ini, karena Anda menata tombol di Jotform alih-alih langsung di tema situs web Anda, perubahan Anda tetap terpisah dari pengaturan tema global Anda. Menguji warna atau label yang berbeda berarti mengedit widget, bukan mengedit kode tema lagi. Untuk penyiapan lengkap, lihat cara menambahkan tombol ke situs web.

Tingkatkan performa toko Shopify Anda dengan widget cerdas tanpa server

Tombol adalah salah satu dari beberapa fitur yang dapat Anda tambahkan ke situs Anda tanpa menyewa pengembang atau membayar aplikasi bulanan lainnya. Sebagai alternatif ajakan bertindak Shopify, direktori widget situs web gratis dari Jotform memiliki lebih dari 150 opsi, termasuk beberapa yang ditujukan untuk mengatasi celah etalase yang sama seperti tombol.

Sebagai contoh, widget Announcement Bar menempatkan batas gratis ongkos kirim atau tanggal diskon Anda di bagian atas setiap halaman, tempat pembeli melihatnya sebelum mereka melakukan checkout. Widget Buy Button mengarahkan pembeli langsung ke URL produk, keranjang, atau checkout dengan CTA pembelian, yang cocok untuk halaman arahan kampanye atau upsell pasca-pembelian. Dan kategori e-commerce memiliki kartu produk dan tabel harga. Ada juga integrasi Jotform-Shopify yang memungkinkan Anda mengumpulkan informasi pelanggan bersama toko Anda. 

Setiap widget disematkan dengan cara yang sama seperti tombol, sehingga Anda tidak perlu membayar langganan aplikasi lain setiap kali ingin menambahkan fitur sederhana.

Sebagai merek e-commerce, waktu dan anggaran Anda sebaiknya dihabiskan untuk hal-hal seperti mencari produk dan menyempurnakan funnel iklan Anda, bukan menulis Custom Liquid agar satu tombol terlihat berbeda dari yang lain. Widget Tombol dari Jotform memberi Anda CTA yang dapat Anda tata ulang dalam satu menit tanpa menyentuh tema Anda. Cobalah secara gratis hari ini.