Botón de volver arriba: un pequeño detalle de UX que importa más de lo que parece

Actualizado en junio de 2026, las notas de implementación se aplican a PrestaShop 1.7, 8 y 9. El tema Classic predeterminado sigue sin incluir un botón de volver arriba; el código inferior es JavaScript puro con un área táctil móvil de 44px.

El botón de volver arriba es esa clase de detalle que nadie nota hasta que falta: una pequeña flecha en una esquina que devuelve al cliente a la cabecera después de haber bajado hasta el final de una página larga. Parece demasiado menor como para dedicarle atención. Pero en una tienda PrestaShop, donde las páginas de categoría y producto suelen medir varios miles de píxeles de alto, la diferencia entre tenerlo y no tenerlo es la diferencia entre un cliente a un toque de tu barra de búsqueda y un cliente deslizando la pantalla del móvil con el pulgar hasta cansarse. Este artículo explica cómo añadir ese botón a tu tienda de la forma correcta, específicamente en PrestaShop: dónde encaja dentro del tema, cómo incorporarlo sin bifurcar archivos de los que te arrepentirás en la próxima actualización, y los errores puntuales que convierten un botón útil en algo que tapa tu "Añadir al carrito".

Si quieres el argumento sobre por qué el botón mueve la aguja, los datos de interacción, el ángulo del abandono, ya lo desarrollamos en botón de volver arriba: pequeña mejora de UX, impacto sorprendente. Aquí nos quedamos en el lado práctico: implementación, mecánica de PrestaShop y las decisiones que lo hacen funcionar o fracasar.

¿Tu tema ya lo tiene? Compruébalo antes de crear nada

Lo primero que conviene saber en PrestaShop: muchos temas modernos ya incluyen un botón de volver arriba, y quizá estés a punto de añadir un segundo. El tema Classic predeterminado en PrestaShop 1.7, 8 y 9 no lo incluye de serie, así que una instalación Classic limpia necesita que se añada. Pero la mayoría de temas de pago (y los derivados de Warehouse) sí lo traen, normalmente activable desde la página de configuración del propio tema, en Diseño → Tema & logotipo o dentro del módulo de ajustes del tema. Antes de escribir una sola línea de código, baja hasta el final de una página de categoría larga en tu tienda en producción y mira la esquina. Si ya aparece un botón con un fundido, tu trabajo es configurarlo, no construirlo.

Para confirmar de dónde viene un botón existente, consulta el código fuente y busca marcadores habituales: un elemento #back-to-top o .scroll-to-top, o un fragmento de plantilla en tu tema bajo themes/<yourtheme>/templates/ (a menudo en _partials/footer.tpl o en un scroll-top.tpl dedicado). Si está ahí pero no aparece, probablemente la opción del tema está desactivada. Eso es una casilla del panel de administración, no un ticket para desarrollo.

Las tres formas de añadirlo a PrestaShop, y cuál elegir

Si tu tema realmente no tiene botón de volver arriba, tienes tres vías realistas. Se diferencian sobre todo en una cosa que en PrestaShop importa más que la comodidad: si el cambio sobrevive a una actualización del tema o del núcleo.

La ruta que debes evitar es la tentadora: abrir footer.tpl en tu tema activo y pegar el marcado. Funciona exactamente hasta que el autor del tema publica una actualización; entonces tu edición desaparece y no sabes por qué. Si necesitas tocar plantillas, hazlo en un tema hijo. Explicamos por qué esta regla no es negociable en temas hijo: por qué nunca deberías editar el tema padre. Para enfoques más limpios sin editar plantillas, sigue leyendo.

La vía limpia: un bloque HTML personalizado y unas líneas de JS

El enfoque que mantiene tus manos lejos de los archivos del tema consiste en inyectar el marcado del botón mediante un bloque de contenido HTML y cargar su comportamiento a través del custom.js del tema. El tema Classic incluye themes/<yourtheme>/assets/js/custom.js (y custom.css junto a él) para JavaScript de alcance global. Aun así, ten en cuenta que la existencia de esos archivos y su comportamiento al actualizar dependen del tema: editarlos en el tema padre activo sigue siendo editar archivos del tema, y una actualización puede sobrescribirlos salvo que el tema o el proveedor los preserve. Para una seguridad real frente a actualizaciones, prefiere un tema hijo o recursos registrados mediante un módulo. La disciplina completa para usarlos con seguridad, y por qué son mejores que editar los paquetes compilados del tema, está en CSS y JavaScript personalizados en PrestaShop sin romper actualizaciones.

