Bloques HTML: añadir contenido personalizado en cualquier lugar de tu tienda PrestaShop

Actualizado en junio de 2026, los nombres de hooks y la tabla de módulos nativos que aparecen abajo se aplican a PrestaShop 1.7, 8 y 9. En los back offices modernos, las posiciones se gestionan en Diseño → Posiciones.

Tarde o temprano, toda tienda PrestaShop se encuentra con el mismo límite: necesitas una pieza de contenido que el tema nunca fue diseñado para alojar. Una barra de envío gratis sobre la cuadrícula de productos. Un aviso de "envío antes de Navidad si haces tu pedido antes del 19 de diciembre" en la cabecera. Un par de sellos de confianza justo debajo del botón de añadir al carrito. Nada de eso encaja en una descripción de producto, una página CMS o una categoría: debe aparecer en un punto concreto de unas páginas concretas y seguir ahí después de actualizar el tema. Ese es exactamente el trabajo de un bloque HTML personalizado: insertar marcado arbitrario en una posición con nombre dentro de tu tienda sin que tengas que abrir ni un solo archivo de plantilla.

Esta guía trata de esa tarea concreta: colocar HTML personalizado en el lugar correcto de PrestaShop y controlar dónde se muestra. No trata sobre estilos (eso es otra disciplina; consulta CSS y JavaScript personalizados en PrestaShop sin romper las actualizaciones) ni sobre cambiar el nombre de páginas estáticas en tu menú (nombres visibles de páginas CMS cubre ese tema). Aquí nos centramos en la mecánica de la colocación.

Por qué usar bloques HTML en lugar de editar el tema

Podrías abrir themes/your-theme/templates/catalog/product.tpl y codificar ese sello directamente. Hay dos buenas razones para no hacerlo. Primero, la próxima actualización del tema, o una resincronización del tema hijo, puede sobrescribir tu cambio y el sello desaparece sin avisar. Segundo, una edición de plantilla es invisible para cualquiera que no sea desarrollador: no puedes desactivarla durante una oferta de fin de semana ni cambiar el texto desde el back office. Cuando el contenido se crea mediante un módulo como ps_customtext o un módulo dedicado de bloques HTML, se almacena en la base de datos y se renderiza mediante el sistema de hooks de PrestaShop, de modo que sobrevive a las actualizaciones y puedes gestionarlo desde Módulos o Diseño sin tocar archivos. ¿Y eso qué cambia? Que puedes modificar un mensaje promocional a las 9 de la mañana antes de una venta flash y retirarlo a medianoche tú mismo, con cero riesgo para el tema.

Los módulos nativos que ya hacen esto

Antes de comprar nada, conviene saber que PrestaShop incluye tres módulos gratuitos que cubren los casos más habituales. Suelen estar disponibles en instalaciones estándar basadas en Classic y, si faltan, se pueden instalar o activar desde el Gestor de módulos:

Para la mayoría de tareas del tipo "solo necesito un párrafo de HTML en algún sitio", ps_customtext es la respuesta. Ve a Módulos → Gestor de módulos, busca "texto personalizado", haz clic en Configurar, pega tu HTML en el editor (cambia el editor a la vista de fuente/código con el botón <> si quieres un marcado limpio) y guarda. Por defecto se renderiza en displayHome. El inconveniente, y la razón por la que muchos comerciantes acaban necesitando más, es que ps_customtext te da un único bloque editable ligado a un único hook, sin segmentación por página ni programación temporal.

Entender las posiciones: los hooks que deciden qué significa "en cualquier lugar"

"En cualquier lugar" en PrestaShop no significa literalmente cualquier píxel: significa cualquier hook registrado. Un hook es un punto de inserción con nombre que el tema llama al renderizar una página, y un módulo asociado a ese hook deja ahí su salida. Puedes ver todas las posiciones en Diseño → Posiciones (en versiones antiguas: Módulos → Posiciones), donde se lista cada hook y los módulos actualmente trasplantados a él, en orden de renderizado. Estas son las posiciones que importan para el contenido personalizado:

