Widget Peta untuk Shopify

Mengapa bagian tema lebih baik daripada aplikasi Shopify

Sebagian besar “aplikasi peta” meminta pemasangan, izin akses data toko Anda, dan biaya bulanan — untuk sesuatu yang pada akhirnya hanya satu iframe. Ini alternatif yang jujur: satu berkas Liquid yang tinggal di tema Anda sendiri. Berkas ini tidak meminta izin toko apa pun, tidak menambahkan skrip ke halaman Anda, tidak mengirim data ke mana pun, dan gratis. Satu-satunya permintaan eksternal dari pengunjung Anda adalah iframe peta yang di-sandbox dari whatismylocation.ai beserta ubin OpenStreetMap-nya — tanpa cookie Google, tanpa beban banner persetujuan. Jika layanannya sedang tidak dapat dijangkau, iframe gagal secara diam-diam tanpa merusak halaman Anda. Hapus berkas bagian itu dan semua jejaknya ikut hilang.

Unduh whatismylocation-shopify-sections.zip — kedua bagian plus sebuah README, hanya beberapa kilobyte. Lalu ikuti langkah pemasangan di bawah.

Pasang dalam sekitar dua menit

Dua tahap: tempel berkasnya sekali, lalu gunakan seperti bagian bawaan lainnya.

Tempel berkasnya: admin Shopify ▸ Online Store ▸ Themes ▸ ⋯ ▸ Edit code. Di bilah sisi kiri, di bawah Sections, klik Add a new section, beri nama whatismylocation-map, hapus isi contohnya, lalu tempel seluruh isi whatismylocation-map.liquid — blok {% schema %} di bagian bawah adalah yang membangun panel pengaturan Anda, jadi harus ikut tersalin. Simpan.

Gunakan: buka editor tema (Customize), buka halaman kontak Anda (atau halaman mana pun), tekan Add section, lalu pilih WhatIsMyLocation Map. Panel pengaturan muncul di sebelah kiri. Selama Anda belum memasukkan koordinat, bagian ini menampilkan teks sementara yang ramah dan memberi tahu persis apa yang dibutuhkan.

Ambil koordinatnya dari pembuat sematan peta — ketik alamat Anda, lalu seret pin ke pintu masuk Anda sebelum menyalin. Bagian ini memakai koordinat final Anda, jadi pin tidak akan pernah bergeser setelahnya.

Cabang adalah blok

Toko dengan banyak lokasi mendapat bagian terbaiknya: di editor tema, setiap cabang adalah sebuah blok — tekan Add branch, isi lintang, bujur, label, dan alamat, lalu susun ulang dengan menyeretnya (hingga 10). Peta menyesuaikan tampilan ke semua cabang secara otomatis, pin diberi nomor sesuai daftar, dan pengunjung mendapat panel lokasi — akordeon di samping peta pada desktop, strip kartu yang bisa digeser di ponsel, lengkap dengan petunjuk arah per cabang dan ikon opsional “Buka di Google Maps / Apple Maps”. Tata letak panel (auto, samping, bawah, tidak ada) dan animasi perpindahan (halus, pudar, lincah, tidak ada — pengunjung dengan pengaturan kurangi-gerak selalu mendapat versi instan) tersedia sebagai menu dropdown di panel yang sama.

Setiap pengaturan, dipetakan

Berkas zip yang sama menyertakan whatismylocation-widget.liquid — widget cari-lokasi-saya sebagai bagian kedua (tema, mode ringkas/penuh, tinggi), untuk halaman pengiriman dan pencari toko.

Pemecahan masalah

Bagiannya tidak muncul di Add section. Berkas harus berada di Sections (bukan Snippets atau Assets) dan tempelannya harus mencakup seluruh berkas — jika blok {% schema %} terpotong, Shopify akan menolak atau menyembunyikan bagian itu. Tempel ulang seluruh berkasnya lalu simpan.

Muncul galat “Invalid schema” saat menyimpan. Tempelannya tidak lengkap — paling sering kurang satu kurung kurawal penutup karena menyeleksi sampai bawah tetapi kurang satu baris. Tempel lagi berkas lengkapnya; jangan mengedit skema secara manual kecuali Anda paham Liquid.

Petanya abu-abu. Ubin peta berasal dari tile.openstreetmap.org; pemblokir iklan yang agresif atau jaringan perusahaan bisa memblokirnya. Coba di ponsel dengan data seluler — pelanggan Anda hampir pasti melihatnya dengan baik.

Pin tidak berada di pintu saya. Buat ulang koordinatnya di pembuat sematan, seret pin ke pintu masuk Anda, lalu tempel nilai barunya ke pengaturan bagian.

Perubahan tidak tampil di toko yang aktif. Anda mengedit tema draf atau yang belum dipublikasikan — lakukan perubahan pada tema yang sudah dipublikasikan (atau publikasikan tema yang Anda edit). Widget-nya sendiri tidak menyimpan cache apa pun.