# Banner de Categoría: guía completa > Presentación y requisitos Banner de Categoría inserta visuales en la cuadrícula de productos de tus páginas de categoría, en la posición que elijas. Indicas la categoría, el número de producto… - Página: - Idioma: es - Actualizado el: 2026-10-15 - Otros idiomas: [fr](https://www.datafirefly.com/documentation/datafireflycategorybanner/index.md), [en](https://www.datafirefly.com/en/documentation/datafireflycategorybanner/index.md), [de](https://www.datafirefly.com/de/documentation/datafireflycategorybanner/index.md), [it](https://www.datafirefly.com/it/documentation/datafireflycategorybanner/index.md), [pl](https://www.datafirefly.com/pl/documentation/datafireflycategorybanner/index.md), [nl](https://www.datafirefly.com/nl/documentation/datafireflycategorybanner/index.md), [pt](https://www.datafirefly.com/pt/documentation/datafireflycategorybanner/index.md) - Índice: ## Presentación y requisitos Banner de Categoría inserta visuales en la cuadrícula de productos de tus páginas de categoría, en la posición que elijas. Indicas la categoría, el número de producto tras el cual debe aparecer el banner y la imagen que se usará en cada idioma. El módulo se encarga del resto, incluso después de un filtro por facetas o un cambio de página. - Compatible con PrestaShop 8.0 a 9.x: tema Classic y temas derivados, listados de Creative Elements, temas con cuadrícula CSS. - PHP 7.4 a 8.3. - Multitienda y multiidioma (fr, en, es, de, it, nl, pl, pt). - Sin overrides, sin cambios de plantilla, sin tareas CRON. - El marcado del banner se genera en el servidor con una plantilla Smarty; el JavaScript solo lo inserta en el lugar correcto, sin jQuery ni bibliotecas de terceros. Las imágenes subidas se guardan en `/img/datafireflycategorybanner/`, fuera de la carpeta del módulo. Sobreviven por tanto a las actualizaciones del módulo. ## Instalación 1. Descarga el archivo `datafireflycategorybanner.zip` desde tu cuenta de cliente. 2. En el back office, abre **Módulos > Gestor de módulos**. 3. Haz clic en **Subir un módulo** y suelta el archivo. 4. Haz clic en **Configurar** para acceder a la lista de banners. Al instalarse, el módulo crea sus tres tablas (banners, traducciones, asociación de tiendas), crea la carpeta `/img/datafireflycategorybanner/` y registra sus hooks. ## Crear un banner Desde la página de configuración, haz clic en **Añadir un nuevo banner**. El formulario agrupa los siguientes ajustes. ### Segmentación - **Categoría**: la categoría en la que aparece el banner. La lista refleja el árbol de la tienda, con las categorías desactivadas señaladas. - **Aplicar a las subcategorías**: extiende el banner a todas las subcategorías de la categoría elegida, sea cual sea su profundidad. - **Después del producto número**: el banner se inserta tras ese producto del listado. El valor 4 coloca el banner después del cuarto producto mostrado. ### Apariencia y enlace - **Enlace del banner**: URL de destino, absoluta (`https://…`) o que empiece por una barra (`/novedades`). Déjalo vacío para un banner no clicable. - **Ancho en la cuadrícula**: número de columnas de producto que ocupa el banner, de 1 a 4, o **Fila completa**. En las pantallas que muestran menos columnas, el ancho se reduce automáticamente. - **Alto en la cuadrícula**: número de filas de producto que ocupa el banner, de 1 a 3. Disponible en los listados con cuadrícula CSS (Creative Elements, la mayoría de los temas recientes). - **Visualización de la imagen**: _Rellenar el área del banner_ recorta la imagen al tamaño de la celda, _Conservar las proporciones de la imagen_ la muestra completa. - **Clase CSS**: clases adicionales aplicadas a la celda del banner. Déjalo vacío para reutilizar las clases de las celdas de producto de tu tema. Con un ancho y un alto de 1, una clase de tamaño de tu tema (por ejemplo una que define `grid-area`) se sigue aplicando. - **CSS personalizado**: declaraciones aplicadas solo a este banner, por ejemplo `border-radius: 12px; padding: 10px;`. ### Programación y estado - **Fecha de inicio** y **Fecha de fin**: ventana de visualización, con formato `AAAA-MM-DD HH:MM:SS`. Un campo vacío significa que no hay límite por ese lado. - **Activo**: muestra o suspende el banner sin borrarlo. - **Asociación de tiendas**: en multitienda, marca las tiendas correspondientes. ### Imágenes por idioma Los campos **Imagen del banner** y **Texto alternativo** existen para cada idioma activo. Las pestañas de idioma situadas en la parte superior del formulario muestran los campos del idioma seleccionado. Cuando ya hay una imagen, aparece una vista previa junto a un interruptor **Eliminar la imagen** que solo afecta a ese idioma. Formatos aceptados: JPG, PNG, GIF, WebP y SVG, hasta 4 MB. Un ancho de 1200 px encaja en la mayoría de las cuadrículas. ## Cómo se calcula la posición La posición se expresa en número de productos y se aplica a cada página del listado. Un banner configurado en 4 aparece tras el cuarto producto de la página actual, tanto si el visitante está en la página 1 como en la 3. Varios banners pueden apuntar a la misma categoría, cada uno en su posición. Cuando dos banners comparten posición, se insertan uno tras otro en el orden de guardado. Si la posición supera el número de productos mostrados en la página, el banner simplemente se omite en esa página, sin desplazar a los demás. Por defecto, el banner ocupa el lugar de una celda de producto. Los campos **Ancho en la cuadrícula** y **Alto en la cuadrícula** lo amplían, como se explica a continuación. ## Tamaño del banner en la cuadrícula Cada banner ocupa un bloque de celdas de producto: 1 × 1 por defecto, hasta 4 columnas por 3 filas, o la fila completa. Los productos que siguen al banner ocupan las celdas libres, así que la cuadrícula no deja huecos. - **Listados con cuadrícula CSS** (Creative Elements, la mayoría de los temas recientes): se aplican el ancho y el alto. Un banner de 2 × 2 colocado después del 4.º producto de una cuadrícula de cuatro columnas ocupa las dos primeras columnas de las filas 2 y 3, y los productos 5 a 8 se colocan a su lado. - **Filas Bootstrap** (tema Classic): se aplica el ancho, como fracción de la fila. El alto sigue al de la imagen. - **Pantallas pequeñas**: el ancho se limita al número de columnas mostradas. Un banner de cuatro columnas en una cuadrícula móvil de dos columnas pasa a fila completa. En modo relleno, la imagen cubre toda el área, toma la altura de los productos contiguos y se recorta desde el centro. Un banner de fila completa siempre conserva sus proporciones, ya que no tiene ningún producto al lado que le dé altura: usa una imagen horizontal. Para un banner de 2 × 2 en modo relleno, prepara una imagen algo más alta que ancha y deja el mensaje principal en el centro, ya que los bordes pueden recortarse. ## Programar una campaña Indica una fecha de inicio y una fecha de fin para que un banner aparezca y desaparezca solo. Es la herramienta adecuada para preparar las rebajas, el Black Friday o una campaña de fin de año con semanas de antelación. - Solo fecha de inicio: el banner aparece en esa fecha y permanece visible después. - Solo fecha de fin: el banner se muestra de inmediato y se detiene en esa fecha. - Ambas fechas: el banner solo es visible dentro de esa ventana. - Sin fechas: el banner es permanente. Las fechas se comparan con la hora del servidor de tu tienda, no con la del visitante. ## Cubrir un árbol completo La opción **Aplicar a las subcategorías** evita recrear el mismo banner en cada sección. Colocado en una categoría padre, el banner se muestra en esa categoría y en todas sus descendientes. La resolución se apoya en el árbol anidado nativo de PrestaShop (columnas `nleft` y `nright`), sin consultas adicionales por página. Si mueves categorías en el árbol, PrestaShop recalcula esos valores y el alcance se ajusta automáticamente. ## Imágenes e idiomas Cada banner acepta un visual y un texto alternativo por idioma, lo que permite adaptar un mensaje o un precio a cada mercado. Si un idioma no ha recibido su propio visual, el módulo muestra el del idioma por defecto de la tienda en lugar de ocultar el banner. Las dimensiones de la imagen se leen al subirla y se escriben en los atributos `width` y `height` del HTML, lo que evita el desplazamiento del diseño durante la carga. Los archivos se renombran con un sufijo aleatorio y se guardan en `/img/datafireflycategorybanner/`. El texto alternativo lo leen los motores de búsqueda y los lectores de pantalla. Describe el contenido del visual en lugar de repetir el nombre de la categoría. ## Multitienda Cuando la funcionalidad multitienda está activa, el formulario muestra un bloque **Asociación de tiendas**. Un banner solo aparece en las tiendas marcadas, y la lista del back office solo muestra los banners visibles en el contexto de tienda actual. Si no se marca ninguna tienda, el módulo asocia el banner al contexto actual para no crear nunca un banner huérfano. ## Filtros por facetas, ordenación y paginación En PrestaShop 8 y 9, los filtros por facetas, la ordenación y la paginación recargan el listado por AJAX sin recargar la página. El módulo vigila el listado: en cuanto aparecen nuevas celdas de producto, tras un filtro, un cambio de página, un botón «cargar más» o el scroll infinito, vuelve a colocar los banners en sus posiciones. También escucha el evento `updateProductList` de PrestaShop. La cuadrícula de productos se localiza a partir de los propios productos (marcadores `data-id-product` y `product-miniature`), no de las clases de un tema concreto. Esto cubre el tema Classic, los listados de Creative Elements y la mayoría de los temas a medida. El CSS y el JavaScript se cargan solo en las páginas de categoría, y únicamente cuando la categoría actual tiene al menos un banner activo y mostrable. ## Ajustes: selector de la cuadrícula de productos Debajo de la lista de banners, el panel **Ajustes** contiene un único campo, **Selector de la cuadrícula de productos**. Déjalo vacío: la cuadrícula se detecta automáticamente. Solo si los banners no aparecen nunca en un tema con una estructura poco habitual, introduce el selector CSS del elemento que contiene directamente las celdas de producto, por ejemplo `#js-product-list .products` o `.ce-products`. Cuando no encuentra la cuadrícula, el módulo muestra un aviso `[DataFirefly Category Banner]` en la consola del navegador. ## Actualizar a la versión 1.2.0 Instala el archivo 1.2.0 sobre la versión anterior desde el gestor de módulos. El script de actualización añade las columnas de tamaño y de visualización de la imagen, además del ajuste del selector de cuadrícula. Los banners existentes conservan su aspecto actual: 1 × 1, proporciones de la imagen conservadas. Edita un banner para darle otro tamaño o pasarlo a modo relleno. El script del front cambia en esta versión. Tras la actualización, vacía la caché de PrestaShop y la de cualquier módulo de rendimiento (CCC, caché de páginas, minificación); si no, se seguirá sirviendo el script anterior. ## Actualizar desde la versión 1.0.0 Instala simplemente el nuevo archivo sobre el anterior desde el gestor de módulos. El script de actualización se encarga de: - añadir las columnas de alcance, programación y dimensiones de imagen; - crear la tabla de asociación de tiendas y recuperar en ella la tienda original de cada banner; - mover las imágenes existentes de `views/img/banners/` a `/img/datafireflycategorybanner/` y leer sus dimensiones; - retirar un hook que ha dejado de ser necesario. Tus banners, sus posiciones y sus visuales se conservan. ## FAQ y resolución de problemas ### El banner no aparece en la página de categoría Comprueba en este orden: el banner está activo; la fecha de hoy está dentro de la ventana de programación; la categoría apuntada es la que se está consultando, o el alcance a subcategorías está activado; el idioma mostrado tiene imagen, o la tiene el idioma por defecto; en multitienda, la tienda actual está marcada. Por último, vacía la caché de PrestaShop. En un listado creado con Creative Elements u otro constructor de páginas, comprueba que el módulo está en la versión 1.2.0 o posterior: las versiones anteriores solo reconocían la cuadrícula del tema Classic. Abre después la consola del navegador: un aviso `[DataFirefly Category Banner]` indica que no se encontró la cuadrícula, consulta la sección Ajustes. ### El banner aparece en el sitio equivocado La posición cuenta los productos de la página actual. Si tu listado muestra 12 productos por página, un banner en la posición 20 no aparecerá en ninguna. Reduce el valor o aumenta el número de productos por página. ### El banner rompe el diseño de la cuadrícula Ajusta el tamaño con los campos **Ancho en la cuadrícula** y **Alto en la cuadrícula** en lugar de con clases de cuadrícula, y vacía el campo **Clase CSS** salvo si tu tema ofrece una clase de tamaño. Evita mezclar clases de sistemas de cuadrícula distintos. ### El banner desaparece tras filtrar Desde la versión 1.2.0, el módulo vuelve a insertar los banners en cuanto aparecen nuevas celdas de producto en el listado, sea cual sea el módulo de filtros. Si el banner sigue desapareciendo, abre la consola del navegador: un aviso `[DataFirefly Category Banner]` indica que la cuadrícula no se encontró tras la actualización. Indica entonces el selector de la cuadrícula en el panel Ajustes y contacta con el soporte si el problema persiste. ### La imagen no se sube El módulo acepta archivos JPG, PNG, GIF, WebP y SVG de hasta 4 MB. Comprueba también que `/img/datafireflycategorybanner/` tiene permisos de escritura y que las directivas `upload_max_filesize` y `post_max_size` de PHP superan el peso del archivo. ### El enlace del banner es rechazado Solo se aceptan URL que empiecen por `http://`, `https://` o por una barra. Es una protección contra la inyección de direcciones `javascript:` o `data:`. ### ¿Qué ocurre al desinstalar? El módulo elimina sus tablas y la carpeta `/img/datafireflycategorybanner/` con los visuales que contiene. Haz copia de tus imágenes si piensas reinstalarlo más adelante.