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 Code-Editor von Shopify ist voll zugänglich. Gehen Sie zu Onlineshop → Themes → Aktionen → Code bearbeiten, um alle Theme-Dateien zu durchsuchen und zu bearbeiten. Sie können JavaScript auf verschiedene Arten hinzufügen:
- Sektions-
{% javascript %}-Blöcke - Globale
theme.liquid - Eigenständige
.js-Dateien im Ordnerassets/ - Custom HTML-Blöcke im Theme Editor
Methode 1 — Sektions-{% javascript %}-Blöcke (empfohlen)
Die Best Practice für jegliches JavaScript, das spezifisch für eine Sektion ist.
Fügen Sie in Ihrer Sektionsdatei (sections/ihre-sektion.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 (deferred) geladen (blockiert das Rendering der Seite 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 lädt Sektions-JavaScript automatisch verzögert – kein Render-Blocking
- Code wird nur auf Seiten geladen, auf denen die Sektion tatsächlich verwendet wird
- JavaScript von mehreren Sektionen wird in weniger Anfragen gebündelt
Wichtig: Variablen in {% javascript %}-Blöcken können nicht direkt auf Liquid-Variablen zugreifen. Wenn Sie Liquid-Daten in Ihrem JS benötigen, geben Sie 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 Ihrem JavaScript:
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 Ihres Stores ausgeführt werden muss, fügen Sie es in theme.liquid ein.
Vor </body> mit defer (unkritische globale Skripte):
<script src="{{ 'custom-global.js' | asset_url }}" defer></script>Inline-Script im <head> (nur für kritische, winzige Skripte):
<script>
// Halten Sie dies extrem klein — es blockiert das Seiten-Rendering
window.__store = { currency: '{{ shop.currency }}' };
</script>Wann Sie theme.liquid für JavaScript verwenden sollten:
- Integrationen von Drittanbietern, die auf jeder Seite initialisiert werden müssen (GTM, Analytics)
- Globale Utility-Funktionen, die von mehreren Sektionen verwendet werden
- Store-Konfigurationen, die Sektionen vor ihrer Initialisierung benötigen
Verwenden Sie immer defer oder async bei externen Skript-Referenzen in theme.liquid. Einfache <script src="...">-Tags im <head> blockieren das Rendering.
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 bestehen aus HTML, CSS, Liquid (Shopifys Templating-Sprache) und JavaScript. Sie haben vollen Zugriff auf die JavaScript-APIs des Browsers und können jede JavaScript-Bibliothek verwenden, indem Sie sie aus Ihrem Assets-Ordner oder von einem CDN laden. Shopify bietet auch eigene JavaScript-APIs – 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) in Shopify-Themes nicht läuft; sämtliches JS in Themes wird im Browser ausgeführt.
