Tout ce que vous voudriez savoir avant d'installer.
Un regard détaillé sur le fonctionnement de Custom Code Manager — Snippets CSS / JS pour Shopware 6, pourquoi nous l'avons conçu ainsi, et la réflexion derrière les fonctionnalités ci-dessus.
Pourquoi un gestionnaire de code custom dédié
Dans la vraie vie d'une boutique Shopware, les besoins de personnalisation graphique ou comportementale s'accumulent : une bannière promo le temps des soldes, un badge Nouveau sur certains produits, un événement GTM enrichi pour mieux mesurer les conversions, un dark mode opt-in pour les utilisateurs qui le réclament, un A/B test rapide sur la couleur du bouton d'ajout au panier. La pratique standard consiste à modifier le thème en SSH, ou à empiler des plugins tiers qui chacun injectent leur petit fichier CSS supplémentaire dans la page. Le résultat ? Des fichiers de thème impossible à maintenir, des modifications oubliées au moment de la mise à jour, des temps de chargement qui s'allongent à cause des requêtes additionnelles. Custom Code Manager apporte une réponse simple : un seul plugin, une interface dédiée, et toutes vos personnalisations groupées par thématique au même endroit, injectées directement dans le bundle natif Shopware.
La magie de l'injection directe dans la compilation
La plupart des plugins qui permettent d'ajouter du CSS personnalisé fonctionnent en chargeant un fichier supplémentaire dans la balise head du storefront. C'est simple à implémenter mais ça coûte une requête HTTP de plus par visiteur, et ça contourne complètement la chaîne d'optimisation Shopware (concaténation, minification, fingerprinting de cache). Custom Code Manager prend l'inverse : il s'abonne aux événements de compilation du thème (ThemeCompilerEnrichScssVariablesEvent, ThemeCompilerConcatenatedStylesEvent, ThemeCompilerConcatenatedScriptsEvent) et appende votre code directement au bundle CSS et JavaScript principal généré par Shopware. Conséquences concrètes : zéro requête supplémentaire pour le visiteur, votre SCSS bénéficie automatiquement des variables et mixins du thème actif, et toute la chaîne de cache navigateur fonctionne exactement comme avec le code natif du thème.
Conteneurs, snippets, priorité : le modèle mental
Le plugin s'organise en deux niveaux. Un conteneur est un regroupement logique : Promo été 2026, GTM analytics, Dark mode opt-in, A/B test bouton CTA, etc. Chaque conteneur peut contenir un ou plusieurs snippets, et chaque snippet est soit du SCSS soit du JavaScript. À la fois les conteneurs et les snippets ont leur propre priorité de chargement (un entier, plus élevé pour passer en dernier dans le bundle) et leur propre toggle actif inactif. Vous pouvez donc temporairement désactiver un conteneur entier pendant une période, ou désactiver un snippet précis sans perdre son code. Et la portée multi-canal permet de réserver un conteneur à certaines boutiques de votre instance Shopware uniquement.
Historique de versions et safe mode : la sécurité du fil rouge
Dès qu'un snippet est enregistré, une version est automatiquement créée. Le plugin conserve les 5 dernières versions par snippet, ce qui couvre largement les besoins de retour en arrière en cas de fausse manipulation. La modale historique vous permet de comparer rapidement et de restaurer une version précédente en un clic. Et pour les moments de panique où une modification mal testée fait crasher quelque chose en production, le safe mode global (un simple toggle dans la configuration plugin Shopware) désactive instantanément tous les conteneurs sans avoir à les modifier un par un. Il suffit ensuite de recompiler le thème pour que le storefront retrouve son état d'avant. Ce filet de sécurité fait toute la différence quand on est seul à 22h sur un incident.
Bibliothèque de presets pour démarrer plus vite
Pour les usages les plus courants, pas besoin de réinventer la roue. Le plugin embarque une bibliothèque de 8 presets prêts à installer en un clic : un header collant qui se transforme au scroll, un bouton retour en haut, un re-skin de la bannière cookies native pour qu'elle s'aligne sur votre charte, un badge Nouveau sur les produits récents, une barre de livraison gratuite avec barre de progression, un look bouton arrondi sur tout le site, un événement GTM DOM ready pour amorcer vos data layers, et un effet fade-in progressif sur les éléments au scroll. Cliquez sur Installer, le conteneur et les snippets sont créés, vous recompilez, c'est en ligne.
Validation, import export, multi-environnement
Chaque snippet peut être validé syntaxiquement avant enregistrement, ce qui évite de pousser du code qui casserait la compilation du thème. Le SCSS est compilé à blanc avec les vraies variables du thème pour détecter les références cassées, et le JavaScript subit un check d'équilibre des accolades, parenthèses et crochets après strip des chaînes et commentaires. Pour faire transiter vos snippets entre vos environnements de développement, de recette et de production, le bouton Exporter génère un fichier JSON de la sélection (un ou plusieurs conteneurs avec tous leurs snippets), que vous réimportez de l'autre côté. Pratique aussi pour partager une bibliothèque interne entre plusieurs boutiques de votre groupe.
Ce que le plugin ne fait pas
Custom Code Manager est volontairement centré sur le code CSS et JavaScript injecté dans la compilation du thème storefront. Il ne touche pas au PHP, ne modifie pas les templates Twig, ne s'occupe pas du SEO méta, ne génère pas de balises script dans le head du storefront, et ne fonctionne pas sur Shopware Cloud (la version SaaS hébergée par Shopware, qui ne permet pas l'installation de plugins serveur). Pour ces besoins, d'autres plugins de la gamme DataFirefly couvrent ces périmètres. Cette focalisation est volontaire : un plugin qui fait une chose, et qui la fait bien.
Il n’y a pas encore d’avis.