Mobile Bottom Navigation Bar Module for PrestaShop (dfmobilenav)

Overview

DF Mobile Nav adds a fixed bottom tab bar to your PrestaShop store, modelled on native mobile apps: home, search, cart, wishlist and account, with counter badges updated in real time.

The bar only appears below a breakpoint you define (768 px by default). On desktop it is fully hidden and adds no spacing to the page.

Installation

1. In the back office, open Modules → Module Manager, then click Upload a module.
2. Upload the dfmobilenav-1.0.0.zip file.
3. Click Configure once the installation is complete.

The module registers the required hooks automatically (actionFrontControllerSetMedia and displayBeforeBodyClosingTag). No theme change is needed.

Configuration

Choosing the tabs

Five tabs are available, each enabled or disabled independently:

• Home — links to the shop home page.
• Search — opens a full-screen search field or redirects to the search page (see below).
• Cart — links to the cart, with a badge showing the number of items.
• Wishlist — links to the wishlist, with a badge showing the number of saved products.
• Account — links to the customer area.

If no tab is enabled, the bar is not rendered at all.

Search behaviour

Two modes are available:

• Full-screen search (default) — an input field opens over the current page, without leaving it. Close with the button or the Escape key.
• Redirect to the search page — the tab behaves as a plain link to the native search page.

Hide on scroll

When this option is on, the bar slides away as the visitor scrolls down and comes back as soon as they scroll up. The behaviour respects the system reduced-motion preference.

Mobile breakpoint

The maximum viewport width, in pixels, below which the bar is displayed. The default is 768 px. Accepted values range from 320 to 1600 px; any value outside that range falls back to 768.

Colours

Four colours are configurable in hexadecimal format:

• Background colour of the bar (white by default).
• Icon and label colour at rest (grey by default).
• Active tab colour (ink black by default).
• Badge colour for the counters (red by default).

Counter badges

Cart

The badge shows the number of items in the visitor’s cart. It updates live on every add to cart, with no page reload, in response to PrestaShop’s updateCart event. Beyond 99 items, the badge shows “99+”.

Wishlist

The wishlist badge relies on the native wishlist module (blockwishlist) and shows the number of products saved by the logged-in customer. It refreshes after any interaction with the wishlist buttons.

If the wishlist module is disabled on your store, the Wishlist tab is hidden automatically regardless of the settings — nothing to do on your side.

The wishlist counter only shows for logged-in customers, since the native wishlist is tied to the customer account.

Active tab

The tab matching the current page is highlighted automatically and carries the current-page accessibility attribute. Detection covers the home page, search, cart and checkout, the customer area and its sub-pages (identity, addresses, order history, credit slips, vouchers), and the wishlist.

Mobile compatibility

• iOS safe area — the bar respects the bottom safe area on recent iPhones and never overlaps the home indicator.
• Safari zoom — the search field is sized to prevent Safari’s automatic zoom on focus.
• Bottom page spacing — spacing equal to the height of the bar is added automatically at the bottom of the document so no content is hidden.

Accessibility

The tabs are native links, keyboard accessible, with a visible focus ring. The current page’s tab is announced to assistive technologies. Icons are marked as decorative and the text label carries the information. The hide-on-scroll animation is disabled when the visitor has requested reduced motion in their system.

Performance

The module loads no icon font, no image and no JavaScript library. Icons are inline stroke SVGs rendered directly in the page, the script is vanilla JavaScript and weighs a few kilobytes. Counter refreshes go through a lightweight call returning only two numbers.

Frequently asked questions

Does the module change my theme files?

No. It plugs into standard PrestaShop hooks, with no template override. The bar has its own self-contained styles, independent of your stylesheet.

Does the bar conflict with a chat or back-to-top button?

The bar sits at the bottom of the screen with a moderate stacking level. If another floating element overlaps it, shift that element up by around 60 pixels in your theme’s CSS.

Can I show the bar on tablets?

Yes: raise the breakpoint, to 1024 px for example, to cover portrait tablets as well.

Is the module multistore compatible?

Yes. Settings are stored in the PrestaShop configuration and respect the shop context.

Is it PrestaShop 9 compatible?

Yes. The module is designed and validated from PrestaShop 8.0 to 9.x.

Changelog

1.0.0 — 12 July 2026

• Fixed bottom tab bar with five toggleable tabs.
• Live counter badges on cart and wishlist.
• Full-screen search or redirect, your choice.
• Hide the bar on scroll down.
• Automatic highlighting of the current page tab.
• Full colour and breakpoint customisation.
• iOS safe-area support.
• EN, FR, ES, DE, IT translations.