Para el marcado en sí, no conviene codificar a mano un <div> dentro de una plantilla. Un bloque HTML/módulo personalizado dedicado, colocado en la zona del pie, hace el trabajo: usa uno que admita el hook de destino (para un botón anclado al pie, un módulo enganchado a displayFooter o displayBeforeBodyClosingTag), o crea un pequeño módulo propio. Ten presente que el marcado solo puede inyectarse en hooks que un módulo soporte y que el tema realmente renderice, no literalmente en cualquier punto de la tienda; la mecánica para colocar bloques personalizados se explica en bloques HTML: añadir contenido personalizado en cualquier lugar de tu tienda PrestaShop. El botón es simplemente un elemento de ancla o botón accesible; JavaScript controla cuándo aparece y el desplazamiento suave.

Una implementación mínima y accesible ronda de verdad las quince líneas: no supone un problema de rendimiento y debería ser JavaScript puro (el tema Classic todavía incluye jQuery, pero depender de él es frágil: muchos temas de terceros más ligeros lo eliminan o lo difieren, así que no des por hecho que $() está disponible):

• Marcado: un <button type="button" id="back-to-top" aria-label="Back to top"> real, con una flecha o un SVG dentro, nunca un <div> sin más, porque un div no recibe foco ni se anuncia a los lectores de pantalla.
• Mostrar después de hacer scroll: un listener de scroll que añade una clase visible cuando window.scrollY supera aproximadamente 300–500px (más o menos una ventana gráfica). Limita la frecuencia del listener para que no se ejecute en cada píxel.
• Vuelta suave: window.scrollTo({ top: 0, behavior: 'smooth' }) al hacer clic, una línea, nativa, sin biblioteca de animación.

Aquí tienes todo el conjunto: marcado, mostrar/ocultar con limitación de frecuencia y desplazamiento suave nativo. Es puro, no depende de nada y respeta la preferencia de movimiento del visitante:

<!-- markup: a real button, focusable and announced -->
<button type="button" id="back-to-top" aria-label="Back to top">↑</button>

#back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;           /* raise this if a cookie bar / chat sits here */
  width: 48px;
  height: 48px;          /* 44px+ tap target on mobile */
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  z-index: 1030;       /* deliberate, below banner/chat – test it */
}
#back-to-top.is-visible { opacity: 1; visibility: visible; }

const btn = document.getElementById('back-to-top');
let ticking = false;

window.addEventListener('scroll', () => {
  if (ticking) return;            // throttle to one check per frame
  ticking = true;
  window.requestAnimationFrame(() => {
    btn.classList.toggle('is-visible', window.scrollY > 400);
    ticking = false;
  });
}, { passive: true });

btn.addEventListener('click', () => {
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
});

El passive: true del listener de scroll y la limitación con requestAnimationFrame son los dos detalles que evitan cargar el hilo principal de tu tienda; la comprobación de movimiento reducido al hacer clic es una cortesía de accesibilidad que cuesta una línea. Registra ese JS como archivo externo mediante un hook de módulo en vez de pegarlo en línea.

Envolver esto en un pequeño módulo creado para ese fin, en lugar de dejar archivos sueltos, tiene una ventaja que merece mencionarse: viaja contigo entre tiendas y no queda atado al ciclo de vida de un único tema. Es el mismo razonamiento detrás de aplicar animaciones de desplazamiento como una capa gestionada en vez de repartir scripts en línea: el botón y el movimiento sutil al desplazarse pertenecen a la misma familia de "pulido frontend que no debería bifurcar tu tema".

Los problemas específicos de PrestaShop que de verdad muerden

Un botón circular de volver arriba se ubica en la esquina inferior derecha de una página de producto de la tienda.

El botón en sí es trivial. Lo que se rompe en tiendas PrestaShop reales es todo aquello con lo que comparte la esquina inferior derecha. Las instalaciones PrestaShop acumulan widgets flotantes, y todos quieren el mismo espacio.

