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 beste Methode für JavaScript, das spezifisch für eine Section ist.
Füge in deiner Section-Datei (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:
// - Automatisch von Shopify mit anderem Section-JS gebündelt
// - Automatisch verzögert (defer), blockiert also nicht das Rendern der Seite
// - Nur kompiliert, wenn die Section 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 lädt Section-JavaScript automatisch verzögert (defer) – kein Render-Blocking
- Code wird nur auf Seiten geladen, auf denen die Section tatsächlich verwendet wird
- Das JavaScript mehrerer Sections wird in weniger Requests 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 sie als Data-Attribute oder als JSON-Script-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>Und dann in deinem JavaScript:
Passend dazu: CSS und JavaScript in Shopify minimieren.
var el = document.querySelector('.product-countdown')
var saleEnd = el.dataset.saleEnd
var productId = el.dataset.productIdMethode 2 — theme.liquid (globales JavaScript)
Für JavaScript, das auf jeder Seite deines Shops ausgeführt werden muss, füge es der theme.liquid hinzu.
Passend dazu: Render-blockierende Skripte in Shopify beheben.
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, sehr kleine Skripte):
<script>
// Halte dies extrem klein – es blockiert das Rendern der Seite
window.__store = {currency: '{{ shop.currency }}'}
</script>Wann man theme.liquid für JavaScript nutzt:
- Drittanbieter-Integrationen, die auf jeder Seite initialisiert werden müssen (GTM, Analytics)
- Globale Hilfsfunktionen (Utility-Funktionen), die von mehreren Sections verwendet werden
- Shop-Konfigurationen, die Sections benötigen, bevor sie initialisiert werden
Verwende bei externen Skript-Referenzen in der theme.liquid immer defer oder async. Einfache <script src="...">-Tags im <head> blockieren das Rendern der Seite.
Methode 3 — Custom HTML-Block im Theme Editor
Einige Themes enthalten im Theme-Editor einen Section-Typ für „Benutzerdefiniertes HTML“ (Custom HTML). Dieser akzeptiert beliebiges HTML, einschließlich <script>-Tags.
Wann man das nutzt:
- 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 schnell etwas zu testen, bevor man es in einer Section-Datei speichert
Einschränkungen:
- Skripte in Custom-HTML-Blöcken sind inline und werden nicht automatisch verzögert geladen (defer)
- Nicht der richtige Ort für größeres JavaScript – verwende stattdessen
{% javascript %}-Blöcke in Sections
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 Section-Block {% javascript %}, wenn das JS nur für eine Section gilt (Countdown-Timer, Bildergalerie-Verhalten). In der theme.liquid, wenn das JS auf jeder Seite ausgeführt werden muss (Analytics, globale Utility-Funktionen). Vermischst du das – und packst Section-spezifisches JS in die theme.liquid – leidet die Performance, weil der Code auf Seiten geladen wird, die ihn nicht brauchen. Wenn du das JS lieber nicht selbst schreiben möchtest, beschreibe Fudge, was du brauchst, und es generiert den richtigen isolierten Block in der richtigen Datei.
Moderne Themes (Dawn und neuer) enthalten standardmäßig kein jQuery – Vanilla JavaScript wird erwartet. Wenn du jQuery unbedingt verwenden musst, lade es explizit über ein CDN, aber prüfe zuerst die Auswirkungen auf die Dateigröße. Für die meisten jQuery-Einzeiler gibt es entsprechende Vanilla-Einzeiler.
Die häufigsten Gründe: (1) Das Skript wird geladen, bevor das DOM-Element, auf das es abzielt, 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, um nach Fehlern zu suchen.
Nur Shopify Plus-Händler können die checkout.liquid direkt bearbeiten. Für alle anderen ist die Customer Events API (Custom Pixels) der offiziell 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 Leistungseinbußen entstehen durch Inline-Skripte im <head> ohne defer, große Bibliotheken, die auf jeder Seite geladen werden, und JavaScript, das schwere Prozesse synchron beim Laden der Seite ausführt. Nutze defer, nutze Lazy-Initialisierung wo möglich und binde Code nur auf Seiten ein, die ihn auch benötigen.
Passend dazu: Tracking-Skripte in Shopify hinzufügen.