• displayBanner, franja de ancho completo en la parte más alta, por encima de la cabecera. El lugar natural para barras de aviso globales y mensajes de umbral de envío gratis. Se ve antes de hacer scroll, en todas las páginas.
• displayNav1 / displayNav2 / displayTop, dentro de la zona de cabecera (a la izquierda/derecha de la navegación, fila superior de utilidades). Útil para un número de teléfono breve, una nota de país/envío o una línea corta de propuesta de valor.
• displayHome, el cuerpo de la página de inicio, intercalado con carruseles de productos y bloques de categorías. Para propuestas de valor y secciones promocionales destacadas.
• displayProductAdditionalInfo, en la página de producto, justo debajo de la zona de añadir al carrito. Ahí es donde las promesas de entrega, los sellos de garantía y los iconos de métodos de pago hacen su trabajo, porque el comprador los lee justo en el momento en que duda.
• displayFooterBefore / displayFooter, encima y dentro del pie de página, en todas las páginas. Sellos de confianza, llamadas a suscribirse al boletín, enlaces secundarios.
• displayLeftColumn / displayRightColumn, barras laterales (cuando tu tema las tiene). Ayudas para filtros, promociones de categoría, llamadas de soporte.

El movimiento práctico cuando no conoces una posición por su nombre: abre la página que quieres editar y, en Diseño → Posiciones, usa Trasplantar un módulo (el botón "Insertar un módulo"), el desplegable lista todas las posiciones disponibles para hooks y el texto de ayuda describe dónde se renderiza cada una. También puedes arrastrar un módulo hacia arriba o hacia abajo dentro de un hook para controlar si tu bloque queda por encima o por debajo, por ejemplo, del banner de categoría.

Lo que los bloques nativos no pueden hacer, y por qué los comerciantes acuden a un módulo dedicado

El ps_customtext nativo va bien hasta que necesitas cualquiera de las cosas que las tiendas reales terminan necesitando:

• Segmentación por página / por controlador. "Muestra esta guía de tallas solo en la categoría Zapatos, solo en páginas de producto." Los bloques nativos se renderizan en su hook allí donde se dispare; no tienen filtro por página.
• Múltiples ubicaciones y control de activación. Una barra de "Último día para entrega antes de Navidad" debería ser un bloque con nombre que puedas activar, desactivar y mover sin editar una plantilla. La programación por ventana de fechas es una función aparte; no des por hecho que un módulo de bloques la incluye salvo que veas campos de fecha en su back office.
• Múltiples bloques independientes en el mismo hook. Una instancia de ps_customtext es un bloque; gestionar cinco mensajes distintos en cinco posiciones se vuelve incómodo muy rápido.
• Contenido compatible con multitienda. Mostrar contenido de bloque diferente por tienda/idioma cuando el módulo almacena filas por idioma y tienda. La segmentación por grupo de clientes es una capa de reglas aparte, no algo que exponga el bloque de texto estándar.
• Bloques sujetos al consentimiento. Si el bloque contiene seguimiento o medios incrustados, un control por categoría de cookies permite renderizarlo solo cuando el visitante no ha rechazado esa categoría.

Ese es el hueco que cubre un módulo dedicado de bloques HTML: una biblioteca de bloques con nombre, cada uno asignado a uno o varios hooks, con colocación por tipo de página, elección de diseño, contenido multilingüe/por tienda, control por categoría de cookies y, en módulos como MPR HTML Blocks, inyección en plantilla para posiciones donde el tema olvidó exponer un hook útil. ¿Qué consigues con eso? Dejas de editar plantillas y de instalar un módulo nuevo cada vez que marketing quiere un banner; creas un bloque una vez y lo apuntas al hook o zona de página donde debe estar. Si buscas contenido condicionado por la página y una colocación más limpia, esa capacidad es el paso del módulo dedicado más allá del bloque nativo: el mismo principio, pero con múltiples bloques, registros de ubicación e inyección en plantilla gestionados desde el back office.