• Banners de consentimiento de cookies y RGPD. Los módulos de consentimiento y ley de cookies habituales en tiendas PrestaShop, ya sean complementos de cumplimiento legal o una CMP de terceros, suelen fijarse en la parte inferior de la ventana gráfica. Un botón de volver arriba que los ignora acaba oculto detrás del banner o colocado encima del botón "Aceptar". Sitúa el botón abajo a la derecha y reserva para el banner la franja inferior completa, o eleva el botón por encima de la altura del banner mientras esté visible.
• Widgets de chat en vivo (Crisp, Messenger, tawk.to). Casi todos se fijan abajo a la derecha, exactamente donde la convención sitúa el botón de volver arriba. No luches contra ello: apila el botón encima de la burbuja de chat con un desplazamiento bottom adicional, para que el cliente nunca tenga que elegir entre "hablar con nosotros" y "volver arriba".
• La guerra de apilamiento por z-index. Este es el defecto más común. Los widgets de chat y los módulos de consentimiento suelen usar valores de z-index muy altos, y tu botón puede terminar renderizado por debajo de ellos: visible pero no clicable, lo que es peor que no tenerlo. Define un z-index deliberado y prueba haciendo clic de verdad en móvil con el banner de cookies y el chat activos a la vez, no en una página limpia de preproducción donde no existe ninguno.
• Las cabeceras fijas cambian el cálculo. Muchos temas PrestaShop (y las opciones de cabecera fija en temas de pago) mantienen la navegación, la búsqueda y el carrito fijados arriba mientras el cliente se desplaza. Si el tuyo lo hace, el botón es menos esencial, la búsqueda y el carrito ya están al alcance, , pero sigue justificando su presencia para volver al hero, a los filtros superiores de una categoría o al inicio de una entrada de blog larga. En un tema con cabecera fija, haz que el botón sea un poco más pequeño y discreto; es una comodidad, no una tabla de salvación.

Dónde se gana su lugar en una tienda PrestaShop

No todas las páginas lo necesitan por igual. El botón resulta más rentable justo donde las páginas PrestaShop se vuelven más largas, y conviene saber cuáles son para comprobarlo donde importa:

• Móvil, ante todo. Una ventana gráfica más pequeña implica más desplazamiento para el mismo contenido, así que un usuario de móvil recorre muchas más pantallas que un usuario de escritorio en la misma página de categoría. Si solo dejas bien el botón en un dispositivo, que sea en móvil, y respeta ahí el área táctil mínima de 44–48px.
• Páginas de categoría largas con más de 30 productos, filtros de búsqueda facetada, scroll infinito o paginación profunda. Cuando un cliente llega al producto n.º 35, la cabecera está realmente a miles de píxeles.
• Páginas de producto con mucho contenido, con descripciones largas, tablas de especificaciones, reseñas y carruseles de venta cruzada; estas suelen superar los 5,000px.
• Blog y páginas CMS. Tu contenido estático y editorial suele tener el desplazamiento más profundo de todo el sitio. Mientras mejoras esas páginas, también vale la pena ordenar la navegación CMS: unas etiquetas de menú más claras para las páginas estáticas ayudan a los clientes que vuelven arriba a encontrar de verdad adónde ir después, algo que tratamos en nombres visibles de páginas CMS: mejor navegación para tus páginas estáticas.

Acertar con el comportamiento

Elijas la ruta que elijas, los mismos pequeños detalles separan un botón que se siente nativo de uno que parece añadido a la fuerza:

• Aparecer solo después de desplazarse. Mostrarlo al principio de la página es ruido sin sentido. Muéstralo cuando el cliente haya bajado aproximadamente una ventana gráfica.
• Desplazamiento suave, no un teletransporte. Un salto instantáneo al inicio desorienta: el cliente no sabe si se ha desplazado o si ha aterrizado en una página nueva. Un desplazamiento suave de 300–500ms conserva su orientación espacial.
• Fundido, no rebotes. Un fundido sutil de unos 200ms al aparecer y desaparecer se percibe pulido. Las animaciones con rebotes, deslizamientos o pulsos atraen una atención que el botón no merece; debe ser fácil de descubrir, no distraer.
• Accesible desde el diseño. Un <button> o <a> real (recibe foco y se anuncia), un aria-label, un anillo de foco de teclado visible y suficiente contraste con cualquier fondo de página sobre el que flote. Hacerlo bien desde el inicio no cuesta nada y corregirlo después suele doler.

¿Deberías medirlo?

Puedes hacerlo, y en una tienda con tráfico merece unos minutos: lanza un evento de analítica en cada clic del botón. Eso te dirá qué proporción de sesiones en páginas largas lo usa realmente y qué páginas generan más clics; normalmente es una señal útil de "estas son mis páginas más profundas y con mayor interacción". Trata cualquier porcentaje que leas fuera como orientación, no como objetivo; la cifra honesta depende por completo de la longitud de tus páginas y del comportamiento de tus clientes, así que léela en tu propia tienda en lugar de fiarte de un número de blog.

El botón de volver arriba es algo poco habitual en la UX de tienda: una mejora con casi ninguna desventaja. Cuesta unas pocas líneas, usa recursos insignificantes, ayuda a los clientes que lo necesitan y permanece invisible para quienes no. La única forma de hacerlo mal en PrestaShop es añadirlo sin cuidado: editando el tema padre para que desaparezca en la próxima actualización, o colocándolo en una esquina que ya ocupan tu banner de cookies y tu widget de chat. Añádelo de forma limpia, en un lugar que sobreviva a las actualizaciones, y pruébalo donde realmente viven los widgets flotantes. Luego olvídate de él, que es exactamente lo que debería permitirte un buen detalle de UX.

