Next Digits
EN

Modifier le code Liquid d’un thème Shopify

Apprenez à modifier le code Liquid Shopify proprement : architecture du thème, sauvegarde, sections, snippets, CSS, tests, Git et mises à jour.

L'équipe Next DigitsCRM, automatisation et e-commerce au Maroc
Modifier le code Liquid d’un thème Shopify

Pour modifier le code Liquid d’un thème Shopify proprement, dupliquez le thème, définissez un comportement testable, localisez le bon composant, changez le moins de fichiers possible et validez le résultat sur une copie avant publication. Versionnez le travail avec Git dès que plusieurs changements ou intervenants sont concernés.

Liquid est le langage de modèles utilisé par Shopify pour produire le HTML de la boutique à partir des produits, collections, paramètres et autres données. Il travaille avec HTML, CSS, JavaScript et JSON : savoir écrire une condition Liquid ne suffit donc pas à garantir une personnalisation stable, rapide ou accessible.

Quand faut-il toucher au code Liquid ?

Modifiez le code lorsqu’un besoin ne peut pas être couvert proprement par les paramètres, sections, blocs, modèles, métachamps ou blocs d’application disponibles.

Cas fréquents :

  • créer une section propre à la marque ;
  • afficher une information produit conditionnelle ;
  • développer un tableau, comparateur ou guide ;
  • modifier le comportement des variantes ;
  • intégrer un service externe ;
  • rendre un composant plus accessible ;
  • corriger une performance précise ;
  • produire un balisage structuré fiable.

N’ouvrez pas l’éditeur de code pour déplacer une section ou changer une couleur déjà configurable. Chaque modification directe devient une décision à reprendre lors des mises à jour. Commencez par personnaliser Shopify sans coder, puis justifiez le passage au développement.

Comprendre l’architecture avant de modifier

La documentation sur l’architecture des thèmes Shopify organise les fichiers dans des dossiers standard.

Dossier Rôle Risque typique
layout Cadre global, dont theme.liquid Affecter toutes les pages
templates Composition par type de page Modifier plusieurs ressources
sections Modules configurables Casser un modèle ou ses réglages
blocks Composants réutilisables Créer une dépendance mal documentée
snippets Petits morceaux Liquid Effet indirect sur plusieurs sections
assets CSS, JS, images et ressources Performance ou conflit global
config Schéma et valeurs des réglages Perdre ou invalider des paramètres
locales Traductions du thème Texte manquant dans une langue

Avant un changement, remontez depuis l’élément visible vers le fichier responsable. Un bouton produit peut être rendu par un bloc, appelé dans une section, inclus dans un modèle et stylé dans un asset. Modifier theme.liquid parce qu’il est facile à trouver est rarement la meilleure solution.

Étape 1 : écrire le comportement attendu

Transformez la demande en condition vérifiable. Au lieu de « améliorer la fiche », écrivez :

Sur les produits portant le métachamp livraison.speciale, afficher un message sous le bouton d’achat. Le message doit être absent ailleurs, traduit, lisible au clavier et ne pas déplacer la page après chargement.

Cette phrase indique la donnée, l’emplacement, la condition, les langues et des critères de qualité. Elle permet de tester et de supprimer le code si nécessaire.

Ajoutez les cas limites : valeur vide, produit épuisé, texte long, mobile, panier rapide et absence de JavaScript. Un comportement défini seulement pour la démonstration sera fragile en production.

Étape 2 : dupliquer et nommer le thème

Shopify conseille de créer une copie du thème avant personnalisation. Donnez à la copie un nom qui décrit la branche de travail.

Pour une correction ponctuelle, cette copie peut suffire au retour arrière. Pour un développement suivi, utilisez Shopify CLI et Git :

  • une branche par changement ;
  • des commits limités et descriptifs ;
  • une revue avant fusion ;
  • aucune clé secrète dans les fichiers ;
  • un déploiement vers un thème non publié ;
  • une publication séparée après validation.

La connexion entre un thème Shopify et GitHub peut aussi faciliter la synchronisation. Définissez toutefois qui peut publier et comment éviter qu’un changement fait dans l’éditeur soit écrasé.

Étape 3 : choisir section, bloc ou snippet

La bonne unité réduit le couplage.

Créer une section

Utilisez une section pour un module de page configurable : bannière, tableau, témoignages ou contenu éditorial. Son schéma expose les réglages à l’équipe. Elle peut définir des blocs et des presets pour être ajoutée depuis l’éditeur.

Créer un bloc

Utilisez un bloc pour un élément que le marchand doit ajouter, déplacer ou configurer dans une section. Les thèmes récents peuvent proposer différents types de blocs selon leur architecture.

Créer un snippet

Utilisez un snippet pour un morceau de rendu réutilisé par plusieurs composants, sans réglage direct dans l’éditeur. Passez explicitement les variables nécessaires au lieu de dépendre de tout le contexte global.

