Wichtige Erkenntnisse
- Der beste Ort für sektionsspezifisches JavaScript ist der
{% javascript %}-Block innerhalb der Liquid-Datei der Sektion – Shopify bündelt diesen automatisch und lädt ihn verzögert (deferred).- Globales JavaScript, das auf jeder Seite ausgeführt wird, gehört in die
theme.liquidvor</body>, 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 benutzerdefinierten Code zu Shopify hinzufügen? Ja – der Code-Editor ist für jeden mit der Berechtigung „Themes verwalten“ voll zugänglich.
JavaScript treibt die interaktiven Teile Ihres Shopify-Stores an – dynamische Warenkorb-Updates, individuelle Produktkonfiguratoren, Scroll-Animationen und mehr. Shopify bietet Ihnen mehrere Möglichkeiten, JavaScript hinzuzufügen, jede mit unterschiedlicher Reichweite 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).