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 qui s’applique spécifiquement à 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 bundlé 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 ajoute automatiquement un
deferau JavaScript de la section — pas de render-blocking - Le code se charge uniquement sur les pages où la section est réellement présente
- Le JavaScript de plusieurs sections est bundlé pour réduire les 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 via des attributs data- ou une balise de 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>Puis dans votre JavaScript :
À lire aussi : Minifier le CSS et le JavaScript sur Shopify.
var el = document.querySelector('.product-countdown');
var saleEnd = el.dataset.saleEnd;
var productId = el.dataset.productId;Méthode 2 — theme.liquid (JavaScript global)
Pour le JavaScript qui doit s’exécuter sur toutes les pages de votre boutique, ajoutez-le dans theme.liquid.
À lire aussi : Corriger les scripts qui bloquent le rendu (Render-Blocking) sur Shopify.
Avant le </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
- Les configurations 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> font du render-blocking.
Méthode 3 — Bloc HTML personnalisé dans l’Éditeur de thème
Certains thèmes incluent un type de section « HTML personnalisé » (Custom HTML) dans l’Éditeur de thème. Ce bloc accepte n’importe quel code HTML, y compris les balises <script>.
Quand l’utiliser :
- Les petits snippets JavaScript rapides que vous voulez ajouter sans avoir à toucher à l’éditeur de code
- Les intégrations tierces qui fournissent un snippet (widgets de chat, plugins sociaux)
- Tester quelque chose rapidement avant de l’intégrer proprement dans un fichier de section
Limites :
- Les scripts dans les blocs HTML personnalisés sont inline et ne bénéficient pas d’un
deferautomatique - Ce n’est pas le bon endroit pour des scripts JavaScript lourds — utilisez plutôt les blocs
{% javascript %}de section
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
Où dois-je ajouter mon JavaScript personnalisé - dans un bloc de section ou dans theme.liquid ?
Dans un bloc de section {% javascript %} si le JS ne s’applique qu’à une seule section (compte à rebours, comportement d’une galerie d’images). Dans theme.liquid si le JS doit s’exécuter sur toutes les pages (analytics, utilitaires globaux). Mélanger les deux - mettre du JS propre à 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 le bon scope dans le fichier approprié.
Puis-je utiliser jQuery dans un thème Shopify ?
Les thèmes modernes (Dawn et ultérieurs) n’incluent pas jQuery par défaut : l’utilisation du JavaScript vanilla est la norme. 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 leur équivalent en une ligne en vanilla.
Pourquoi mon JavaScript ne s’exécute-t-il pas ?
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 dans votre thème bloque le script. Ouvrez la console de votre navigateur pour voir les erreurs affichées.
Puis-je exécuter du JavaScript sur les pages de paiement de Shopify ?
Seuls les marchands Shopify Plus peuvent éditer checkout.liquid directement. Pour tous les autres, l’API Customer Events (pixels personnalisés) est le moyen officiel d’exécuter du JavaScript sur les pages de paiement - y compris sur la page de remerciement, l’étape de l’adresse et l’étape d’expédition.
Est-ce que le JavaScript personnalisé va faire baisser mon score Lighthouse ?
C’est possible, s’il est ajouté sans précaution. Les plus grosses pertes de score viennent des scripts inline dans le <head> sans defer, des lourdes bibliothèques chargées sur chaque page, et du JavaScript qui exécute des tâches gourmandes de manière synchrone au chargement de la page. Utilisez defer, faites du lazy-loading quand c’est possible, et n’incluez votre code que sur les pages qui en ont besoin.
Article lié : Ajouter des scripts de suivi à Shopify.