Widget de hartă pentru Shopify
Descarcă un singur fișier, lipește-l în folderul Sections al temei tale, iar „WhatIsMyLocation Map” apare în editorul de teme cu un panou de setări nativ — filiale ca blocuri, selectoare de temă și de marker, un panou de locații cu animații de comutare și pictograme opționale pentru deschiderea în aplicații de hărți. Nicio aplicație de instalat, nicio cheie API, niciun cont de facturare, niciun cookie și nimic nu se încarcă de la Google. Arhiva zip include și o a doua secțiune, pentru widgetul de localizare.
Pe bază de permisiune · Privat · Funcționează în Chrome, Safari, Firefox, Edge
De ce o secțiune de temă e mai bună decât o aplicație Shopify
Majoritatea listărilor de „aplicații de hărți” vor o instalare, permisiuni la datele magazinului tău și o taxă lunară — pentru ceea ce este, în final, un singur iframe. Aceasta este alternativa cinstită: un singur fișier Liquid care stă în propria ta temă. Nu cere permisiuni pentru magazin, nu adaugă scripturi în paginile tale, nu trimite date nimănui și nu costă nimic. Singurele cereri externe pe care le fac vizitatorii tăi sunt iframe-ul de hartă izolat (sandbox) de la whatismylocation.ai și dalele lui OpenStreetMap — fără cookie-uri Google, fără bagajul bannerelor de consimțământ. Iar dacă serviciul ar fi vreodată inaccesibil, iframe-ul eșuează discret, fără să-ți strice pagina. Șterge fișierul secțiunii și nu mai rămâne nicio urmă.
Descarcă whatismylocation-shopify-sections.zip — ambele secțiuni plus un README, câțiva kilobytes. Apoi urmează pașii de instalare de mai jos.
Instalare în aproximativ două minute
Două jumătăți: lipești fișierul o singură dată, apoi îl folosești ca orice secțiune integrată.
Lipește fișierul: administrarea Shopify ▸ Magazin online ▸ Teme ▸ ⋯ ▸ Editare cod. În bara laterală din stânga, la Sections, apasă Adaugă o secțiune nouă, denumește-o whatismylocation-map, șterge conținutul implicit și lipește tot conținutul fișierului whatismylocation-map.liquid — blocul {% schema %} de la final este cel care construiește panoul tău de setări, deci trebuie să vină și el. Salvează.
Folosește-o: deschide editorul de teme (Personalizare), mergi la pagina de contact (sau la orice pagină), apasă Adaugă secțiune și alege WhatIsMyLocation Map. Panoul de setări apare în stânga; până introduci coordonatele, secțiunea afișează un text substitut prietenos care îți spune exact de ce are nevoie.
Ia coordonatele din generatorul de hărți încorporate — scrie adresa, apoi trage pinul pe intrarea ta înainte de a copia. Secțiunea livrează coordonatele tale finale, deci pinul nu mai poate devia niciodată.
Filialele sunt blocuri
Magazinele cu mai multe locații primesc partea cea mai bună: în editorul de teme, fiecare filială este un bloc — apasă Adaugă filială, completează latitudinea, longitudinea, o etichetă și o adresă, apoi reordonează-le prin tragere (până la 10). Harta încadrează automat fiecare filială, pinii sunt numerotați ca să corespundă listei, iar vizitatorii primesc panoul de locații — un acordeon lângă hartă pe desktop, o bandă de carduri glisabile pe telefon, cu indicații pentru fiecare filială și pictograme opționale „Deschide în Google Maps / Apple Maps”. Aspectul panoului (auto, lateral, jos, niciunul) și animația de comutare (fluidă, estompare, vioaie, niciuna — vizitatorii cu mișcare redusă primesc mereu versiunea instantanee) sunt liste derulante în același panou.
Fiecare setare, explicată
| Setare | Ce văd vizitatorii |
|---|---|
| Numele firmei + stilul titlului | Titlul cardului/panoului — implicit aldin; se oferă și cursiv și normal. |
| Liniile de adresă 1–3 + stilul fiecărei linii | Până la trei linii pe cardul suprapus, fiecare opțional aldină sau cursivă. |
| Latitudine / longitudine | Pinul tău. Îl lipești din generator; nu se regeocodează niciodată. |
| Blocuri de filiale | Pini numerotați + panoul de locații (de la 2 filiale în sus). |
| Temă | Aspect deschis, întunecat sau auriu pentru widget. |
| Culoarea markerului | Pini albastru clasic, smarald, roșu, ambră, indigo sau gri-ardezie. |
| Panou + animație | Aspectul panoului de locații și animația de comutare între filiale. |
| Obține indicații / pictograme de hărți | Butonul de indicații plus pictograme-linkuri opționale către Google/Apple Maps, cu mesaje explicative. |
| Înălțime | Înălțimea iframe-ului, 220–800 px. |
| Textul „Powered by” | Dezactivat implicit — bifează pentru a credita serviciul sub hartă. |
Aceeași arhivă include whatismylocation-widget.liquid — widgetul de localizare ca a doua secțiune (temă, mod compact/complet, înălțime), pentru pagini de livrare și localizatoare de magazine.
Depanare
Secțiunea nu apare la Adaugă secțiune. Fișierul trebuie să stea în Sections (nu în Snippets sau Assets), iar textul lipit trebuie să includă tot fișierul — dacă blocul {% schema %} a fost tăiat, Shopify respinge sau ascunde secțiunea. Lipește din nou tot fișierul și salvează.
Eroarea „Invalid schema” la salvare. Un text lipit parțial — cel mai des lipsește o acoladă de închidere, pentru că selecția s-a oprit cu o linie înainte de final. Lipește din nou fișierul complet; nu edita manual schema dacă nu cunoști Liquid.
Harta este gri. Dalele hărții vin de la tile.openstreetmap.org; un ad-blocker agresiv sau o rețea corporativă le poate bloca. Verifică pe un telefon, pe date mobile — clienții tăi aproape sigur o văd bine.
Pinul nu este pe ușa mea. Reconstruiește coordonatele în generator, trage pinul pe intrarea ta și lipește valorile noi în setările secțiunii.
Modificările nu apar în magazinul live. Ai editat o temă ciornă sau nepublicată — fă modificarea în tema publicată (sau publică tema pe care ai editat-o). Widgetul în sine nu are nimic de păstrat în cache.
Pas cu pas
- Descarcă whatismylocation-shopify-sections.zip (link mai jos) și dezarhivează-l.
- În administrarea Shopify deschide Magazin online ▸ Teme ▸ ⋯ ▸ Editează codul. La Sections apasă “Add a new section”, numește-l whatismylocation-map, și lipește conținutul INTEGRAL al fișierului whatismylocation-map.liquid — inclusiv blocul schema de la final. Salvează.
- Deschide editorul de teme (Personalizează), mergi la pagina care are nevoie de hartă, apasă Adaugă secțiune, și alege “WhatIsMyLocation Map”.
- Lipește coordonatele tale exacte din generatorul de hartă încorporată (scrie adresa, apoi trage marcajul peste intrarea ta înainte de a copia) — sau apasă “Add branch” o dată pentru fiecare locație, pentru o hartă cu mai multe sedii.
- Alege tema, culoarea marcajului, aspectul panoului și animația în panoul de setări, apoi Salvează. Fără aplicație, fără cheie API, nimic de configurat pe server.
Întrebări frecvente
Am nevoie de o aplicație sau de o cheie API?
Pot afișa mai multe filiale pe aceeași hartă?
Vezi în engleză: Map Widget for Shopify · Română