Todo lo que querrías saber antes de instalar.
Una mirada detallada a cómo funciona Custom Code Manager — Fragmentos CSS / JS para Shopware 6, por qué lo construimos así y la lógica detrás de las características anteriores.
Por qué un gestor de código personalizado dedicado
En la vida real de una tienda Shopware, las necesidades de personalización gráfica o comportamental se acumulan: una banner promocional durante las rebajas, un badge Nuevo en ciertos productos, un evento GTM enriquecido para medir mejor las conversiones, un modo oscuro opt-in para los usuarios que lo piden, un A/B test rápido sobre el color del botón añadir al carrito. La práctica estándar consiste en editar el tema por SSH, o apilar plugins de terceros que cada uno inyecta su propio archivo CSS adicional en la página. ¿El resultado? Archivos de tema imposibles de mantener, modificaciones olvidadas en el momento de la actualización, tiempos de carga que se alargan a causa de las peticiones adicionales. Custom Code Manager aporta una respuesta sencilla: un solo plugin, una interfaz dedicada, todas tus personalizaciones agrupadas por temática en un mismo sitio, inyectadas directamente en el bundle nativo Shopware.
La magia de la inyección directa en la compilación
La mayoría de plugins que permiten añadir CSS personalizado funcionan cargando un archivo adicional en la etiqueta head del storefront. Es simple de implementar pero cuesta una petición HTTP más por visitante, y evita completamente la cadena de optimización Shopware (concatenación, minificación, fingerprinting de caché). Custom Code Manager toma el camino opuesto: se suscribe a los events de compilación del tema (ThemeCompilerEnrichScssVariablesEvent, ThemeCompilerConcatenatedStylesEvent, ThemeCompilerConcatenatedScriptsEvent) y añade tu código directamente al bundle CSS y JavaScript principal generado por Shopware. Consecuencias concretas: cero peticiones adicionales para el visitante, tu SCSS se beneficia automáticamente de las variables y mixins del tema activo, y toda la cadena de caché del navegador funciona exactamente como con el código nativo del tema.
Contenedores, fragmentos, prioridad: el modelo mental
El plugin se organiza en dos niveles. Un contenedor es una agrupación lógica: Promo verano 2026, GTM analíticas, Modo oscuro opt-in, A/B test botón CTA, etc. Cada contenedor puede contener uno o varios fragmentos, y cada fragmento es SCSS o JavaScript. Tanto contenedores como fragmentos tienen su propia prioridad de carga (un entero, más alto para inyectarse más tarde en el bundle) y su propio interruptor activo inactivo. Puedes por tanto desactivar temporalmente un contenedor entero durante un período, o desactivar un fragmento concreto sin perder su código. Y el alcance multicanal te permite reservar un contenedor a algunas tiendas de tu instancia Shopware únicamente.
Historial de versiones y modo seguro: la red de seguridad
En cuanto se guarda un fragmento, se crea automáticamente una versión. El plugin conserva las 5 últimas versiones por fragmento, lo que cubre ampliamente las necesidades de rollback en caso de error. El modal historial permite comparar rápidamente y restaurar una versión anterior con un clic. Y para esos momentos de pánico en los que un cambio mal probado rompe algo en producción, el modo seguro global (un simple interruptor en la configuración del plugin Shopware) desactiva al instante todos los contenedores sin tener que editarlos uno a uno. Basta con recompilar el tema y el storefront vuelve a su estado previo. Esta red de seguridad marca toda la diferencia cuando estás solo a las 22h en un incidente.
Biblioteca de plantillas para empezar más rápido
Para los casos de uso más comunes, no hay que reinventar la rueda. El plugin trae una biblioteca de 8 plantillas listas para instalar con un clic: un header pegajoso que se transforma al scroll, un botón volver arriba, un re-skin del banner cookies nativo para alinearlo con tu identidad gráfica, un badge Nuevo en los productos recientes, una barra de envío gratuito con barra de progreso, un look de botones redondeados en todo el sitio, un evento GTM DOM ready para arrancar tus data layers y un efecto fade-in progresivo en los elementos al scroll. Clic en Instalar, el contenedor y los fragmentos se crean, recompilas, está en línea.
Validación, importación exportación, multientorno
Cada fragmento puede validarse sintácticamente antes de guardar, lo que evita meter código que rompería la compilación del tema. El SCSS se compila en blanco con las variables reales del tema para detectar referencias rotas, y el JavaScript pasa por un check de equilibrio de llaves, paréntesis y corchetes después de limpiar cadenas y comentarios. Para mover tus fragmentos entre entornos de desarrollo, preproducción y producción, el botón Exportar genera un archivo JSON de la selección (uno o varios contenedores con todos sus fragmentos), que reimportas al otro lado. Útil también para compartir una biblioteca interna entre varias tiendas de tu grupo.
Lo que el plugin no hace
Custom Code Manager se centra deliberadamente en código CSS y JavaScript inyectado en la compilación del tema storefront. No toca PHP, no modifica plantillas Twig, no se ocupa de meta SEO, no genera etiquetas script en el head del storefront, y no funciona en Shopware Cloud (la versión SaaS alojada por Shopware, que no permite instalar plugins de servidor). Para esas necesidades, otros plugins de la gama DataFirefly cubren esos perímetros. Este enfoque es deliberado: un plugin, una tarea, hecha bien.
No hay valoraciones aún.