Pour un module visible et autonome, notre guide ajouter une section à un thème Shopify fournit une démarche détaillée.

Étape 4 : utiliser les objets et filtres Liquid avec discipline

Liquid donne accès aux objets Shopify comme product, collection, cart, section, block et settings. Utilisez l’objet disponible dans le contexte et vérifiez qu’il existe avant d’accéder à une propriété facultative.

Quelques règles :

  • affectez un résultat réutilisé au lieu de répéter une chaîne complexe ;
  • évitez les boucles imbriquées sur de grandes collections ;
  • limitez le nombre d’éléments parcourus ;
  • utilisez les filtres d’URL d’assets et d’images ;
  • échappez les textes lorsqu’ils deviennent du HTML ;
  • gardez les conditions lisibles ;
  • commentez la raison, pas la syntaxe évidente.

Exemple conceptuel :

{% assign delivery_note = product.metafields.custom.delivery_note.value %}
{% if delivery_note != blank %}
  <p class="product-delivery-note">{{ delivery_note | escape }}</p>
{% endif %}

Le code reste court parce que la donnée est structurée dans un métachamp. Évitez de déduire une règle métier depuis le titre du produit ou une chaîne fragile.

Étape 5 : définir un schéma de section compréhensible

Une section contient souvent une balise {% schema %} avec son nom, ses réglages, ses blocs et ses presets. Les identifiants doivent rester stables : les renommer peut rompre les valeurs enregistrées.

Pour chaque réglage :

  • choisissez un type adapté ;
  • donnez un libellé orienté usage ;
  • fournissez une valeur par défaut sûre ;
  • ajoutez une aide seulement si nécessaire ;
  • évitez plusieurs réglages qui contrôlent la même chose ;
  • fixez des limites raisonnables pour les plages et blocs.

Les sections destinées aux templates JSON ont besoin d’un preset si elles doivent être ajoutées via l’éditeur. La documentation sur les templates JSON décrit la relation entre modèles, sections, ordre et réglages.

Étape 6 : gérer les images correctement

Ne construisez pas manuellement les URLs du CDN. Utilisez les filtres Liquid d’image afin de demander des tailles adaptées et de générer un srcset. Ajoutez des dimensions pour limiter les déplacements de mise en page et un texte alternatif qui décrit le contenu.

Principes :

  • ne chargez pas paresseusement l’image principale visible immédiatement ;
  • différerez les images sous la ligne de flottaison ;
  • fournissez sizes selon la largeur réelle ;
  • évitez une image CSS pour le contenu principal ;
  • ne téléchargez pas simultanément deux héros masqués ;
  • utilisez un format et une compression adaptés ;
  • gardez les images éditables depuis la section.

La documentation de performance des thèmes Shopify relie ces choix au LCP et à la stabilité visuelle.

Étape 7 : isoler le CSS

N’ajoutez pas toutes les règles dans un fichier global sans portée. Utilisez une convention de classe liée au composant et évitez les sélecteurs qui dépendent d’une structure profonde.

Préférez :

.nd-delivery-note { /* styles du composant */ }

à une règle qui traverse plusieurs niveaux génériques. Vérifiez les thèmes clair et sombre, les longues traductions et les largeurs d’écran. Utilisez les variables et réglages existants pour respecter la palette du thème.

Le champ de CSS personnalisé Shopify convient à une petite finition. Un composant maintenu mérite en revanche un style versionné avec son code.

Étape 8 : limiter JavaScript et les dépendances

Utilisez JavaScript pour une interaction que HTML et CSS ne peuvent pas fournir clairement. Ne chargez pas une grande bibliothèque pour ouvrir un accordéon ou changer un état simple.

Bonnes pratiques :

  • charger le script uniquement sur les pages concernées ;
  • différer le code non critique ;
  • initialiser le composant une seule fois ;
  • gérer les sections rechargées dans l’éditeur ;
  • éviter les écouteurs globaux inutiles ;
  • conserver une expérience de base sans JavaScript ;
  • mesurer l’effet sur l’INP ;
  • supprimer le code d’une expérience terminée.

Les applications ajoutent aussi du JavaScript. Distinguez le code du thème, les pixels et les scripts d’applications lors du diagnostic.

Étape 9 : ne jamais placer de secret dans le thème

Le code du thème et les requêtes du navigateur sont publics. N’y placez jamais une clé privée, un mot de passe, un jeton d’administration ou une logique qui suppose que le client ne verra pas sa valeur.

Une intégration nécessitant un secret doit passer par un service côté serveur ou une application avec les autorisations adaptées. Le thème appelle ensuite une interface limitée. Définissez les contrôles d’origine, l’authentification, la validation des entrées et la gestion des erreurs.

Cette séparation protège les données et évite qu’une simple personnalisation graphique devienne un point d’accès à un système métier.

Étape 10 : tester dans et hors de l’éditeur

