DataFirefly Volver arriba — Documentación
Instalar y configurar el botón « Volver arriba » en PrestaShop 8 y 9.
El módulo DataFirefly Volver arriba añade un botón flotante que devuelve a tus visitantes a la parte superior de la página con un solo clic. Esta guía cubre la instalación y todos los ajustes disponibles.
Instalación
- En tu back office, ve a Módulos > Gestor de módulos.
- Haz clic en Subir un módulo (arriba a la derecha) y envía el archivo
dfbacktotop.zip. - Cuando termine la instalación, haz clic en Configurar.
El módulo se registra automáticamente en los hooks actionFrontControllerSetMedia y displayFooter. No se requiere ninguna configuración manual de hooks.
Configuración
La página de configuración tiene dos pestañas: Comportamiento y Apariencia.
Pestaña Comportamiento
- Umbral de activación (px) — número de píxeles de desplazamiento a partir del cual aparece el botón. Valor por defecto:
300. - Desplazamiento suave — activa el regreso animado y progresivo. Desactivado, el regreso arriba es instantáneo.
- Mostrar en móvil — muestra u oculta el botón en pantallas de menos de 768 px de ancho.
Pestaña Apariencia
- Posición — abajo a la derecha o abajo a la izquierda.
- Icono — chevron, flecha o triángulo (iconos SVG integrados).
- Tamaño del botón — diámetro del botón, de 24 a 120 px.
- Radio de las esquinas — de 0% (cuadrado) a 50% (círculo).
- Margen horizontal / vertical — distancia respecto a los bordes de la pantalla.
- Color de fondo, Color de fondo (hover), Color del icono — códigos hexadecimales.
- Sombra — añade una sombra suave bajo el botón.
- z-index — aumenta este valor si el botón aparece bajo otros elementos fijos (banner de cookies, chat, etc.).
Cada ajuste se valida al guardar: los colores deben ser códigos hexadecimales válidos, y tanto el tamaño como el radio están acotados para evitar cualquier visualización rota.
Formas del botón
La forma se controla por completo mediante el radio de las esquinas:
50%— círculo perfecto.20%— cuadrado con esquinas redondeadas.0%— cuadrado nítido.
Compatibilidad con tu tema
El botón se inyecta mediante el hook displayFooter, presente en el tema Classic y en la gran mayoría de los temas de PrestaShop. Si tu tema personalizado no llama a este hook, el botón no aparecerá: basta con añadir la llamada al hook en la plantilla de pie de página del tema.
Rendimiento y accesibilidad
- JavaScript nativo de unos 1,5 KB, sin jQuery ni dependencias externas.
- Seguimiento del desplazamiento mediante
requestAnimationFramey un listener pasivo, sin impacto perceptible en los Core Web Vitals. - Botón nativo con atributo
aria-labely foco de teclado visible. - Respeta la preferencia del sistema
prefers-reduced-motion: el desplazamiento se vuelve instantáneo si el usuario ha reducido las animaciones. - Sin recopilación de datos personales — compatible con el RGPD por diseño.
FAQ
El botón no aparece, ¿qué debo comprobar?
Asegúrate de que tu tema implemente el hook displayFooter y de que hayas desplazado lo suficiente para superar el umbral de activación (300 px por defecto). Vacía también la caché de PrestaShop tras la instalación.
¿Puedo usarlo en multitienda?
Sí. Los ajustes se guardan mediante Configuration y se aplican según el contexto de tienda activo.
¿El módulo es realmente gratis?
Sí, bajo licencia gratuita, sin limitación de funciones.