Map widget para sa Shopify

Bakit mas mainam ang theme section kaysa sa Shopify app

Karamihan sa mga listing ng “map app” ay nangangailangan ng install, ng permission sa data ng store mo, at ng buwanang bayad — para sa isang iframe lang naman. Ito ang tapat na alternatibo: isang Liquid file na nakatira sa sarili mong theme. Wala itong hinihinging permission sa store, wala itong idinadagdag na script sa mga page mo, wala itong ipinapadalang data pabalik sa kahit kanino, at wala itong bayad. Ang tanging external request na gagawin ng mga bisita mo ay ang sandboxed map iframe mula sa whatismylocation.ai at ang OpenStreetMap tiles nito — walang Google cookies, walang pasanin na consent banner. Kung sakaling hindi maabot ang service, tahimik na hindi lilitaw ang iframe at hindi masisira ang page mo. I-delete ang section file at wala nang matitirang bakas.

I-download ang whatismylocation-shopify-sections.zip — pareho ang mga section kasama ang README, ilang kilobyte lang. Pagkatapos, sundan ang mga hakbang sa pag-install sa ibaba.

Mag-install sa mga dalawang minuto

Dalawang bahagi: i-paste ang file nang isang beses, pagkatapos gamitin ito tulad ng anumang built-in section.

I-paste ang file: Shopify admin ▸ Online Store ▸ Themes ▸ ⋯ ▸ Edit code. Sa kaliwang sidebar sa ilalim ng Sections i-click ang Add a new section, pangalanan itong whatismylocation-map, i-delete ang placeholder na nilalaman, at i-paste ang buong nilalaman ng whatismylocation-map.liquid — ang {% schema %} block sa ibaba ang gumagawa ng settings panel mo, kaya kailangang kasama ito. I-save.

Gamitin ito: buksan ang theme editor (Customize), pumunta sa contact page mo (o kahit anong page), pindutin ang Add section, at piliin ang WhatIsMyLocation Map. Lilitaw ang settings panel sa kaliwa. Hangga't wala kang inilalagay na coordinates, magpapakita ang section ng magiliw na placeholder na nagsasabi kung ano ang kailangan nito.

Kunin ang coordinates mula sa map-embed builder — i-type ang address mo, pagkatapos i-drag ang pin papunta sa pasukan mo bago kopyahin. Ang huling coordinates mo ang ipinapadala ng section, kaya hindi na maaaring maglihis ang pin pagkatapos.

Ang mga branch ay blocks

Ang mga store na may maraming lokasyon ang pinakamakikinabang: sa theme editor, bawat branch ay isang block — pindutin ang Add branch, punan ang latitude, longitude, isang label at isang address, at baguhin ang pagkakasunod-sunod sa pag-drag (hanggang 10). Automatic na iaakma ng mapa ang lahat ng branch, may numero ang mga pin para tumugma sa listahan, at nakukuha ng mga bisita ang locations panel — isang accordion sa tabi ng mapa sa desktop, isang swipeable card strip sa telepono, na may direksyon para sa bawat branch at opsyonal na mga icon na “Open in Google Maps / Apple Maps”. Ang layout ng panel (auto, side, bottom, none) at ang switch animation (smooth, fade, lively, none — ang mga bisitang may reduce-motion ay laging nakukuha ang instant na bersyon) ay mga dropdown sa parehong panel.

Lahat ng setting, isa-isa

Kasama sa parehong zip ang whatismylocation-widget.liquid — ang find-my-location widget bilang pangalawang section (theme, compact/full mode, taas), para sa mga delivery page at store finder.

Paglutas ng mga problema

Hindi lumalabas ang section sa Add section. Kailangang nasa Sections ang file (hindi sa Snippets o Assets) at kailangang kumpleto ang pinaste — kung nagupit ang {% schema %} block, itatanggi o itatago ng Shopify ang section. I-paste muli ang buong file at i-save.

“Invalid schema” error sa pag-save. Hindi kumpleto ang pinaste — kadalasan nawawala ang pansarang brace dahil isang linya ang naiwan sa pagpili hanggang ibaba. I-paste muli ang buong file; huwag manu-manong i-edit ang schema kung hindi mo alam ang Liquid.

Kulay abo ang mapa. Galing sa tile.openstreetmap.org ang mga map tile; maaaring i-block ito ng agresibong ad-blocker o ng corporate network. Tingnan sa telepono na gumagamit ng mobile data — halos tiyak na maayos ang nakikita ng mga customer mo.

Wala sa pintuan ko ang pin. Gawin muli ang coordinates sa builder, i-drag ang pin papunta sa pasukan mo, at i-paste ang mga bagong halaga sa settings ng section.

Hindi lumalabas ang mga edit sa live store. Isang draft o hindi na-publish na theme ang ini-edit mo — gawin ang pagbabago sa published theme (o i-publish ang ini-edit mo). Ang widget mismo ay wala namang ini-cache.