Shopify kann Iframes in Feldern und Abschnitten ausgeben, die HTML oder benutzerdefiniertes Liquid unterstützen. Welcher Weg passt, hängt vom Theme ab; derselbe responsive Code funktioniert auf Seiten, in Vorlagen und Produktbeschreibungen.
Schritt 1
Google-Maps-Code für Shopify erstellen
- Öffne den Kartengenerator.
- Suche die Geschäftsadresse oder gib Koordinaten ein.
- Wähle Zoomstufe und Kartentyp.
- Stelle Volle Breite (100 %) ein und behalte die responsive Option bei.
- Klicke auf Code erstellen und kopiere den Iframe.
Schritt 2
Karte in eine Shopify-Seite einfügen
Diese Methode eignet sich für Kontaktseiten, Ladeninformationen, Abholung vor Ort und Anfahrtsbeschreibungen.
- Öffne in Shopify Admin Onlineshop → Seiten.
- Öffne oder erstelle die gewünschte Seite.
- Klicke im Editor auf <>, um den HTML-Quelltext anzuzeigen.
- Füge den Iframe an der gewünschten Stelle ein.
- Speichere und kontrolliere die öffentliche Seite.
Schritt 3
Karte über den Shopify-Theme-Editor einfügen
Die verfügbaren Abschnitte unterscheiden sich je nach Theme. Viele moderne Themes enthalten einen Abschnitt für benutzerdefiniertes Liquid.
- Gehe zu Onlineshop → Themes und klicke auf Anpassen.
- Öffne die gewünschte Start-, Kontakt- oder Seitenvorlage.
- Wähle Abschnitt hinzufügen und suche nach benutzerdefiniertem Liquid, HTML, Code oder Einbettung.
- Füge den Iframe ein und prüfe Desktop- sowie Mobilvorschau.
- Klicke auf Speichern.
Google Map auf einer Shopify-Produktseite anzeigen
Eine Karte in der Produktbeschreibung ist hilfreich für Abholorte, Veranstaltungen, Unterkünfte oder Dienstleistungen an einem festen Standort.
- Öffne Produkte in Shopify Admin.
- Wähle das gewünschte Produkt.
- Öffne mit <> die HTML-Ansicht der Beschreibung.
- Füge den Iframe ein, speichere und kontrolliere die Produktseite.
Tipps und Fehlerbehebung
- Karte fehlt: Kontrolliere die öffentliche Seite; manche Editor-Vorschauen zeigen Iframes nicht an.
- Theme entfernt den Code: Verwende einen Abschnitt für benutzerdefiniertes Liquid statt Rich Text.
- Karte ist zu breit: Aktiviere den responsiven Modus und vermeide feste Werte außerhalb des Theme-Containers.
- Passende Zoomstufe: Für ein einzelnes Geschäft funktionieren Stufen von 14 bis 16 meist gut.
- Adresse nicht eindeutig: Verwende genaue Koordinaten für die korrekte Markerposition.
Häufige Fragen zu Google Maps und Shopify
Brauche ich eine Shopify-App?
Nein. Du kannst den Iframe in eine Seite oder einen Abschnitt mit HTML beziehungsweise benutzerdefiniertem Liquid einfügen.
Ist ein API-Schlüssel nötig?
Nein, nicht für den mit dieser Methode erzeugten Iframe.
Beeinflusst die Karte die Ladezeit?
Sie lädt externe Ressourcen. Lazy Loading verringert jedoch die anfängliche Belastung.
Kann ich mehrere Geschäfte anzeigen?
Ja. Erstelle in Google My Maps eine öffentliche Karte mit mehreren Markern und füge den Link in den Generator ein.
Karte für deinen Shop erstellen
Erzeuge einen responsiven Shopify-Iframe ohne App und API-Schlüssel.