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, CSS, 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 librairie JavaScript en la chargeant depuis votre dossier assets ou via un CDN. Shopify propose également ses propres API JavaScript — Shopify.currency, l’Ajax Cart API et la Section Rendering API — pour gérer les interactions front-end courantes. La seule contrainte est que le JavaScript côté serveur (Node.js) ne peut pas tourner dans les thèmes Shopify ; tout le JS de votre thème s’exécute dans le navigateur de l’utilisateur.
À lire aussi : Ajouter des scripts de suivi (Tracking Scripts) sur Shopify.