Tutorials

Google Maps zu Shopify hinzufügen: Die ultimative Anleitung [2025 Easy Guide]

Melden

Hier ist ein aktuelles Tutorial für 2025, wie du eine Google Map professionell in deinen Shopify-Store integrierst – sowohl für die Nutzung der integrierten Sektionen als auch für die schnelle Lösung per Embed-Code.

Eine Google Map auf deiner "Kontakt"-Seite oder im Footer schafft Vertrauen und hilft Kunden, dein physisches Geschäft zu finden. In dieser Anleitung lernst du die zwei gängigsten Methoden.

Methode 1: Die professionelle Methode (Mit Google API Key)

Empfohlen für: Themes, die eine integrierte "Map"-Sektion haben (wie Dawn oder Premium-Themes).

Schritt 1: Google Maps API Key erstellen

Da Google für die Nutzung seiner Karten eine Schnittstelle (API) verlangt, musst du zuerst einen Schlüssel generieren:

  1. Gehe zur Google Cloud Console.
  2. Erstelle ein neues Projekt (z.B. "Shopify Map").
  3. Suche im Dashboard nach "Maps JavaScript API" und klicke auf Aktivieren.
  4. Gehe links auf den Reiter "Anmeldedaten" (Credentials).
  5. Klicke auf "+ Anmeldedaten erstellen" -> API-Schlüssel.
  6. Wichtig: Kopiere diesen Schlüssel. Hinweis: Du musst ein Rechnungskonto bei Google hinterlegen, aber für normale Website-Besuche ist das Kontingent meist kostenlos (Free Tier).

Schritt 2: API-Key in Shopify hinterlegen

  1. Logge dich in dein Shopify-Admin ein.
  2. Gehe zu Onlineshop > Themes.
  3. Klicke bei deinem aktuellen Theme auf Anpassen (Customize).
  4. Navigiere zu Theme-Einstellungen (Zahnrad-Icon).
  5. Suche nach einem Feld namens Google Maps oder Services.
  6. Füge deinen API-Key dort ein und klicke auf Speichern.

Schritt 3: Die Sektion hinzufügen

  1. Gehe im Theme-Editor auf die Seite, auf der die Karte erscheinen soll (z. B. Startseite oder Kontaktseite).
  2. Klicke links auf Abschnitt hinzufügen (Add Section).
  3. Suche nach Karte (Map).
  4. Gib deine Adresse ein und wähle den Zoom-Faktor. Fertig!

Methode 2: Die schnelle & kostenlose Methode (HTML-Embed)

Empfohlen für: Alle, die keinen API-Key erstellen wollen oder ein Theme nutzen, das keine Map-Sektion hat.

Schritt 1: HTML-Code von Google Maps holen

  1. Öffne Google Maps.
  2. Gib deine Geschäftsadresse ein.
  3. Klicke auf den Button Teilen (Share).
  4. Wähle den Reiter Karten einbetten (Embed a map).
  5. Wähle die Größe (Mittel oder Groß) und klicke auf HTML kopieren.

Schritt 2: In Shopify einbauen

  1. Gehe in Shopify zu Onlineshop > Themes > Anpassen.
  2. Wähle die Seite aus, auf der die Karte erscheinen soll.
  3. Klicke auf Abschnitt hinzufügen und wähle Custom Liquid (oder "Benutzerdefiniertes HTML").
  4. Füge den kopierten Code in das Textfeld ein.
  5. Pro-Tipp für Responsive Design: Ändere im Code den Wert width="600" zu width="100%". So passt sich die Karte automatisch der Bildschirmbreite an.

Methode 3: Apps nutzen (Für Fortgeschrittene)

Wenn du spezielle Funktionen wie Store-Locator (Suche nach Filialen in der Nähe) benötigst, solltest du eine App aus dem Shopify App Store nutzen.

  • Empfehlungen: Stockist Store Locator oder Closeby.
  • Vorteil: Kunden können ihre Postleitzahl eingeben, um den nächsten Standort zu finden.

Fehlerbehebung (Troubleshooting)

  • "For development purposes only": Wenn diese Meldung auf der Karte erscheint, ist dein Google API-Key nicht korrekt eingerichtet oder du hast kein Rechnungskonto in der Google Cloud hinterlegt.
  • Karte wird nicht geladen: Überprüfe, ob du die "Maps JavaScript API" wirklich aktiviert hast und nicht nur den Schlüssel erstellt hast.
  • Ladezeit: Google Maps können die Website etwas verlangsamen. Nutze die Karte daher nur dort, wo sie wirklich nötig ist (z.B. Impressum oder Kontakt).

Fazit 2025

Für die meisten Shopify-Nutzer ist Methode 2 (HTML-Embed) die schnellste und stressfreieste Lösung, da sie völlig kostenlos ist und keine komplizierte API-Einrichtung erfordert. Wenn du jedoch ein hochwertiges Design-Theme nutzt, sieht Methode 1 meist sauberer aus.

Viel Erfolg bei der Einrichtung!

0