Wichtigste Erkenntnisse
- Der beste Ort für abschnittsspezifisches JavaScript ist der
{% javascript %}-Block in der Liquid-Datei der Section — Shopify bündelt es und wendet automatischdeferan.- Globales JavaScript, das auf jeder Seite ausgeführt wird, gehört in die
theme.liquidvor das</body>-Tag, idealerweise mit einemdefer-Attribut.- Der Custom HTML Block im Theme Editor akzeptiert Inline-
<script>-Tags — nützlich für schnelle Snippets ohne Zugriff auf den Code Editor.- Kann man Shopify eigenen Code hinzufügen? Ja — der Code Editor ist für alle mit der Berechtigung “Themes verwalten” vollständig zugänglich.
JavaScript treibt die interaktiven Elemente deines Shopify-Stores an — dynamische Warenkorb-Updates, Custom-Produktkonfiguratoren, Scroll-Animationen und mehr. Shopify bietet dir verschiedene Stellen, um JavaScript hinzuzufügen, jeweils mit unterschiedlichem Scope und Auswirkungen auf die Performance.
Kann man benutzerdefinierten Code zu Shopify hinzufügen?
Ja, der Shopify-Code-Editor ist vollständig zugänglich. Gehe zu Online Store → Themes → Actions → Edit code, um alle Theme-Dateien zu durchsuchen und zu bearbeiten. Du kannst JavaScript auf verschiedene Arten hinzufügen:
- Sektions-
{% javascript %}-Blöcke - Globale
theme.liquid - Eigenständige
.js-Dateien imassets/-Ordner - Custom HTML-Blöcke im Theme Editor
Passend dazu: So erstellen Sie einen neuen Sektionstyp in Shopify von Grund auf (2026).
Methode 1 — Sektions-{% javascript %}-Blöcke (empfohlen)
Die Best Practice für jegliches JavaScript, das spezifisch für eine Sektion ist.
Füge in deiner Sektionsdatei (sections/your-section.liquid) einen {% javascript %}-Block hinzu:
<div class="countdown-section" id="countdown-{{ section.id }}">
<span class="countdown-timer"></span>
</div>
{% javascript %}
// Dieser Code wird:
// - Von Shopify automatisch mit anderem Sektions-JS gebündelt
// - Automatisch verzögert (defer - blockiert das Rendering nicht)
// - Nur kompiliert, wenn die Sektion tatsächlich auf einer Seite verwendet wird
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 verzögert Sektions-JavaScript automatisch – kein Render-Blocking
- Code wird nur auf Seiten geladen, auf denen die Sektion tatsächlich verwendet wird
- JavaScript mehrerer Sektionen wird in weniger Anfragen gebündelt
Wichtig: Variablen in {% javascript %}-Blöcken können nicht direkt auf Liquid-Variablen zugreifen. Wenn du Liquid-Daten in deinem JS benötigst, gib diese als Data-Attribut oder in einem JSON-Script-Tag im HTML-Teil der Sektion aus.
Übergabe von Liquid-Daten an JavaScript:
<div
class="product-countdown"
data-sale-end="{{ section.settings.sale_end_date }}"
data-product-id="{{ product.id }}"
></div>Dann in deinem JavaScript:
Passend dazu: CSS und JavaScript in Shopify minifizieren (2026).
var el = document.querySelector('.product-countdown');
var saleEnd = el.dataset.saleEnd;
var productId = el.dataset.productId;Methode 2 — theme.liquid (globales JavaScript)
Für JavaScript, das auf jeder Seite deines Shops ausgeführt werden muss, füge es zu theme.liquid hinzu.
Passend dazu: So behebst du Render-blocking Scripts in Shopify (2026).
Vor </body> mit defer (nicht-kritische globale Skripte):
<script src="{{ 'custom-global.js' | asset_url }}" defer></script>Inline-Script im <head> (nur für kritische, winzige Skripte):
<script>
// Halte dies extrem klein — es blockiert das Seiten-Rendering
window.__store = { currency: '{{ shop.currency }}' };
</script>Wann du theme.liquid für JavaScript verwenden solltest:
- Drittanbieter-Integrationen, die auf jeder Seite initialisiert werden müssen (GTM, Analytics)
- Globale Hilfsfunktionen, die von mehreren Sektionen verwendet werden
- Shop-Konfigurationen, die Sektionen vor ihrer Initialisierung benötigen
Verwende immer defer oder async bei externen Skript-Referenzen in theme.liquid. Einfache <script src="...">-Tags im <head> sind render-blocking.
Methode 3 — Custom HTML-Block im Theme Editor
Einige Themes enthalten einen Sektionstyp „Custom HTML“ im Theme Editor. Dieser akzeptiert beliebiges HTML, einschließlich <script>-Tags.
Wann zu verwenden:
- Schnelle, einmalige JavaScript-Snippets, die Sie ohne den Code-Editor hinzufügen möchten
- Embeds von Drittanbietern, die ein Snippet bereitstellen (Chat-Widgets, Social Plugins)
- Schnelles Testen von etwas, bevor es in eine Sektionsdatei übernommen wird
Einschränkungen:
- Skripte in Custom HTML-Blöcken sind inline und werden nicht automatisch verzögert
- Nicht der richtige Ort für umfangreiches JavaScript – verwenden Sie stattdessen Sektions-
{% javascript %}-Blöcke
So fügen Sie benutzerdefiniertes JS ohne den Code-Editor hinzu
Wenn Sie keinen Zugriff auf den Code-Editor haben (oder ihn lieber nicht verwenden), ist der Custom HTML-Sektionsblock die Alternative. Fügen Sie im Theme Editor eine Custom HTML-Sektion hinzu, fügen Sie Ihren <script>...</script>-Code ein und speichern Sie.
Für größeres oder komplexeres JavaScript ist Fudge der bessere Ansatz – beschreiben Sie das gewünschte Verhalten, und Fudge schreibt das JavaScript als ordentlich strukturierten Sektions-{% javascript %}-Block.
JavaScript aus dem Ordner assets/ laden
Für wiederverwendbares JavaScript, auf das mehrere Sektionen verweisen:
- Gehen Sie zum Code-Editor → Ordner
assets/→ erstellen Sie eine neue.js-Datei - Schreiben Sie Ihr JavaScript in die Datei
- Referenzieren Sie es in theme.liquid oder einer Sektion:
<!-- In theme.liquid oder dem HTML einer Sektion -->
<script src="{{ 'your-script.js' | asset_url }}" defer></script>Dieser Ansatz eignet sich gut für Utility-Bibliotheken oder geteilte Funktionalitäten, aber der {% javascript %}-Block-Ansatz wird für sektionsspezifischen Code bevorzugt, da dieser automatisch gebündelt wird.
Häufige Fehler bei Shopify JavaScript
Verwendung von document.write(). Wird in verzögerten Skripten nicht unterstützt und ist generell veraltet.
Annahme, dass jQuery verfügbar ist. Moderne Shopify-Themes (Dawn und neuer) enthalten kein jQuery. Schreiben Sie stattdessen Plain JavaScript.
Direkter Zugriff auf Liquid-Variablen in {% javascript %}-Blöcken. Das funktioniert nicht – Liquid wird serverseitig verarbeitet, bevor JavaScript ausgeführt wird. Übergeben Sie Daten stattdessen via Data-Attribute.
Script-Tag im <head> ohne defer/async. Jede Millisekunde JavaScript-Parse-Zeit im <head> verzögert Ihre Seite. Laden Sie unkritische Skripte immer verzögert.
Unterstützt Shopify JavaScript?
Ja. Shopify-Themes basieren auf HTML, CSS, Liquid (Shopifys Templating-Sprache) und JavaScript. Du hast vollen Zugriff auf die JavaScript-APIs des Browsers und kannst jede JavaScript-Library verwenden, indem du sie aus deinem Assets-Ordner oder von einem CDN lädst. Shopify bietet zudem eigene JavaScript-APIs an – 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.
Passend dazu: So fügst du Tracking-Skripte zu Shopify hinzu (2026).
FAQ
Im {% javascript %}-Block der Section, wenn das JS nur für einen Abschnitt gilt (Countdown-Timer, Bildergalerie). In der theme.liquid, wenn das JS auf jeder Seite ausgeführt werden muss (Analytics, globale Utilities). Wenn man das vermischt – z.B. Section-spezifisches JS in die theme.liquid packt – schadet das der Performance, da der Code auf Seiten geladen wird, die ihn gar nicht brauchen. Wenn du das JS lieber nicht selbst schreiben möchtest, beschreibe einfach, was du brauchst, in Fudge, und es generiert den richtigen gescopten Block in der passenden Datei.
Moderne Themes (Dawn und neuer) enthalten standardmäßig kein jQuery - Vanilla JavaScript ist die Erwartung. Wenn du jQuery unbedingt brauchst, lade es explizit über ein CDN, aber prüfe vorher die Auswirkungen auf die Dateigröße. Die meisten jQuery-Einzeiler haben entsprechende Einzeiler-Äquivalente in Vanilla JS.
Die häufigsten Gründe: (1) Das Skript lädt, bevor das gesuchte DOM-Element existiert – packe es in DOMContentLoaded oder nutze defer. (2) Ein Liquid-Template-Fehler hat die Seitenausgabe zerschossen. (3) Eine Content Security Policy in deinem Theme blockiert das Skript. Öffne die Browser-Konsole für Fehlermeldungen.
Nur Shopify Plus-Händler können die checkout.liquid direkt bearbeiten. Für alle anderen ist die Customer Events API (Custom Pixels) der unterstützte Weg, um JavaScript auf Checkout-Seiten auszuführen – einschließlich der Dankesseite, dem Adress-Schritt und dem Versand-Schritt.
Das kann passieren, wenn es unvorsichtig hinzugefügt wird. Die größten Einbußen kommen von Inline-Skripten im <head> ohne defer, großen Libraries, die auf jeder Seite geladen werden, und JavaScript, das viel Rechenleistung synchron beim Laden der Seite beansprucht. Nutze defer, initialisiere lazy wo immer möglich und binde Code nur auf den Seiten ein, die ihn wirklich brauchen.
Mehr dazu: Tracking-Skripte zu Shopify hinzufügen.