PS PrestaShop Beginner

DataFirefly Back to Top — Documentation

Install and configure the back to top button on PrestaShop 8 and 9.

Updated Module version 1.0.0

The DataFirefly Back to Top module adds a floating button that returns your visitors to the top of the page in a single click. This guide covers installation and every available setting.

Installation

  1. In your back office, go to Modules > Module Manager.
  2. Click Upload a module (top right) and send the dfbacktotop.zip archive.
  3. Once installation is complete, click Configure.

The module registers itself automatically on the actionFrontControllerSetMedia and displayFooter hooks. No manual hook setup is required.

Configuration

The configuration page has two tabs: Behavior and Appearance.

Behavior tab

  • Trigger threshold (px) — number of scrolled pixels after which the button appears. Default: 300.
  • Smooth scrolling — enables the animated, gradual scroll back. When disabled, the return to top is instant.
  • Show on mobile — shows or hides the button on screens narrower than 768 px.

Appearance tab

  • Position — bottom-right or bottom-left.
  • Icon — chevron, arrow or triangle (built-in SVG icons).
  • Button size — button diameter, from 24 to 120 px.
  • Corner radius — from 0% (square) to 50% (circle).
  • Horizontal / vertical margin — distance from the screen edges.
  • Background color, Background color (hover), Icon color — hexadecimal codes.
  • Drop shadow — adds a soft shadow under the button.
  • z-index — increase this value if the button appears under other fixed elements (cookie banner, chat, etc.).

Every setting is validated on save: colors must be valid hexadecimal codes, and both size and radius are bounded to prevent any broken display.

Button shapes

The shape is entirely driven by the corner radius:

  • 50% — perfect circle.
  • 20% — square with rounded corners.
  • 0% — sharp square.

Theme compatibility

The button is injected via the displayFooter hook, present in the Classic theme and the vast majority of PrestaShop themes. If your custom theme does not call this hook, the button will not appear: simply add the hook call to the theme’s footer template.

Performance and accessibility

  • Native JavaScript of around 1.5 KB, with no jQuery or external dependency.
  • Scroll tracking via requestAnimationFrame and a passive listener, with no perceptible impact on Core Web Vitals.
  • Native button with an aria-label attribute and visible keyboard focus.
  • Respects the prefers-reduced-motion system preference: scrolling becomes instant if the user has reduced animations.
  • No personal data collected — GDPR-friendly by design.

FAQ

The button doesn’t appear, what should I check?

Make sure your theme implements the displayFooter hook and that you have scrolled far enough to pass the trigger threshold (300 px by default). Also clear the PrestaShop cache after installation.

Can I use it in multistore?

Yes. Settings are saved via Configuration and apply according to the active shop context.

Is the module really free?

Yes, under a free license, with no feature limitation.

Was this page helpful?

Still stuck? Contact support