Karten-Widget für Shopify

Warum eine Theme-Section besser ist als eine Shopify-App

Die meisten „Karten-Apps“ wollen eine Installation, Zugriff auf deine Shop-Daten und eine monatliche Gebühr — für am Ende nur ein einziges Iframe. Das hier ist die ehrliche Alternative: eine einzelne Liquid-Datei, die in deinem eigenen Theme liegt. Sie fordert keine Shop-Berechtigungen an, fügt deinen Seiten keine Skripte hinzu, funkt nichts nach Hause und kostet nichts. Extern laden deine Besucher nur zwei Dinge: das abgeschottete Karten-Iframe von whatismylocation.ai und dessen OpenStreetMap-Kacheln. Keine Google-Cookies, kein Ballast durch Einwilligungsbanner. Und wäre der Dienst einmal nicht erreichbar, bleibt das Iframe still, ohne deine Seite zu zerstören. Lösch die Section-Datei, und jede Spur ist weg.

whatismylocation-shopify-sections.zip herunterladen — beide Sections plus eine README, ein paar Kilobyte. Danach folgst du den Installationsschritten unten.

In etwa zwei Minuten installiert

Zwei Hälften: Die Datei einmal einfügen, danach nutzt du sie wie jede eingebaute Section.

Datei einfügen: Shopify-Admin ▸ Onlineshop ▸ Themes ▸ ⋯ ▸ Code bearbeiten. Klicke in der linken Seitenleiste unter Sections auf Neue Section hinzufügen, nenne sie whatismylocation-map, lösche den Platzhalter-Inhalt und füge den gesamten Inhalt von whatismylocation-map.liquid ein — der {% schema %}-Block ganz unten baut deinen Einstellungsbereich auf, er muss also mitkommen. Speichern.

Verwenden: Öffne den Theme-Editor (Anpassen), geh zu deiner Kontaktseite (oder einer beliebigen Seite), drücke Section hinzufügen und wähle WhatIsMyLocation Map. Der Einstellungsbereich erscheint links. Solange du keine Koordinaten einträgst, zeigt die Section einen freundlichen Platzhalter, der dir genau sagt, was noch fehlt.

Die Koordinaten holst du dir im Karten-Einbettungs-Builder — tippe deine Adresse ein und zieh den Pin auf deinen Eingang, bevor du sie kopierst. Die Section liefert deine endgültigen Koordinaten aus, der Pin kann danach also nicht mehr verrutschen.

Filialen sind Blöcke

Für Shops mit mehreren Standorten kommt der beste Teil: Im Theme-Editor ist jede Filiale ein Block — drücke Filiale hinzufügen, trage Breitengrad, Längengrad, eine Bezeichnung und eine Adresse ein und sortiere sie per Ziehen um (bis zu 10). Die Karte passt sich automatisch allen Filialen an, die Pins sind passend zur Liste nummeriert, und Besucher bekommen das Standort-Panel — am Desktop ein Akkordeon neben der Karte, auf dem Handy ein wischbarer Streifen aus Infokarten, mit Route je Filiale und optionalen Icons „In Google Maps / Apple Maps öffnen“. Panel-Layout (auto, seitlich, unten, keins) und die Wechsel-Animation (weich, Überblenden, lebhaft, keine — Besucher mit reduzierter Bewegung bekommen immer die sofortige Variante) sind Dropdowns im selben Bereich.

Jede Einstellung im Überblick

Dieselbe ZIP enthält whatismylocation-widget.liquid — das Standort-Widget als zweite Section (Theme, kompakter oder voller Modus, Höhe), für Lieferseiten und Filialfinder.

Fehlerbehebung

Die Section erscheint nicht unter „Section hinzufügen“. Die Datei muss unter Sections liegen (nicht unter Snippets oder Assets), und eingefügt sein muss die ganze Datei — fehlt der {% schema %}-Block, lehnt Shopify die Section ab oder blendet sie aus. Füge die komplette Datei erneut ein und speichere.

Fehler „Invalid schema“ beim Speichern. Ein unvollständiges Einfügen — meist fehlt eine schließende Klammer, weil bis kurz vor das Dateiende markiert wurde. Füge die vollständige Datei noch einmal ein. Bearbeite das Schema nicht von Hand, außer du kennst dich mit Liquid aus.

Die Karte ist grau. Die Kartenkacheln kommen von tile.openstreetmap.org; ein aggressiver Werbeblocker oder ein Firmennetz kann sie blockieren. Prüf es auf dem Handy im Mobilfunknetz — deine Kunden sehen sie mit ziemlicher Sicherheit ganz normal.

Der Pin sitzt nicht an meiner Tür. Erstelle die Koordinaten im Builder neu, zieh den Pin auf deinen Eingang und füge die neuen Werte in die Section-Einstellungen ein.

Änderungen erscheinen nicht im Live-Shop. Du hast einen Entwurf oder ein unveröffentlichtes Theme bearbeitet — nimm die Änderung im veröffentlichten Theme vor (oder veröffentliche das bearbeitete). Das Widget selbst hat nichts zwischenzuspeichern.