Wie man eigenes JavaScript in Shopify hinzufügt (2026)

Das Wichtigste in Kürze

• Der beste Ort für JavaScript, das nur für eine Section gilt, ist der {% javascript %}-Block in der Liquid-Datei der Section — Shopify bündelt das Skript und lädt es automatisch verzögert (defer).
• Globales JavaScript, das auf jeder Seite ausgeführt wird, kommt in die theme.liquid vor dem </body>-Tag, idealerweise mit einem defer-Attribut.
• Die Custom Liquid-Section oder der Block im Theme Editor akzeptiert inline <script>-Tags – nützlich für schnelle Snippets, ohne den Code-Editor öffnen zu müssen.
• Kannst du benutzerdefinierten Code zu Shopify hinzufügen? Ja — der Code-Editor ist für jeden mit der Berechtigung “Themes verwalten” voll zugänglich.

Um benutzerdefiniertes JavaScript in Shopify hinzuzufügen, packst du Code für bestimmte Sections in das {% javascript %}-Tag der Section, globalen Code in die theme.liquid oder eine verzögerte (deferred) Asset-Datei, und schnelle Snippets in einen Custom Liquid-Block im Theme Editor. Jeder Ort hat einen anderen Gültigkeitsbereich (Scope) und andere Auswirkungen auf die Performance.

Kannst du eigenen Code zu Shopify hinzufügen?

Ja, der Code-Editor von Shopify ist vollständig zugänglich. Gehe zu Onlineshop → Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Code bearbeiten, um alle Theme-Dateien zu durchsuchen und zu bearbeiten. Du kannst JavaScript auf verschiedene Arten hinzufügen:

1. Section {% javascript %}-Blöcke
2. Globale theme.liquid
3. Eigenständige .js-Dateien im Ordner assets/
4. Custom Liquid-Blöcke im Theme Editor

Um die Section zu erstellen, die dein Skript enthält, schau dir an, wie man von Grund auf einen neuen Shopify-Section-Typ hinzufügt.

Methode 1 - Section {% javascript %}-Blöcke (empfohlen)

Die Best Practice für jedes JavaScript, das spezifisch für eine Section ist.

Füge in deiner Section-Datei (sections/your-section.liquid) einen {% javascript %}-Block hinzu:

<countdown-timer class="countdown-section" id="countdown-{{ section.id }}">
  <span class="countdown-timer"></span>
</countdown-timer>

{% javascript %}
  // Dieser Code wird:
  // - Automatisch von Shopify mit anderem Section-JS gebündelt
  // - Automatisch verzögert (blockiert nicht das Rendering der Seite)
  // - Seitenübergreifend in einer Datei mit dem JS aller anderen Sections bereitgestellt

  class CountdownTimer extends HTMLElement {
    connectedCallback() {
      this.startCountdown();
    }

    startCountdown() {
      // Countdown-Logik
    }
  }

  if (!customElements.get('countdown-timer')) {
    customElements.define('countdown-timer', CountdownTimer);
  }
{% endjavascript %}

Warum dieser Ansatz am besten ist:

• Shopify lädt Section-JavaScript automatisch verzögert (defer), sodass es das Rendering nicht blockiert
• Shopify bündelt den Code aus dem {% javascript %}-Tag jeder Section in einer einzigen, verzögerten Datei
• Das Skript befindet sich in derselben Datei wie das Markup, das es steuert

Wichtig: Variablen in {% javascript %}-Blöcken können nicht direkt auf Liquid-Variablen zugreifen. Wenn du Liquid-Daten in deinem JS brauchst, gib sie als Data-Attribut oder als JSON-Skript-Tag im HTML-Teil der Section aus.

Liquid-Daten an JavaScript übergeben:

<div
  class="product-countdown"
  data-sale-end="{{ section.settings.sale_end_date }}"
  data-product-id="{{ product.id }}"
></div>

Dann in deinem JavaScript:

var el = document.querySelector('.product-countdown')
var saleEnd = el.dataset.saleEnd
var productId = el.dataset.productId

Um diese Dateien vor der Auslieferung zu verkleinern, lies Wie man CSS und JavaScript in Shopify minifiziert.

Methode 2 - theme.liquid (globales JavaScript)

Für JavaScript, das auf jeder Seite deines Shops laufen muss, füge es zur theme.liquid hinzu.

Vor </body> mit defer (nicht-kritische globale Skripte):

<script src="{{ 'custom-global.js' | asset_url }}" defer></script>

Inline-Skript im <head> (nur für kritische, winzige Skripte):

<script>
    // Halte das extrem klein — es blockiert das Rendering der Seite
    window.__store = {currency: '{{ shop.currency }}'}
