Comment supprimer le code inutilisé dans Shopify (2026)

À retenir

• Le code inutilisé s’accumule à cause des applications désinstallées, d’anciennes personnalisations du thème et de sections abandonnées.
• Utilisez Shopify Theme Inspector (extension Chrome) pour identifier les assets qui sont les plus lents à charger.
• Trouvez les snippets et sections orphelins en cherchant leurs noms de fichiers dans les fichiers Liquid de votre thème.
• Travaillez toujours sur un thème dupliqué. Supprimer le mauvais code peut casser votre boutique.

Chaque fois que vous installez une application, essayez une personnalisation ou mettez à jour votre thème, du code s’accumule. Du CSS mort. Des balises script pour des applications que vous avez désinstallées il y a deux ans. Des fichiers de snippet qui ne rendent plus rien. Au fil du temps, ce code inutilisé ralentit votre boutique sans apporter la moindre valeur.

Faire le ménage est l’une des améliorations de performance les plus efficaces que vous puissiez faire — et ça ne vous coûte rien d’autre que du temps.

Comment supprimer du code dans Shopify ?

Allez dans Boutique en ligne → Thèmes → Actions → Modifier le code. Cela ouvre l’éditeur de code où vous pouvez voir tous les fichiers du thème. Les fichiers peuvent y être modifiés ou supprimés individuellement.

Rappel crucial : dupliquez votre thème avant de toucher à la moindre ligne de code. Boutique en ligne → Thèmes → menu avec les trois petits points → Dupliquer.

Étape 1 — Identifier ce qui est lent avec Theme Inspector

Le Shopify Theme Inspector est une extension Chrome gratuite qui montre quels templates Liquid et assets prennent le plus de temps à s’afficher.

Comment l’utiliser :

1. Installez l’extension depuis le Chrome Web Store
2. Ouvrez votre boutique et appuyez sur F12 pour ouvrir les Chrome DevTools
3. Allez sur l’onglet “Theme Inspector”
4. Naviguez dans votre boutique — l’extension affiche le temps de rendu par template

Cela vous indique quelles pages et quels assets ralentissent le plus le temps de chargement. Concentrez vos efforts de nettoyage sur les pires élèves.

Pour le JavaScript plus spécifiquement : ouvrez les Chrome DevTools → l’onglet Network (Réseau) → filtrez par JS → rechargez la page. Triez par Size (Taille) pour trouver les scripts les plus lourds. Y en a-t-il qui proviennent d’applications que vous n’utilisez plus ?

Article lié : Minifier le CSS et le JavaScript sur Shopify.

Comment supprimer le JavaScript inutilisé dans Shopify

Les restes de scripts d’applications dans theme.liquid. C’est la source la plus courante de JavaScript inutilisé. Ouvrez theme.liquid dans l’éditeur de code et cherchez les balises script faisant référence à des domaines tiers d’applications que vous avez désinstallées.

<!-- Exemple de script restant d'une application de popup désinstallée -->
<script src="https://privy.com/scripts/privy.js"></script>

Supprimez toute la balise <script> si l’application n’est plus installée.

Article lié : Supprimer le code restant des applications Shopify.

Les fichiers JavaScript inutilisés dans assets/. Ouvrez le dossier assets/ dans l’éditeur de code. Cherchez les fichiers .js dont les noms font référence à des applications ou des fonctionnalités que vous n’utilisez plus. Cherchez le nom du fichier dans les fichiers Liquid de votre thème — si rien ne le rend ou ne l’inclut, il peut être supprimé.

Les blocs de sections JavaScript. Si vous avez supprimé une section de tous vos templates mais que vous avez laissé le fichier de la section, son bloc {% javascript %} se compile toujours dans le bundle JavaScript principal de votre thème. Supprimez complètement les fichiers de section inutilisés.

Comment supprimer le CSS inutilisé

Les feuilles de style inutilisées dans assets/. Cherchez les fichiers .css provenant d’anciennes applications ou personnalisations. Même méthode : cherchez le nom du fichier dans les fichiers Liquid pour vérifier si quelque chose s’en sert.

Le CSS mort dans base.css. Ce sont les règles CSS écrites pour des sections ou des éléments qui n’existent plus. C’est plus difficile à auditer de manière automatique. Des outils comme PurgeCSS (ce n’est pas un outil natif de Shopify, mais il est très utile pour l’analyse) peuvent identifier les sélecteurs CSS qui ne correspondent à aucun HTML sur vos pages en ligne.

L’approche pratique : concentrez-vous sur la suppression de blocs CSS clairement nommés et manifestement obsolètes, plutôt que d’essayer d’auditer chaque règle dans base.css. Les plus grands gains viennent de la suppression de feuilles de style entières plutôt que de règles individuelles.

Comment trouver et supprimer les snippets orphelins

Un snippet est dit “orphelin” si aucun template, section ou autre snippet ne le rend.

Trouver les snippets orphelins :

1. Allez dans le dossier snippets/ via l’éditeur de code
2. Pour chaque fichier suspect (en particulier ceux portant des noms d’applications), cherchez son nom de fichier à travers tout votre thème
3. Cherchez {% render 'snippet-name' %} ou {% include 'snippet-name' %}
4. S’il n’y a aucun résultat : le snippet est orphelin et peut être supprimé

Article lié : Corriger les problèmes d’affichage après l’installation d’apps Shopify.

Les snippets orphelins fréquents : les fichiers portant le nom d’applications (loox-widget.liquid, privy-form.liquid), les anciens snippets de fonctionnalités de précédentes personnalisations du thème, et les versions dupliquées de snippets.

Comment trouver les sections inutilisées

Les sections sont utilisées si elles sont référencées dans le fichier JSON d’un template ou rendues par une autre section.

Vérifier les fichiers de template :

1. Ouvrez le dossier templates/
2. Chaque fichier de template .json liste les sections qui apparaissent sur ce type de page
3. Si un fichier de section existe mais n’est listé dans aucun template, c’est qu’il est inutilisé (bien qu’il reste potentiellement accessible via “Ajouter une section” dans l’Éditeur de thème)

Pour les sections qui ont été ajoutées à une page une seule fois puis retirées, elles peuvent ne plus apparaître sur aucune page mais leur fichier existe toujours. Vous pouvez les supprimer sans danger.

L’ordre de priorité pour le nettoyage

Le code inutilisé n’a pas toujours le même impact sur les performances. Priorisez de la manière suivante :

1. Les scripts externes (les balises scripts d’apps dans theme.liquid) — chacun d’eux représente une requête HTTP vers un serveur externe
2. Les gros fichiers JavaScript dans assets/ — surtout tout ce qui dépasse 50 Ko
3. Les feuilles de style CSS inutilisées — particulièrement celles chargées sur chaque page via theme.liquid
4. Les snippets et sections orphelins — un impact moindre mais une bonne pratique de propreté

Article lié : Accélérer un thème Shopify.

Utiliser le theme check intégré de Shopify

Les outils de développement de thèmes de Shopify incluent Theme Check, qui signale divers problèmes de code, notamment les variables inutilisées et la syntaxe Liquid dépréciée. Pour les e-commerçants (contrairement aux développeurs), l’accès est plus complexe car c’est avant tout un outil en ligne de commande (CLI).

L’éditeur de code de Shopify affiche tout de même quelques alertes de base, et le Theme Inspector gère l’aspect performance bien suffisamment pour la plupart des missions de nettoyage.