Comment ajouter du JavaScript personnalisé sur Shopify (2026)

À retenir

• Le meilleur endroit pour le JavaScript spécifique à une section est le bloc {% javascript %} dans le fichier Liquid de la section — Shopify le compile (bundles) et le diffère (defers) automatiquement.
• Le JavaScript global qui s’exécute sur chaque page va dans theme.liquid avant </body>, idéalement avec un attribut defer.
• La section ou le bloc Custom Liquid dans l’éditeur de thème accepte les balises <script> inline - utile pour des petits snippets rapides sans accès à l’éditeur de code.
• Peut-on ajouter du code personnalisé à Shopify ? Oui — l’éditeur de code est entièrement accessible à toute personne ayant la permission “Gérer les thèmes” (Manage themes).

Pour ajouter du JavaScript personnalisé dans Shopify, placez le code spécifique à une section dans la balise {% javascript %} de la section, le code global dans theme.liquid ou un fichier d’asset différé, et les petits snippets rapides dans un bloc Custom Liquid dans l’éditeur de thème. Chaque emplacement a une portée et un coût en performance différents.

Peut-on ajouter du code personnalisé à Shopify ?

Oui, l’éditeur de code de Shopify est totalement accessible. Allez dans Boutique en ligne → Thèmes, cliquez sur le menu à trois points (…) à côté de votre thème, puis sur Modifier le code (Edit code) pour parcourir et modifier tous les fichiers du thème. Vous pouvez ajouter du JavaScript de plusieurs façons :

1. Les blocs {% javascript %} de section
2. Le fichier global theme.liquid
3. Les fichiers .js autonomes dans le dossier assets/
4. Les blocs Custom Liquid dans l’éditeur de thème

Pour créer la section qui contiendra votre script, consultez Comment ajouter un nouveau type de section dans 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 %} :

<countdown-timer class="countdown-section" id="countdown-{{ section.id }}">
  <span class="countdown-timer"></span>
</countdown-timer>

{% javascript %}
  // Ce code est :
  // - Automatiquement regroupé avec le JS des autres sections par Shopify
  // - Automatiquement différé (ne bloque pas le rendu de la page)
  // - Servi sur tout le site dans un seul fichier avec le JS de toutes les autres sections

  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 automatiquement le JavaScript de la section, donc il ne bloque pas le rendu
• Shopify regroupe le code de la balise {% javascript %} de chaque section dans un seul fichier différé
• Le script se trouve dans le même fichier que le HTML qu’il contrôle

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 sous forme d’attribut de données (data attribute) ou de 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>

Puis dans votre JavaScript :

var el = document.querySelector('.product-countdown')
var saleEnd = el.dataset.saleEnd
var productId = el.dataset.productId

Pour réduire la taille de ces fichiers avant leur mise en ligne, consultez Comment minifier le CSS et le JavaScript dans Shopify.

Méthode 2 - theme.liquid (JavaScript global)

Pour le JavaScript qui doit s’exécuter sur chaque page de votre boutique, ajoutez-le à theme.liquid.

Avant </body> avec defer (scripts globaux non critiques) :

<script src="{{ 'custom-global.js' | asset_url }}" defer></script>

Script inline dans <head> (uniquement pour les tout petits scripts critiques) :

<script>
    // Gardez ceci extrêmement petit — 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).

Pour les scripts qui ralentissent le premier rendu, consultez Comment corriger les scripts qui bloquent le rendu dans Shopify.

Méthode 3 - Bloc Custom Liquid dans l’éditeur de thème

Dawn et la plupart des thèmes Online Store 2.0 incluent une section (et un bloc) Custom Liquid (Liquid personnalisé) dans l’éditeur de thème. Elle accepte le HTML, les balises <script> et le Liquid.

Quand l’utiliser :

• Les petits snippets JavaScript rapides et ponctuels que vous voulez ajouter sans passer par l’éditeur de code
• Les intégrations tierces qui fournissent un snippet (widgets de chat, plugins sociaux)
• Tester quelque chose rapidement avant de le valider dans un fichier de section

Limites :

• Les scripts dans les blocs Custom Liquid sont inline et ne sont pas différés automatiquement
• Ce n’est pas le bon endroit pour du JavaScript important — 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), la section Custom Liquid est l’alternative. Dans l’éditeur de thème, ajoutez une section Custom Liquid, collez votre code <script>...</script>, et enregistrez.

Pour du JavaScript plus long ou plus complexe, Fudge, l’opérateur IA pour les boutiques Shopify, peut l’écrire pour vous : décrivez le comportement que vous souhaitez dans son éditeur de boutique, et Fudge écrit le JavaScript sous forme de bloc {% javascript %} de section propre et bien structuré, comme un brouillon que vous pouvez tester en aperçu avant qu’il n’atteigne les clients.

Charger du JavaScript depuis le dossier assets/

Pour du JavaScript réutilisable référencé par plusieurs sections :

1. Allez dans l’éditeur de code → dossier assets/ → créez un nouveau fichier .js
2. Écrivez votre JavaScript dans le fichier
3. Référencez-le dans theme.liquid ou dans une section :

<!-- Dans theme.liquid ou le HTML d'une section -->
<script src="{{ 'your-script.js' | asset_url }}" defer></script>

Cette approche fonctionne bien pour les bibliothèques d’utilitaires ou les fonctionnalités partagées, mais l’approche du bloc {% javascript %} est préférable pour le code spécifique à une section, car il est automatiquement regroupé (bundled).

Erreurs courantes avec le JavaScript sur Shopify

Utiliser document.write(). Non pris en charge dans les scripts différés et largement obsolète.

Supposer que jQuery est disponible. Les thèmes Shopify modernes (Dawn et versions ultérieures) n’incluent pas jQuery par défaut. Écrivez plutôt du JavaScript pur (vanilla).

Accéder directement aux variables Liquid dans les blocs {% javascript %}. Cela ne fonctionne pas — le code Liquid est traité côté serveur avant que le JavaScript ne s’exécute. Passez plutôt les données via des attributs data.

Balise script dans le <head> sans defer/async. Chaque milliseconde de temps d’analyse JavaScript dans le <head> retarde l’affichage de votre page. Différez toujours les scripts non critiques.

Est-ce que Shopify prend en charge le JavaScript ?

Oui. Les thèmes Shopify sont construits avec du HTML, du CSS, du Liquid (le langage de template de Shopify) et du JavaScript. Vous avez un accès complet 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 propose également ses propres API JavaScript — Shopify.currency, l’API Ajax Cart et l’API Section Rendering — pour les interactions courantes en vitrine. La seule contrainte est que le JavaScript côté serveur (Node.js) ne fonctionne pas dans les thèmes Shopify ; tout le JS des thèmes s’exécute dans le navigateur.

FAQ