Escribir el HTML para que sobreviva al editor

Un dolor de cabeza evitable: TinyMCE y el filtrado HTML de PrestaShop pueden reescribir o eliminar marcado no admitido según la configuración: el editor de texto enriquecido "limpia" el marcado que no reconoce, y el filtrado de seguridad puede quitar estilos en línea o reformatear etiquetas al guardar. Si tu bloque desaparece o pierde estilos después de guardar, ese suele ser el motivo. Las soluciones, por orden de preferencia:

Mantén el marcado del bloque sencillo y basado en clases. Este es el tipo de contenido en vista de fuente que sobrevive a la limpieza del editor y deja todos los estilos a la hoja de estilos del tema.

<section class="promo-bar promo-bar--shipping">
  <p><strong>Free delivery this weekend.</strong> Orders over 75 EUR ship free until Monday.</p>
  <p><a href="/delivery">See delivery conditions</a></p>
</section>

Una página de producto de la tienda con contenido en la pestaña Descripción.

• Activa la vista de código fuente del editor (el botón <> / "Herramientas → Código fuente") y pega el marcado ahí, no en el panel WYSIWYG.
• Mantén los estilos en una clase, no en línea. Pon una clase como promo-bar en tu bloque y define .promo-bar en la hoja de estilos personalizada de tu tema: el editor deja intactos los atributos class y obtienes el beneficio de estilos que sobreviven a las actualizaciones descrito en CSS y JavaScript personalizados sin romper las actualizaciones.
• Si un bloque debe ejecutar JavaScript, adjúntalo mediante el hook de recursos adecuado en lugar de pegar una etiqueta <script> en el editor: los scripts en línea dentro de bloques de contenido son frágiles y fáciles de romper al guardar. Ese mecanismo es un tema propio, cubierto en la misma guía de CSS/JS.

Mantén los bloques rápidos y alineados con la marca

Dos disciplinas de diseño deciden si un bloque ayuda o estorba. Primero, haz que encaje con el tema. Usa la misma pila de fuentes, el mismo color de acento y el mismo ritmo de espaciado que ya utiliza tu tema, para que el bloque se perciba como parte de la tienda y no como un añadido pegado después. Segundo, sé conciso. Un banner es una frase más una llamada a la acción; una franja de confianza son iconos reconocibles, no un párrafo. El valor de un bloque está en lo que aporta en el momento oportuno, no en cuánto consigues meter dentro.

Sobre rendimiento: cada bloque añade marcado, y los bloques cargados de imágenes suelen ser los que más peso suman. Sirve imágenes comprimidas y del tamaño correcto, apóyate en CSS para maquetación y efectos en lugar de cargar una biblioteca, y si tienes varios bloques activos a la vez, revisa su efecto combinado en el panel de red del navegador. La velocidad de página es una de las señales que Google tiene en cuenta, así que una pila de banners pesados puede trabajar en silencio contra el resto de tu optimización on-page. Mantén el marcado ligero y el beneficio seguirá siendo real.

Guía rápida de decisión

La razón por la que merece la pena dominar los bloques HTML es la misma con la que empezamos: permiten que el propietario de una tienda, no un desarrollador, ponga el mensaje adecuado en el lugar adecuado y en el momento adecuado, y lo retire con la misma facilidad, sin poner nunca en riesgo el tema. Aprende los nombres de las posiciones, apóyate en los bloques nativos gratuitos para las tareas sencillas, recurre a un módulo dedicado en cuanto necesites múltiples bloques, colocación según la página o inyección segura para el tema, y mantén cada bloque ligero y alineado con la marca. Hazlo así y una instalación estándar de PrestaShop empezará a hablar con la voz propia de tu tienda justo en los momentos que impulsan una venta.

Preguntas frecuentes

¿"En cualquier lugar" significa realmente cualquier punto de la página?

