Tutorials

Google Maps in Shopify einbinden [2025 Easy Guide]

Melden

Hier ist ein aktueller und leicht verständlicher Guide für das Jahr 2025, wie du Google Maps in deinen Shopify-Store integrierst.

Eine Google Maps Karte auf deiner „Über uns“- oder „Kontakt“-Seite schafft Vertrauen und hilft Kunden, dein physisches Geschäft schneller zu finden. In diesem Guide zeige ich dir die drei einfachsten Wege – von komplett kostenlos bis hin zu Profi-Lösungen.

Methode 1: Die klassische Einbettung (Kostenlos & Schnell)

Dies ist die einfachste Methode, für die du keine Programmierkenntnisse und keinen API-Schlüssel benötigst.

Schritt 1: Den Code bei Google Maps generieren

  1. Öffne Google Maps.
  2. Suche nach deinem Firmennamen oder deiner Adresse.
  3. Klicke auf den Button „Teilen“.
  4. Wähle den Reiter „Karten einbetten“.
  5. Wähle die Größe (Klein, Mittel, Groß oder Benutzerdefiniert).
  6. Klicke auf „HTML kopieren“.

Schritt 2: Den Code in Shopify einfügen

Du hast hier zwei Möglichkeiten, je nachdem, wo die Karte erscheinen soll:

A) Auf einer normalen Inhaltsseite (z. B. Kontaktseite):

  1. Gehe in deinem Shopify-Admin zu Onlineshop > Seiten.
  2. Wähle die Seite aus oder erstelle eine neue.
  3. Klicke im Texteditor auf das Symbol „<>“ (HTML anzeigen).
  4. Füge den kopierten Code an der gewünschten Stelle ein.
  5. Speichern – fertig!

B) Über den Theme-Editor (Startseite oder Vorlagen):

  1. Gehe zu Onlineshop > Themes > Anpassen.
  2. Klicke in der Seitenleiste auf „Abschnitt hinzufügen“.
  3. Suche nach „Custom Liquid“ oder „HTML“.
  4. Füge den Code in das Textfeld ein.

Methode 2: Die integrierte Theme-Funktion (Best Practice 2025)

Die meisten modernen Shopify-Themes (Online Store 2.0) haben bereits einen eigenen „Map“-Abschnitt.

  1. Gehe zu Onlineshop > Themes > Anpassen.
  2. Klicke auf „Abschnitt hinzufügen“ und suche nach „Karte“ (Map).
  3. Das Problem: Shopify verlangt hier oft einen Google Maps API-Schlüssel.

So erhältst du den API-Schlüssel (falls benötigt):

  1. Gehe zur Google Cloud Console.
  2. Erstelle ein Projekt und aktiviere die „Maps JavaScript API“.
  3. Erstelle unter „Anmeldedaten“ einen API-Key.
  4. Wichtig: Du musst eine Kreditkarte hinterlegen, obwohl die Nutzung bis zu einem gewissen Limit (meist 200$ Guthaben pro Monat geschenkt) kostenlos ist.
  5. Kopiere den Key in die Shopify-Theme-Einstellungen unter „Map“.

Methode 3: Nutzung von Shopify Apps (Für Store-Locator)

Wenn du mehrere Standorte hast oder eine besonders stylische Karte möchtest, sind Apps die beste Wahl.

Empfehlenswerte Apps 2025:

  • Stockist Store Locator: Profi-Lösung für viele Standorte.
  • Elfsight Google Maps: Sehr einfach per Drag-and-Drop zu gestalten ohne API-Stress.
  • Closeby: Modernes Design und sehr schnell ladend.

Vorgehensweise:

  1. App im Shopify App Store installieren.
  2. Standorte eingeben.
  3. Die App generiert meist automatisch einen Block, den du im Theme-Editor einfach hinzufügen kannst.

Profi-Tipps für 2025

  • Mobile First: Achte darauf, dass die Karte auf dem Smartphone nicht die ganze Breite einnimmt, sodass man nicht mehr daran vorbeiscrollen kann (Stichwort: „Pointer-Events“ deaktivieren).
  • Datenschutz (DSGVO): In Deutschland/EU ist das direkte Laden von Google Maps kritisch. Nutze am besten ein Consent-Tool (wie Usercentrics oder Pandectes), das die Karte erst lädt, wenn der Nutzer zustimmt.
  • Ladezeit: Eine eingebettete Karte verlangsamt die Seite minimal. Nutze sie daher nur dort, wo sie wirklich Sinn ergibt (z. B. Kontaktseite statt Startseite).

Zusammenfassung: Welche Methode wählen?

  • Für Anfänger: Methode 1 (HTML kopieren) – kostet nichts und dauert 2 Minuten.
  • Für Design-Liebhaber: Methode 2 (Theme-Sektion) – sieht cleaner aus, braucht aber API-Key.
  • Für Filialisten: Methode 3 (Apps) – bietet Filterfunktionen für Kunden.
0