Tutorial

Eigene JavaScript-Dateien zu Shopify hinzufügen: Der ultimative Guide [2025 Easy Guide]

Melden

Hier ist ein umfassendes Tutorial für das Jahr 2025, wie du eigenes JavaScript zu deinem Shopify-Theme hinzufügst – von der einfachsten Methode bis hin zur Profi-Lösung.

Egal, ob du ein Tracking-Pixel installieren, interaktive Elemente erstellen oder das Design deines Shops anpassen möchtest: JavaScript ist das Werkzeug deiner Wahl. In diesem Guide zeige ich dir die drei besten Wege, wie du sicher und performant eigenen Code in dein Shopify-Theme (OS 2.0) einbindest.

⚠️ Bevor du startest: Sicherheit geht vor!

Bevor du Änderungen am Code vornimmst, erstelle immer ein Backup deines Themes:

  1. Gehe zu Onlineshop > Themes.
  2. Klicke auf die drei Punkte (...) neben deinem aktuellen Theme.
  3. Wähle Duplizieren.

Methode 1: Der schnellste Weg (Custom Liquid Block)

Ideal für: Kleine Skripte, die nur auf einer bestimmten Seite (z.B. Startseite) funktionieren sollen.

Seit Shopify Online Store 2.0 kannst du JavaScript direkt über den Theme-Editor einfügen, ohne die Hauptdateien zu bearbeiten.

  1. Gehe zu Onlineshop > Themes und klicke auf Anpassen (Customize).
  2. Navigiere zu der Seite, auf der du das Skript brauchst.
  3. Klicke in der Seitenleiste auf Abschnitt hinzufügen und wähle Custom Liquid.
  4. Füge deinen Code innerhalb von <script>-Tags ein:
    <script>
  console.log('Hallo von der Startseite!');
  // Dein Code hier
</script>
  5. Klicke auf Speichern.

Methode 2: Die saubere Lösung (Eigene Asset-Datei)

Ideal für: Umfangreichen Code, der auf allen Seiten verfügbar sein soll (Best Practice für Performance).

Dies ist der professionellste Weg, da er das Caching nutzt und deinen Code vom restlichen Theme trennt.

Schritt 1: Datei erstellen

  1. Gehe zu Onlineshop > Themes > Drei Punkte (...) > Code bearbeiten.
  2. Scrolle runter zum Ordner Assets und klicke auf Neues Asset hinzufügen.
  3. Wähle „Leere Datei erstellen“, nenne sie custom.js und klicke auf Fertig.
  4. Schreibe deinen Code in diese Datei und klicke auf Speichern.

Schritt 2: Datei im Theme verknüpfen

Damit Shopify weiß, dass es diese Datei laden soll, musst du sie in der theme.liquid verlinken.

  1. Suche im Code-Editor unter Layout die Datei theme.liquid.
  2. Scrolle ganz nach unten und suche das schließende </body>-Tag.
  3. Füge direkt darüber folgende Zeile ein:
    <script src="{{ 'custom.js' | asset_url }}" defer></script>

    Hinweis: Das Attribut defer sorgt dafür, dass die Seite erst geladen wird, bevor das Skript ausgeführt wird (besser für SEO).

Methode 3: Für globale Skripte (Direkt in theme.liquid)

Ideal für: Kurze Skripte wie Google Analytics, Facebook Pixel oder einfache CSS-Klassen-Manipulationen.

  1. Gehe zu Code bearbeiten und öffne die Datei theme.liquid.
  2. Suche das Tag </head> (für Tracking-Skripte) oder </body> (für Funktionen).
  3. Füge deinen Code direkt ein:
    <script>
  document.addEventListener('DOMContentLoaded', function() {
    // Dein Code wird ausgeführt, sobald die Seite bereit ist
    console.log('Shopify Script geladen');
  });
</script>

Profi-Tipps für 2025

1. Nutze keine veralteten jQuery-Versionen

Die meisten modernen Shopify-Themes (wie Dawn) nutzen reines JavaScript (Vanilla JS). Vermeide es, jQuery extra zu laden, nur um kleine Änderungen vorzunehmen. Das spart Ladezeit.

2. DOMContentLoaded nutzen

Shopify-Seiten laden viele Inhalte dynamisch. Um sicherzugehen, dass dein Element bereits existiert, wenn dein Skript läuft, umschließe deinen Code immer mit:

document.addEventListener("DOMContentLoaded", (event) => {
  // Dein Code hier
});

3. Debugging

Wenn dein Code nicht funktioniert:

  1. Öffne deinen Shop im Browser.
  2. Drücke F12 (Konsole).
  3. Prüfe, ob Fehlermeldungen in Rot erscheinen. Oft ist es nur ein Tippfehler im Dateinamen oder ein vergessenes Semikolon.

Zusammenfassung: Welche Methode wann?

  • Nur eine Seite? -> Methode 1 (Custom Liquid).
  • Viel Code / Sauberkeit? -> Methode 2 (Assets).
  • Schnelle Tracking-Pixel? -> Methode 3 (theme.liquid).

Herzlichen Glückwunsch! Du hast nun erfolgreich eigenes JavaScript in deinen Shopify-Store integriert. Wenn du Fragen hast, nutze die Kommentarfunktion (oder frag dein Entwickler-Tool)!

0