Botón para volver arriba: una pequeña mejora de UX con un impacto sorprendente
Actualizado en junio de 2026, válido para PrestaShop 1.7 hasta 9. El tema Classic sigue sin incluir un botón para volver arriba; aquí nos centramos en colocarlo en el lugar que PrestaShop no sobrescribirá al actualizar.
Esta es la parte que la mayoría de guías sobre "añadir un botón para volver arriba" se saltan: en una tienda PrestaShop, la cuestión rara vez es si quieres uno, sino de dónde sale realmente el botón, porque eso determina si sobrevivirá a tu próxima actualización del tema o del núcleo. El tema Classic predeterminado de PrestaShop no incluye un botón para volver arriba, pero muchos temas premium sí añaden uno, y un constructor de páginas podría inyectar un segundo botón. Así que, antes de pegar cualquier JavaScript, el trabajo real consiste en averiguar qué tiene ya tu tienda y añadir la pieza que falta en el único lugar que PrestaShop no va a sobrescribir.
Esta guía es la implementación específica para PrestaShop: dónde suele vivir un botón, qué módulo y qué hook te permiten añadirlo sin editar el tema padre, y cómo hacer que resista las actualizaciones. Para entender por qué el botón mejora la interacción y la orientación del usuario, el razonamiento de UX, el argumento en móvil, la psicología, ese terreno ya lo cubrimos en por qué un botón para volver arriba importa más de lo que parece, donde también está el fragmento completo de implementación en JavaScript puro. No repetiremos aquí ninguna de esas dos cosas.
Comprueba qué renderiza ya tu tienda
Empieza descartando que ya tengas un botón sin saberlo. El tema classic de PrestaShop (de la 1.7 a la 9.x) no incluye un botón nativo para volver arriba: su pie de página (themes/classic/templates/_partials/footer.tpl) y el JavaScript compilado (themes/classic/assets/js/theme.js, generado a partir de las fuentes de _dev/js/) no contienen ningún elemento de ese tipo. Así que, en una tienda Classic de serie, no hay nada que encontrar. Muchos temas premium, sin embargo, sí traen su propia flecha para volver arriba, que aparece con un fundido cuando te desplazas más allá del primer pantallazo.
Por tanto, el primer diagnóstico es concreto: desplázate por la página de inicio y por una página larga de categoría, tanto en escritorio como en móvil. Si ya aparece un botón en la esquina inferior derecha y funciona, lo está proporcionando tu tema y no necesitas añadir nada: necesitas darle estilo, que es trabajo de CSS (ver más abajo). Si no aparece nada, que es lo predeterminado en el tema Classic, o aparece pero está roto, entonces vas a añadir uno, y las siguientes secciones explican cómo hacerlo a la manera de PrestaShop.
La forma incorrecta: editar el tema padre
La tentación es abrir footer.tpl o theme.js en el tema activo y editarlos directamente. Funciona hasta que actualizas el tema: la siguiente actualización sobrescribe tus archivos y el botón desaparece, normalmente semanas después, cuando nadie está mirando. Esta es la razón más habitual por la que un ajuste de frontend "pequeño" se convierte en mantenimiento recurrente.
La disciplina que lo evita es la misma que PrestaShop impone en todas partes: nunca edites el tema padre. Si estás personalizando el aspecto de un tema comprado, la sobrescritura debe ir en un tema hijo; explicamos exactamente cómo funciona y por qué en temas hijo en PrestaShop. Sin embargo, para un widget autocontenido como un botón de desplazamiento, normalmente ni siquiera necesitas tocar archivos del tema, que es lo que veremos a continuación.
La forma segura frente a actualizaciones: un bloque HTML más JS/CSS personalizado
Un botón para volver arriba son tres pequeñas piezas: algo de marcado, unas líneas de JavaScript para mostrarlo u ocultarlo y animar el desplazamiento, y algo de CSS para posicionarlo y darle estilo. Nada de eso tiene por qué vivir en un archivo del tema. El patrón seguro frente a actualizaciones en PrestaShop es poner el marcado en un bloque HTML y el comportamiento en tus archivos JS/CSS personalizados.
1. El marcado, mediante un bloque HTML
En lugar de incrustar el botón a mano en una plantilla, colócalo en un bloque de contenido que controles desde el panel de administración. No existe una página nativa del panel de administración para añadir marcado arbitrario de un botón de desplazamiento, así que utiliza un módulo de HTML personalizado que soporte explícitamente el hook que necesitas, o crea un pequeño módulo específico registrado en un hook renderizado conocido. Para un botón anclado al pie, un hook como displayFooter o displayBeforeBodyClosingTag es el lugar natural. Cubrimos la técnica general de insertar marcado en un hook soportado y renderizado en bloques HTML: añadir contenido personalizado en cualquier parte. El botón en sí es un solo elemento:
<button id="scrollTop" aria-label="Scroll to top of page">↑</button>
2. El comportamiento, en custom.js (no en theme.js)
El tema Classic de PrestaShop incluye un custom.js (y un custom.css) para que puedas añadir comportamiento sin tocar los recursos compilados del tema, pero la disponibilidad y el comportamiento ante actualizaciones dependen del tema, y una actualización puede sobrescribir archivos del tema padre. Para una seguridad fiable frente a actualizaciones, coloca tu JS/CSS en un tema hijo o en un módulo; usa el custom.js/custom.css del tema padre solo si aceptas revisarlos después de cada actualización del tema. Ahí es donde va la lógica de desplazamiento. La razón por la que este es el lugar correcto, y las advertencias sobre la canalización de recursos que lo rodea, son el tema completo de CSS y JavaScript personalizados sin romper las actualizaciones, una lectura recomendable antes de añadir cualquier script de frontend. La lógica en sí no tiene misterio: mostrar el botón cuando el área visible se haya desplazado unos 300px y hacer un desplazamiento suave hasta arriba al hacer clic.
3. El estilo, en custom.css
El posicionamiento vive en custom.css: fijo en la esquina inferior derecha, con un área táctil de al menos 44×44px y, esta es la particularidad específica de PrestaShop, un z-index que quede por debajo del banner de consentimiento de cookies y de cualquier widget de chat, pero por encima del contenido de la página. En una tienda típica compites con el banner RGPD, la burbuja de chat en vivo y, si tu tema o un módulo la añade, una barra fija de añadir al carrito en las páginas de producto; elige el z-index de forma deliberada en lugar de recurrir a 999999 y esperar que salga bien.
Botón nativo vs bloque HTML vs edición del tema
| Enfoque | ¿Sobrevive a las actualizaciones? | Dónde vive | Mejor cuando… |
|---|---|---|---|
| Usar el botón propio de tu tema | Sí | Tema (dale estilo en custom.css) | Tu tema, normalmente premium, ya renderiza uno y solo necesita ajustes de estilo o posición. |
| Bloque HTML + custom.js/custom.css | Sí | Un bloque de contenido + archivos de recursos personalizados | Tu tema no tiene botón, o el suyo está roto, y quieres uno sin cirugía en el tema. |
| Sobrescritura en tema hijo | Sí (hasta que cambies de tema) | themes/your-child-theme/ | Ya mantienes un tema hijo por otros motivos. |
| Editar el tema padre | No | .tpl/.js del tema activo | Nunca. La siguiente actualización del tema lo elimina silenciosamente. |
Los detalles de accesibilidad y z-index que PrestaShop te obliga a tener en cuenta
Desde el back office defines cuándo aparece el botón, su estilo y en qué esquina se sitúa: sin tocar el código del tema.
Hay dos cosas que rompen los botones para volver arriba en tiendas PrestaShop reales, y ambas son fáciles de dejar bien desde el principio. Primero, la accesibilidad: renderiza el botón como un <button> real, no como un <div> con estilo, dale un aria-label="Scroll to top of page" para que un lector de pantalla anuncie su propósito, y asegúrate de que se pueda alcanzar con el teclado. Un glifo de flecha sin etiqueta es invisible para las tecnologías de asistencia.
Segundo, el problema de las capas. La parte pública de una tienda PrestaShop suele apilar varios elementos fijos en la misma esquina inferior derecha: el aviso de cookies/consentimiento, el widget de chat y, en tiendas cuyo tema o algún módulo la añade, una barra fija de añadir al carrito que aparece en las páginas de producto cuando el cliente se desplaza (no es una función nativa de PrestaShop, así que comprueba si la tuya la tiene). Un botón de desplazamiento con un z-index descuidado tapará el botón "Añadir al carrito", lo que significa que tu pequeña mejora de UX estará frenando pedidos. Prueba el botón específicamente en una página de producto con una descripción larga, en móvil, con el banner de consentimiento visible, antes de darlo por terminado.
No reinventes el desplazamiento suave si ya vas a añadir movimiento
Si el botón para volver arriba es la única animación que estás considerando, la ruta ligera con JS personalizado descrita arriba es el esfuerzo justo; cualquier cosa más pesada sería sobredimensionar un único botón. Pero si también planeas fundidos de entrada, secciones que se revelan al desplazarse u otros movimientos por toda la tienda, merece la pena decidir un enfoque coherente para el comportamiento de desplazamiento en lugar de ir pegando scripts desconectados que escuchan todos el mismo evento de desplazamiento. Cubrimos cómo hacerlo con buen gusto (y sin hundir el rendimiento) en animaciones de desplazamiento: añadir movimiento sutil.
La versión corta
En PrestaShop, el botón para volver arriba no es un problema de código, el código son cinco líneas, sino un problema de ubicación. Pon el marcado en un bloque HTML del panel de administración, el comportamiento en custom.js, el estilo en custom.css, nunca en el tema padre, y dale un z-index que respete el banner de consentimiento y la barra de añadir al carrito. Haz eso y obtendrás el beneficio de interacción sin carga de mantenimiento y sin tener que rehacer nada en la siguiente actualización. La lección aprendida a base de golpes detrás de todo esto es la misma que atraviesa todo este grupo de guías: los pequeños detalles de frontend que parecen triviales son precisamente los que se rompen silenciosamente al actualizar si no los añades en el lugar que PrestaShop te deja para ello.
Preguntas frecuentes
¿Cómo sé si mi tema ya tiene un botón para volver arriba?
Desplázate por la página de inicio y por una página larga de categoría, tanto en escritorio como en móvil. Si aparece una flecha en la esquina inferior derecha y funciona, tu tema la proporciona: tu trabajo es darle estilo, no construirla. Para confirmar de dónde sale, mira el código fuente y busca un elemento #back-to-top o .scroll-to-top. El tema Classic predeterminado no tiene ninguno, así que en una tienda Classic de serie realmente no hay nada que encontrar.
¿Por qué no añadir simplemente el botón a footer.tpl?
Porque footer.tpl y theme.js son archivos del tema padre, y la siguiente actualización del tema los sobrescribe: tu botón desaparece, normalmente sin que nadie lo note durante semanas. Es la forma más habitual de que un ajuste "pequeño" se convierta en mantenimiento recurrente. Pon el marcado en un bloque HTML del panel de administración y el comportamiento en recursos personalizados o en un módulo, para que nada dentro del árbol del tema cargue con tu cambio.
¿Qué hook debería usar el bloque HTML del botón?
Para un botón anclado al pie, displayFooter o displayBeforeBodyClosingTag son los lugares naturales: ambos se renderizan cerca del final de la página en una tienda de serie. No existe una página nativa del panel de administración para marcado arbitrario de un botón de desplazamiento, así que usa un módulo de HTML personalizado que soporte explícitamente el hook que quieres, o crea un pequeño módulo específico registrado en un hook renderizado conocido.
¿Qué z-index debería darle?
Uno elegido deliberadamente, no 999999. El botón debe quedar por encima del contenido de la página, pero por debajo del banner de consentimiento de cookies, del widget de chat y de cualquier barra fija de añadir al carrito en páginas de producto; de lo contrario, tapa el botón de compra y frena pedidos. Elige un valor y luego prueba en una página de producto larga en móvil, con el banner de consentimiento visible y la barra de añadir al carrito activa, antes de darlo por terminado.
¿El botón tiene que ser accesible por teclado?
Sí. Renderízalo como un <button> real, no como un <div> con estilo, para que sea enfocable y accesible con el teclado, y dale un aria-label="Scroll to top of page" para que un lector de pantalla anuncie su propósito. Un glifo de flecha sin etiqueta es invisible para las tecnologías de asistencia, y un div no es enfocable en absoluto: ambas cosas son fáciles de hacer bien al construirlo y dolorosas de corregir después.
Mi tema ya renderiza un botón: ¿puedo simplemente reposicionarlo?
Sí, y eso es trabajo de CSS, no de desarrollo. Da estilo y reposiciona el botón existente en custom.css (o en la hoja de estilo de tu tema hijo) en lugar de añadir un segundo botón: dos botones para volver arriba apilados en la misma esquina son un resultado accidental común cuando no se comprueba primero. Ajusta sus desplazamientos bottom/right y el z-index para que no choque con tus otros widgets fijos.
¿Debo escribir una lógica de desplazamiento propia si también voy a añadir otras animaciones?
Si el botón es el único movimiento que vas a añadir, la ruta ligera con JS personalizado es justo lo necesario. Pero si también planeas fundidos de entrada o secciones que se revelan al desplazarse, adopta un único enfoque coherente de desplazamiento en lugar de ir añadiendo scripts desconectados que escuchan todos el mismo evento de desplazamiento; así es como el rendimiento se degrada sin hacer ruido. La guía de animaciones de desplazamiento explica cómo hacerlo como una capa gestionada.
Guías relacionadas
Comentarios
Dejar un comentario
Comparte una pregunta, un detalle de instalación o una opinión que pueda ayudar a otro lector.