Cara membuat tabel harga responsif di Squarespace tanpa custom CSS

Tabel harga memudahkan pelanggan Anda untuk melihat apa yang mereka dapatkan dari uang yang dikeluarkan. Hal ini penting baik saat Anda menjual paket SaaS, paket agensi, keanggotaan, maupun langganan. Bahkan, dalam studi Zuora/Harris Poll tahun 2024, 80 persen orang dewasa di AS menyatakan bahwa fleksibilitas dalam cara mereka membeli dan membayar produk berlangganan adalah hal yang “penting,” “sangat penting,” atau “mutlak diperlukan.”

Namun, Squarespace tidak menyediakan blok bawaan untuk tabel harga konvensional dengan baris dan kolom. Anda bisa membuatnya sendiri menggunakan teks, tombol, dan Fluid Engine, tetapi Anda harus melakukannya secara terpisah untuk tampilan desktop dan mobile. 

Atau, jika mengatur tiga kartu harga secara manual di dua ukuran layar berbeda bukan cara yang ingin Anda habiskan sore ini, izinkan saya menunjukkan cara yang lebih mudah.

Opsi 1: Membuat tabel harga menggunakan blok tata letak bawaan Squarespace

Squarespace sudah memiliki blok Pricing Plan, jadi tergantung pada apa yang Anda jual, Anda mungkin tidak perlu menyusun tabel dari awal. Blok ini berfungsi dengan paket harga untuk keanggotaan dan konten terbatas, termasuk Member Sites, kursus, video, dan blog berbayar. 

Anda dapat menawarkan akses gratis, sekali bayar, cicilan, atau berlangganan, serta menempatkan beberapa blok paket secara bersamaan untuk perbandingan.

Jika itu sesuai dengan apa yang Anda jual, berikut cara pengaturannya:

1. Buat paket harga Anda: Dari menu Products, buat konten atau keanggotaan yang ingin Anda jual, lalu tambahkan harga dan aturan aksesnya. Anda juga dapat membuat paket yang menggabungkan beberapa konten yang memenuhi syarat.
2. Tambahkan blok Pricing Plan: Edit halaman Anda, klik Add block (+), pilih Pricing Plan, dan pilih paket yang telah Anda buat.
3. Atur tampilan paket: Di bagian Design, pilih apakah ingin menampilkan judul, deskripsi, harga, manfaat, dan tombol. Tambahkan lebih banyak blok jika Anda ingin beberapa paket ditampilkan berdampingan.

Namun, kendalanya adalah blok Pricing Plan Squarespace terikat pada keanggotaan dan konten terbatasnya. Blok ini tidak bisa digunakan untuk tabel harga yang membandingkan paket SaaS, paket agensi, retainer freelance, atau layanan lainnya.

Untuk kebutuhan tersebut, solusi bawaan yang tersedia adalah Fluid Engine, di mana Anda menyusun setiap paket dari blok teks dan tombol terpisah, lalu menyejajarkannya menjadi kolom. Namun, tampilan desktop dan mobile perlu diatur secara terpisah. 

Dokumentasi resmi Squarespace menyebutkan bahwa blok ini dibuat untuk menjual akses ke konten terbatas, bukan untuk membuat tabel harga perbandingan umum untuk paket, bundel, atau layanan.

Anda juga bisa membeli plug-in tabel harga khusus Squarespace dari pengembang independen. Will Myers, misalnya, menjual salah satunya seharga $25 per situs dengan tiga gaya preset dan dukungan Squarespace 7.1. Namun, saya tidak merekomendasikannya karena plug-in tersebut bukan bagian dari marketplace Extensions resmi Squarespace maupun integrasi resmi Squarespace.

Opsi 2: Tambahkan widget tabel harga gratis yang dapat dikustomisasi

Gunakan Widget Tabel Harga Jotform jika Anda lebih memilih tabel perbandingan daripada beberapa kartu yang disusun berdampingan.

Visual builder-nya memungkinkan Anda menambahkan tabel bulanan dan tahunan; mengedit paket dan fitur; menautkan setiap call to action (CTA) ke tujuan yang diinginkan; serta memilih tata letak kartu, carousel, atau perbandingan lengkap. 

Anda juga bisa menandai paket yang direkomendasikan dengan label Popular; menambahkan diskon dan harga lama; serta mengatur warna, tipografi, tombol, lebar kolom, dan tampilan mobile. 

Mulai dengan cepat dan mudah: 

1. Buat tabel harga Anda: Tambahkan paket, harga, fitur, deskripsi, dan tautan CTA Anda. Anda dapat membuat beberapa tabel (misalnya, daftar harga bulanan dan tahunan) dan memungkinkan pengunjung beralih di antara keduanya.
2. Pilih tata letak dan atur tampilannya: Pilih preset seperti Modern Grid, Compact Columns, Classic Comparison, atau Card Carousel, lalu sesuaikan desainnya agar cocok dengan situs Squarespace Anda. 
3. Sematkan di Squarespace: Klik Try It on Your Website for Free, salin kode embed yang dihasilkan, lalu buka halaman Squarespace Anda dan tambahkan blok Code. Tempel kode sebagai HTML, pastikan Display Source dimatikan, lalu simpan dan pratinjau halaman.

Jotform menangani tabel harga sebagai satu embed, sehingga Squarespace hanya perlu menampilkannya. Dan untuk saat ini, tidak ada biaya widget berlangganan: Jotform Website Widgets gratis hingga 2027.

Selagi Anda menjelajahi pustaka widget …

Jangan berhenti di tabel harga saja. Anda dapat menambahkan fitur lainnya dengan Jotform Website Widgets, termasuk

• Widget FAQ untuk pertanyaan seputar harga, penagihan, pembatalan, fitur, dan onboarding
• Widget Google Reviews untuk menampilkan bukti sosial di samping keputusan pembelian, tanpa perlu mengarahkan pengunjung ke Google untuk mencarinya
• Widget Popup untuk pendaftaran newsletter, diskon, demo, pengumuman peluncuran, atau penawaran exit

Dan setelah tabel harga menyelesaikan tugasnya, integrasi Squarespace dari Jotform dapat mengambil alih langkah berikutnya dengan formulir pendaftaran atau pembayaran yang disematkan.