Principaux points à retenir
- Le meilleur endroit pour du JavaScript spécifique à une section est le bloc
{% javascript %}dans le fichier Liquid de la section — Shopify le bundle et le diffère automatiquement.- Le JavaScript global qui s’exécute sur chaque page va dans
theme.liquidjuste avant</body>, idéalement avec un attributdefer.- Le bloc HTML personnalisé dans l’Éditeur de thème accepte les balises
<script>inline — utile pour des snippets rapides sans avoir accès à l’éditeur de code.- Peut-on ajouter du code personnalisé sur Shopify ? Oui — l’éditeur de code est 100 % accessible à toute personne ayant la permission “Gérer les thèmes”.
Le JavaScript gère les parties interactives de votre boutique Shopify — les mises à jour dynamiques du panier, les configurateurs de produits personnalisés, les animations au scroll, etc. Shopify vous offre différents endroits pour ajouter du JavaScript, chacun avec des portées et des impacts sur la performance qui varient.
Peut-on ajouter du code personnalisé sur Shopify ?
Oui, l’éditeur de code de Shopify est entièrement accessible. Allez dans Boutique en ligne → Thèmes → Actions → Modifier le code pour parcourir et éditer tous les fichiers du thème. Vous pouvez ajouter du JavaScript de plusieurs manières :
- Les blocs
{% javascript %}de section - Le fichier global
theme.liquid - Les fichiers
.jsautonomes dans le dossierassets/ - Les blocs HTML personnalisés dans l’Éditeur de thème
À lire aussi : Ajouter un nouveau type de section Shopify de zéro.
Méthode 1 — Les blocs {% javascript %} de section (recommandé)
La meilleure pratique pour tout JavaScript spécifique à une section.
Dans le fichier de votre section (sections/your-section.liquid), ajoutez un bloc {% javascript %} :
<div class="countdown-section" id="countdown-{{ section.id }}">
<span class="countdown-timer"></span>
</div>
{% javascript %}
// Ce code est :
// - Automatiquement regroupé (bundled) avec le JS des autres sections par Shopify
// - Automatiquement différé (ne bloque pas le rendu de la page)
// - Compilé uniquement lorsque la section est réellement utilisée sur une page
class CountdownTimer extends HTMLElement {
connectedCallback() {
this.startCountdown();
}
startCountdown() {
// logique du compte à rebours
}
}
if (!customElements.get('countdown-timer')) {
customElements.define('countdown-timer', CountdownTimer);
}
{% endjavascript %}Pourquoi cette approche est la meilleure :
- Shopify diffère (defer) automatiquement le JavaScript des sections — aucun blocage du rendu (render blocking)
- Le code ne se charge que sur les pages où la section est réellement utilisée
- Le JavaScript de plusieurs sections est regroupé (bundled) pour réduire le nombre de requêtes
Important : Les variables dans les blocs {% javascript %} ne peuvent pas accéder directement aux variables Liquid. Si vous avez besoin de données Liquid dans votre JS, affichez-les en tant qu’attribut de données (data attribute) ou via une balise script JSON dans la partie HTML de la section.
Passer des données Liquid au JavaScript :
<div
class="product-countdown"
data-sale-end="{{ section.settings.sale_end_date }}"
data-product-id="{{ product.id }}"
></div>Ensuite, dans votre JavaScript :
Sur le même sujet : Minifier le CSS et le JavaScript sur Shopify.
var el = document.querySelector('.product-countdown')
var saleEnd = el.dataset.saleEnd
var productId = el.dataset.productIdMéthode 2 — theme.liquid (JavaScript global)
Pour le JavaScript qui doit s’exécuter sur chaque page de votre boutique, ajoutez-le à theme.liquid.
Sur le même sujet : Corriger les scripts qui bloquent le rendu sur Shopify.
Avant </body> avec defer (scripts globaux non critiques) :
<script src="{{ 'custom-global.js' | asset_url }}" defer></script>Script inline dans le <head> (uniquement pour les tout petits scripts critiques) :
<script>
// Gardez ceci extrêmement court — cela bloque le rendu de la page
window.__store = {currency: '{{ shop.currency }}'}
</script>Quand utiliser theme.liquid pour le JavaScript :
- Les intégrations tierces qui doivent s’initialiser sur chaque page (GTM, analytics)
- Les fonctions utilitaires globales utilisées par plusieurs sections
- La configuration de la boutique dont les sections ont besoin avant de s’initialiser
Utilisez toujours defer ou async sur les références de scripts externes dans theme.liquid. Les simples balises <script src="..."> dans le <head> bloquent le rendu (render-blocking).
Méthode 3 — Bloc HTML personnalisé dans l’Éditeur de thème
Certains thèmes incluent un type de section “Custom HTML” (HTML personnalisé) dans l’éditeur de thème. Cela accepte n’importe quel code HTML, y compris les balises <script>.
Quand l’utiliser :
- De petits snippets JavaScript rapides et ponctuels que vous souhaitez ajouter sans passer par l’éditeur de code
- Des intégrations tierces qui fournissent un snippet (widgets de chat, plugins sociaux)
- Tester quelque chose rapidement avant de l’intégrer définitivement dans un fichier de section
Limites :
- Les scripts dans les blocs HTML personnalisés sont inline et ne sont pas différés (deferred) automatiquement
- Ce n’est pas le bon endroit pour du JavaScript complexe — utilisez plutôt les blocs
{% javascript %}des sections
Comment ajouter du JS personnalisé sans l’éditeur de code
Si vous n’avez pas accès à l’éditeur de code (ou préférez ne pas l’utiliser), le bloc de section HTML personnalisé est la meilleure alternative. Dans l’Éditeur de thème, ajoutez une section HTML personnalisée, collez votre code <script>...</script> et enregistrez.
Pour du JavaScript plus long ou plus complexe, utiliser Fudge est la meilleure approche — décrivez le comportement que vous souhaitez, et Fudge écrira le JavaScript sous forme d’un vrai bloc {% javascript %} de section propre et bien structuré.
Charger du JavaScript depuis le dossier assets/
Pour du JavaScript réutilisable qui est appelé par plusieurs sections :
- Allez dans l’éditeur de code → dossier
assets/→ créez un nouveau fichier.js - Écrivez votre JavaScript dans ce fichier
- Appelez-le dans theme.liquid ou dans une section :
<!-- Dans theme.liquid ou dans le HTML d'une section -->
<script src="{{ 'your-script.js' | asset_url }}" defer></script>Cette approche fonctionne très bien pour les librairies utilitaires ou les fonctionnalités partagées, mais l’approche avec le bloc {% javascript %} reste à privilégier pour le code spécifique aux sections, car il est bundlé automatiquement.
Les erreurs courantes avec le JavaScript sur Shopify
Utiliser document.write(). Non supporté dans les scripts différés (avec defer) et globalement déprécié.
Penser que jQuery est disponible. Les thèmes Shopify modernes (Dawn et les suivants) n’incluent pas jQuery. Codez plutôt en Vanilla JavaScript.
Accéder directement aux variables Liquid dans les blocs {% javascript %}. Cela ne marche pas — le Liquid est traité côté serveur avant l’exécution du JavaScript. Transmettez plutôt vos données via des attributs data-.
Placer une balise script dans le <head> sans defer/async. Chaque milliseconde de temps d’analyse du JavaScript dans le <head> ralentit votre page. Appliquez toujours un defer sur les scripts non critiques.
Shopify supporte-t-il le JavaScript ?
Oui. Les thèmes Shopify sont construits avec du HTML, du CSS, du Liquid (le langage de templating de Shopify) et du JavaScript. Vous avez un accès total aux API JavaScript du navigateur et pouvez utiliser n’importe quelle bibliothèque JavaScript en la chargeant depuis votre dossier assets ou un CDN. Shopify fournit également ses propres API JavaScript — Shopify.currency, l’API Ajax Cart et l’API Section Rendering — pour les interactions courantes sur la boutique. La seule contrainte est que le JavaScript côté serveur (Node.js) ne fonctionne pas dans les thèmes Shopify ; tout le JS de vos thèmes s’exécute dans le navigateur.
FAQ
Un bloc {% javascript %} de section si le JS ne s'applique qu'à une seule section (compte à rebours, comportement d'une galerie d'images). theme.liquid si le JS doit s'exécuter sur toutes les pages (analytics, utilitaires globaux). Tout mélanger — comme mettre du JS spécifique à une section dans theme.liquid — nuit aux performances car le code se charge sur des pages qui n'en ont pas besoin. Si vous préférez ne pas écrire le JS vous-même, décrivez ce que vous voulez à Fudge et il générera le bon bloc avec la bonne portée dans le bon fichier.
Les thèmes modernes (Dawn et ultérieurs) n'incluent pas jQuery par défaut — il est attendu d'utiliser du JavaScript vanilla. Si vous devez absolument utiliser jQuery, chargez-le explicitement depuis un CDN, mais vérifiez d'abord l'impact sur le poids de la page. La plupart des lignes de code jQuery ont des équivalents d'une ligne en JS vanilla.
Les raisons les plus courantes : (1) le script se charge avant que l'élément DOM qu'il cible n'existe — enveloppez-le dans DOMContentLoaded ou utilisez defer, (2) une erreur de template Liquid a cassé l'affichage de la page, (3) une Content Security Policy (CSP) dans votre thème bloque le script. Ouvrez la console du navigateur pour voir les erreurs.
Seuls les marchands Shopify Plus peuvent modifier checkout.liquid directement. Pour tous les autres, l'API Customer Events (pixels personnalisés) est la méthode officielle pour exécuter du JavaScript sur les pages de paiement — y compris la page de remerciement, l'étape de l'adresse et l'étape d'expédition.
C'est possible, s'il est ajouté négligemment. Les plus gros impacts viennent des scripts inline dans le <head> sans defer, des grosses bibliothèques chargées sur chaque page, et du JavaScript qui exécute des tâches lourdes de manière synchrone au chargement de la page. Utilisez defer, initialisez de manière asynchrone (lazy-initialise) quand c'est possible, et n'incluez le code que sur les pages qui en ont besoin.
Sur le même sujet : Ajouter des scripts de suivi sur Shopify.