Le mode aperçu de l’éditeur recharge parfois les sections sans recharger toute la page. Un script peut donc fonctionner sur la boutique publique et échouer dans l’éditeur, ou l’inverse.

Testez :

  • le thème non publié via son lien d’aperçu ;
  • l’éditeur après déplacement ou duplication de la section ;
  • plusieurs modèles ;
  • les produits avec et sans donnée ;
  • les variantes et états épuisés ;
  • mobile, clavier et lecteur d’écran pour les contrôles ;
  • navigation directe et retour arrière ;
  • performance avec les applications actives.

Ajoutez un test de non-régression : ce qui fonctionnait avant doit continuer à fonctionner. Le panier, la recherche, le menu et le checkout méritent toujours une vérification après une modification globale.

Étape 11 : relire la modification

Une revue utile pose des questions simples :

  1. Le code résout-il le besoin écrit ?
  2. Existe-t-il une option native plus simple ?
  3. La portée est-elle limitée au bon composant ?
  4. Les données vides et contenus longs sont-ils gérés ?
  5. La sortie est-elle échappée correctement ?
  6. Le composant est-il accessible ?
  7. Le JavaScript est-il nécessaire et limité ?
  8. Le changement ajoute-t-il une dépendance ?
  9. La suppression est-elle documentée ?
  10. Les tests sont-ils reproductibles ?

Utilisez aussi Theme Check, l’outil de linting de Shopify, dans le flux de développement. Il aide à repérer des problèmes Liquid et des pratiques risquées, mais ne remplace pas la recette fonctionnelle.

Étape 12 : publier et surveiller

Déployez le code vers un thème non publié, partagez l’aperçu et obtenez une validation. Lors de la publication :

  • notez la version approuvée ;
  • terminez une commande de test ;
  • publiez pendant une période surveillée ;
  • contrôlez les erreurs et événements ;
  • gardez l’ancien thème disponible ;
  • revenez en arrière si l’achat est bloqué.

Ne corrigez pas en direct une série de défauts découverts après publication. Revenez à la version stable, reproduisez l’erreur sur la copie et déployez un correctif relu.

Comment préparer les futures mises à jour ?

Les modifications directes ne sont pas toujours fusionnées automatiquement dans une nouvelle version. Conservez un registre :

Fichier ou composant Pourquoi Test Responsable
Section livraison Délai selon produit Valeur présente/absente E-commerce
Snippet prix Règle d’affichage Promo et prix normal Développement
Asset CSS Alignement mobile Trois largeurs Design

Lors d’une mise à jour, comparez d’abord la nouvelle base. Certaines personnalisations deviennent inutiles parce que le thème ajoute une fonction native. Reproduisez uniquement celles qui servent encore un besoin.

Erreurs fréquentes dans le code Liquid

  • Modifier le thème publié sans copie.
  • Coller du code sans comprendre sa portée.
  • Ajouter une clé secrète dans JavaScript.
  • Parcourir de grandes collections dans des boucles imbriquées.
  • Charger un script sur toutes les pages.
  • Utiliser le titre produit comme condition métier.
  • Renommer des identifiants de réglages existants.
  • Oublier les traductions et valeurs vides.
  • Dépendre de classes internes fragiles.
  • Ne pas documenter les fichiers modifiés.
  • Tester uniquement dans l’éditeur.
  • Garder le code d’une application supprimée.

Questions fréquentes

Liquid est-il difficile à apprendre ?

Sa syntaxe de base est accessible, mais un thème complet demande aussi HTML, CSS, JavaScript, accessibilité, performance et compréhension des objets Shopify.

Peut-on casser une boutique avec Liquid ?

Oui, une erreur peut empêcher un composant ou un modèle de se rendre correctement. Travaillez sur une copie et gardez un retour arrière.

Où modifier le CSS d’un thème Shopify ?

Utilisez un réglage natif ou le CSS personnalisé pour un petit ajustement. Pour un composant développé, gardez le style dans un asset versionné et limité à sa portée.

Faut-il utiliser GitHub pour un thème ?

Git devient utile dès que le thème reçoit plusieurs changements, plusieurs intervenants ou des déploiements réguliers. Il fournit comparaison, historique et revue.

Peut-on ajouter une fonction sans application ?

Oui lorsqu’elle appartient à la présentation et peut être développée comme section ou bloc. Une fonction avec données sensibles ou logique serveur demande une architecture différente.

La méthode durable

Une bonne personnalisation Liquid est petite, explicite et testable. Elle utilise la bonne unité, garde les données structurées, limite JavaScript, protège les secrets et prépare les mises à jour. Le but n’est pas d’écrire beaucoup de code, mais de donner à la boutique une capacité qu’elle peut maintenir.

Pour faire relire un thème ou développer un composant, consultez notre service de refonte Shopify, l’offre Agence Shopify au Maroc ou demandez un audit technique.