Preguntas frecuentes

¿El tema predeterminado de PrestaShop incluye un botón de volver arriba?

No. El tema Classic en PrestaShop 1.7, 8 y 9 viene sin él, así que una instalación Classic limpia necesita que se añada. Muchos temas de pago y derivados de Warehouse sí lo incluyen, normalmente activable desde los ajustes propios del tema. Antes de crear nada, baja hasta el final de una página de categoría larga en tu tienda en producción: si ya aparece un botón con fundido, tu trabajo es activar una casilla del panel de administración, no escribir código.

¿Cuál es la forma más limpia de añadirlo sin romper las actualizaciones?

Coloca el marcado en un bloque HTML del panel de administración en un hook de pie como displayFooter o displayBeforeBodyClosingTag, y registra JavaScript como archivo externo mediante un pequeño módulo: no se edita nada en el árbol del tema, así que una actualización del tema no puede borrarlo. Editar footer.tpl en el tema padre activo es la ruta que debes evitar; si necesitas tocar plantillas, hazlo en un tema hijo.

¿Debería usar jQuery para la lógica de scroll?

No: escríbela en JavaScript puro. El tema Classic todavía incluye jQuery, pero muchos temas de terceros más ligeros lo eliminan o lo difieren, así que no puedes asumir que $() está disponible. Todo el botón son unas quince líneas de JS plano: un listener de scroll con limitación de frecuencia que alterna una clase de visibilidad al superar ~400px, y window.scrollTo({ top: 0, behavior: 'smooth' }) al hacer clic. No hace falta ninguna biblioteca.

Mi botón se ve, pero no puedo hacer clic en él. ¿Por qué?

Es el defecto más común: un conflicto de apilamiento por z-index. Los widgets de chat y los banners de consentimiento suelen usar valores de z-index muy altos, de modo que tu botón se renderiza por debajo: visible pero no clicable, que es peor que no tenerlo. Define un z-index deliberado y prueba haciendo clic de verdad en móvil con el banner de cookies y el chat activos a la vez, no en una página limpia de preproducción donde no existe ninguno.

¿Cómo evito que tape mi banner de cookies o la burbuja de chat?

Los tres quieren la esquina inferior derecha. Dale al banner de consentimiento la franja inferior de ancho completo y mantén el botón en la esquina, o eleva el desplazamiento bottom del botón mientras el banner esté visible. Para una burbuja de chat, apila el botón por encima con desplazamiento adicional, de modo que el cliente nunca tenga que elegir entre "hablar con nosotros" y "volver arriba". Verifica siempre con ambos widgets activos.

¿A qué distancia de scroll debería aparecer el botón?

Aproximadamente una ventana gráfica: unos 300–500px hacia abajo. Mostrarlo justo al principio de la página es ruido sin sentido; revelarlo solo cuando el cliente ya ha bajado es lo que lo hace sentir intencional. Limita la frecuencia del listener de scroll (una guarda con requestAnimationFrame más un listener pasivo) para que la comprobación se ejecute como máximo una vez por frame y se mantenga fuera del hilo principal.

¿Debe ser accesible, y cómo?

Sí, y hacerlo bien desde el inicio es barato. Usa un <button> o <a> real en lugar de un <div> estilizado para que reciba foco y se anuncie, añade un aria-label="Back to top", conserva un anillo de foco de teclado visible, asegura suficiente contraste con el fondo de la página y respeta prefers-reduced-motion volviendo a un salto instantáneo. Corregir todo esto después es mucho más doloroso que incluirlo desde el principio.

¿Sigue mereciendo la pena si mi tema tiene una cabecera fija?

Es menos esencial, pero sigue siendo útil. Una cabecera fija mantiene la búsqueda y el carrito al alcance, así que el botón no es una tabla de salvación; aun así, ayuda al cliente a volver al hero, a los filtros superiores de una categoría o al inicio de una entrada de blog larga. En un tema con cabecera fija, haz que el botón sea un poco más pequeño y discreto para que se lea como una comodidad, no como otro elemento fijo compitiendo por atención.

Guías relacionadas

• Botón de volver arriba: pequeña mejora de UX, impacto sorprendente
• CSS y JavaScript personalizados en PrestaShop sin romper actualizaciones
• Animaciones de desplazamiento: añadir movimiento sutil a las páginas de tu tienda