Kaartwidget voor Shopify

Waarom een thema-sectie beter is dan een Shopify-app

De meeste “kaart-app”-vermeldingen willen een installatie, rechten op je winkelgegevens en een maandbedrag — voor uiteindelijk één iframe. Dit is het eerlijke alternatief: één Liquid-bestand dat in je eigen thema staat. Het vraagt geen rechten op je winkel, voegt geen scripts toe aan je pagina's, stuurt niets naar buiten en kost niets. De enige externe verzoeken van je bezoekers zijn het sandboxed kaart-iframe van whatismylocation.ai en de OpenStreetMap-tiles daarvan — geen Google-cookies, geen gesleep met cookiebanners. En mocht de dienst ooit onbereikbaar zijn, dan mislukt het iframe stil zonder je pagina te breken. Verwijder het sectiebestand en elk spoor is weg.

Download whatismylocation-shopify-sections.zip — beide secties plus een README, een paar kilobytes. Volg daarna de installatiestappen hieronder.

Installeren in ongeveer twee minuten

Twee delen: plak het bestand één keer, gebruik het daarna als elke ingebouwde sectie.

Plak het bestand: Shopify-beheer ▸ Onlinewinkel ▸ Thema's ▸ ⋯ ▸ Code bewerken. Klik in de linkerzijbalk onder Secties op Een nieuwe sectie toevoegen, noem hem whatismylocation-map, verwijder de voorbeeldinhoud en plak de volledige inhoud van whatismylocation-map.liquid. Het {% schema %}-blok onderaan bouwt je instellingenpaneel, dus dat moet mee. Opslaan.

Gebruik het: open de thema-editor (Aanpassen), ga naar je contactpagina (of een andere pagina), druk op Sectie toevoegen en kies WhatIsMyLocation Map. Het instellingenpaneel verschijnt links. Zolang je nog geen coördinaten invult, toont de sectie een vriendelijke placeholder die precies vertelt wat er nodig is.

Haal de coördinaten uit de kaart-insluitgenerator — typ je adres en sleep de pin op je ingang voordat je kopieert. De sectie zet je definitieve coördinaten vast, dus de pin kan daarna nooit meer verschuiven.

Filialen zijn blokken

Winkels met meerdere locaties krijgen het mooiste deel: in de thema-editor is elk filiaal een blok. Druk op Filiaal toevoegen, vul breedtegraad, lengtegraad, een label en een adres in en sleep ze in de gewenste volgorde (tot 10). De kaart past zich automatisch aan alle filialen aan, de pins zijn genummerd zoals de lijst, en bezoekers krijgen het locatiepaneel — een accordeon naast de kaart op desktop, een veegbare kaartenreeks op telefoons, met een routebeschrijving per filiaal en optionele icoontjes “Openen in Google Maps / Apple Maps”. De paneelindeling (auto, zijkant, onderkant, geen) en de wisselanimatie (soepel, fade, levendig, geen — bezoekers met reduce-motion krijgen altijd de directe versie) zijn keuzelijsten in hetzelfde paneel.

Elke instelling in kaart

In dezelfde zip zit whatismylocation-widget.liquid — de vind-mijn-locatie-widget als tweede sectie (thema, compacte of volledige modus, hoogte), voor bezorgpagina's en winkelzoekers.

Problemen oplossen

De sectie verschijnt niet onder Sectie toevoegen. Het bestand moet in Secties staan (niet in Snippets of Assets) en je moet het hele bestand plakken. Is het {% schema %}-blok afgekapt, dan weigert Shopify de sectie of verbergt hij hem. Plak het volledige bestand opnieuw en sla op.

Foutmelding “Invalid schema” bij het opslaan. Een halve plakactie — meestal een ontbrekende sluitende accolade omdat je selectie net voor het einde stopte. Plak het complete bestand nog eens; pas het schema niet handmatig aan tenzij je Liquid kent.

De kaart is grijs. De kaart-tiles komen van tile.openstreetmap.org; een agressieve adblocker of een bedrijfsnetwerk kan ze blokkeren. Controleer het op een telefoon via mobiele data — je klanten zien het vrijwel zeker gewoon goed.

De pin staat niet op mijn deur. Maak de coördinaten opnieuw in de generator, sleep de pin op je ingang en plak de nieuwe waarden in de instellingen van de sectie.

Wijzigingen zijn niet te zien in de live winkel. Je hebt een concept of een niet-gepubliceerd thema bewerkt. Breng de wijziging aan in het gepubliceerde thema, of publiceer het thema dat je bewerkte. De widget zelf heeft niets om te cachen.