No literalmente: significa cualquier hook registrado. Un hook es un punto de inserción con nombre que el tema llama al renderizar una página, y la salida de tu bloque aparece allí donde se dispara ese hook. Puedes ver todas las posiciones disponibles en Diseño → Posiciones. Si el punto exacto que quieres no tiene hook, ahí es donde la función de inyección en plantilla de un módulo dedicado se gana su sitio, porque puede apuntar a posiciones que el tema nunca expuso como hook.

¿Qué módulo nativo debería usar para un bloque HTML sencillo?

Para un párrafo de HTML, usa ps_customtext: busca "texto personalizado" en el Gestor de módulos, haz clic en Configurar y pega tu marcado (usa la vista de fuente <> para un código limpio). Para una imagen de banner con enlace en la parte superior de cada página, usa ps_banner; para listas de enlaces en el pie de página, ps_linklist. Los tres se incluyen gratis en instalaciones basadas en Classic y guardan el contenido en la base de datos, por lo que sobrevive a las actualizaciones del tema.

¿Dónde coloco un sello de confianza o una promesa de entrega en la página de producto?

En el hook displayProductAdditionalInfo, que se renderiza justo debajo de la zona de añadir al carrito. Ahí es donde los sellos de garantía, las promesas de entrega y los iconos de métodos de pago hacen su trabajo, porque el comprador los lee justo en el momento en que duda. Engancha tu bloque ahí mediante Diseño → Posiciones → Trasplantar un módulo en lugar de editar product.tpl.

Mi bloque perdió los estilos o desapareció después de guardarlo. ¿Por qué?

Casi siempre por TinyMCE o por el filtrado HTML de PrestaShop "limpiando" el marcado al guardar: el editor reescribe etiquetas que no reconoce y el filtrado de seguridad puede eliminar estilos en línea. La solución: pega en la vista de código fuente del editor, no en el panel WYSIWYG, y mantén los estilos en una clase CSS (define .promo-bar en la hoja de estilos de tu tema) en lugar de ponerlos en línea. El editor deja intactos los atributos class.

¿Cuándo se me queda corto ps_customtext y necesito un módulo dedicado?

En cuanto necesites cualquiera de estas cosas: segmentación por página o por controlador (por ejemplo, una guía de tallas solo en la categoría Zapatos), múltiples bloques independientes gestionados de forma centralizada, contenido de bloque multitienda o multilingüe, control por consentimiento de cookies para bloques con seguimiento, o colocación en un punto para el que el tema no expone ningún hook. ps_customtext te da un bloque ligado a un hook sin filtro por página: suficiente hasta que aparecen esas necesidades.

¿Puedo ejecutar JavaScript dentro de un bloque HTML?

No pegues una etiqueta <script> sin procesar en el editor: los scripts en línea dentro de bloques de contenido son frágiles, fáciles de romper al guardar y evitan la gestión de recursos de PrestaShop. Adjunta el comportamiento como archivo .js externo mediante el hook de recursos adecuado, exactamente como se explica en CSS y JavaScript personalizados sin romper las actualizaciones. Mantén el bloque en marcado y una clase CSS.

¿Demasiados bloques pueden ralentizar la tienda?

Pueden hacerlo: cada bloque añade marcado, y los bloques cargados de imágenes suelen ser los que más peso suman. Sirve imágenes comprimidas y del tamaño correcto, apóyate en CSS para la maquetación en lugar de cargar una biblioteca, y si hay varios bloques activos a la vez, revisa su coste combinado en el panel de red del navegador. La velocidad de página es una señal que Google tiene en cuenta, así que una pila de banners pesados puede debilitar en silencio el resto de tu trabajo on-page.

Guías relacionadas

• CSS y JavaScript personalizados en PrestaShop sin romper las actualizaciones
• Nombres visibles de páginas CMS: mejor navegación para tus páginas estáticas
• Temas hijo en PrestaShop: por qué nunca debes editar el tema padre