</script>

Wann du die theme.liquid für JavaScript verwenden solltest:

• Drittanbieter-Integrationen, die auf jeder Seite initialisiert werden müssen (GTM, Analytics)
• Globale Hilfsfunktionen (Utility Functions), die von mehreren Sections genutzt werden
• Shop-Konfigurationen, die Sections benötigen, bevor sie initialisiert werden

Verwende immer defer oder async bei externen Skript-Referenzen in der theme.liquid. Normale <script src="...">-Tags im <head> blockieren das Rendering (render-blocking).

Bei Skripten, die das erste Rendering verlangsamen, lies Wie man Render-Blocking Skripte in Shopify behebt.

Methode 3 - Custom Liquid-Block im Theme Editor

Dawn und die meisten Online Store 2.0-Themes enthalten eine Custom Liquid-Section (und einen Block) im Theme Editor. Er akzeptiert HTML, <script>-Tags und Liquid.

Wann verwenden:

• Schnelle, einmalige JavaScript-Snippets, die du ohne den Code-Editor hinzufügen möchtest
• Drittanbieter-Embeds, die ein Snippet bereitstellen (Chat-Widgets, Social Plugins)
• Um etwas schnell zu testen, bevor du es fest in eine Section-Datei schreibst

Einschränkungen:

• Skripte in Custom Liquid-Blöcken sind inline und werden nicht automatisch verzögert (deferred)
• Nicht der richtige Ort für umfangreicheres JavaScript — verwende stattdessen Section {% javascript %}-Blöcke

So fügst du eigenes JS ohne den Code-Editor hinzu

Wenn du keinen Zugriff auf den Code-Editor hast (oder ihn lieber nicht nutzen möchtest), ist die Custom Liquid-Section die Alternative. Füge im Theme Editor eine Custom Liquid-Section hinzu, füge deinen <script>...</script>-Code ein und speichere.

Für größeres oder komplexeres JavaScript kann Fudge, der KI-Operator für Shopify-Shops, es für dich schreiben: Beschreibe das gewünschte Verhalten im Store Editor, und Fudge schreibt das JavaScript als sauberen Section {% javascript %}-Block mit guter Struktur, als Entwurf, den du in der Vorschau testen kannst, bevor ihn deine Kunden sehen.

JavaScript aus dem assets/-Ordner laden

Für wiederverwendbares JavaScript, auf das mehrere Sections verweisen:

1. Gehe zum Code-Editor → assets/-Ordner → erstelle eine neue .js-Datei
2. Schreibe dein JavaScript in die Datei
3. Referenziere sie in der theme.liquid oder in einer Section:

<!-- In der theme.liquid oder im HTML einer Section -->
<script src="{{ 'your-script.js' | asset_url }}" defer></script>

Dieser Ansatz funktioniert gut für Utility-Bibliotheken oder geteilte Funktionen, aber der {% javascript %}-Block-Ansatz wird für abschnittsspezifischen Code bevorzugt, da er automatisch gebündelt wird.

Häufige Fehler mit Shopify-JavaScript

Die Nutzung von document.write(). Wird in verzögerten Skripten nicht unterstützt und ist generell veraltet (deprecated).

Davon ausgehen, dass jQuery verfügbar ist. Moderne Shopify-Themes (Dawn und neuer) enthalten kein jQuery. Schreibe stattdessen Vanilla-JavaScript.

Direkter Zugriff auf Liquid-Variablen in {% javascript %}-Blöcken. Das funktioniert nicht — Liquid wird serverseitig verarbeitet, bevor JavaScript ausgeführt wird. Übergib Daten stattdessen über Data-Attribute.

Script-Tag im <head> ohne defer/async. Jede Millisekunde JavaScript-Parsing-Zeit im <head> verzögert deine Seite. Lade nicht-kritische Skripte immer verzögert (defer).

Unterstützt Shopify JavaScript?

Ja. Shopify-Themes werden mit HTML, CSS, Liquid (Shopifys Template-Sprache) und JavaScript erstellt. Du hast vollen Zugriff auf die JavaScript-APIs des Browsers und kannst jede JavaScript-Bibliothek nutzen, indem du sie aus deinem Assets-Ordner oder über ein CDN lädst. Shopify stellt auch eigene JavaScript-APIs bereit — Shopify.currency, die Ajax Cart API und die Section Rendering API — für gängige Storefront-Interaktionen. Die einzige Einschränkung ist, dass serverseitiges JavaScript (Node.js) nicht in Shopify-Themes läuft; sämtliches JS in Themes wird im Browser ausgeführt.

FAQ