Project requirement
In an e-commerce catalogue with many products, users often browse a product list, open a product detail page, and then want to quickly compare other similar items.
With PrestaShop’s standard behaviour, this step is not always seamless: users often need to go back to the product list, wait for it to reload, and open another product.
To improve this flow, I developed a module that:
- preserves the user’s navigation context;
- detects which product list the click came from;
- displays Previous and Next buttons on the product detail page;
- - supports different contexts, including category, search, brand, and product blocks within the product page;
- provides a discreet, modern, and mobile-friendly interface.
Main features
Contextual product navigation
The module stores the context of the last product list visited and allows users to move between products while keeping navigation consistent with their browsing path.
Support for multiple contexts
The navigation context can be updated from:
- category pages;
- search results;
- brand / manufacturer pages;
- product blocks within the product detail page, such as items from the same category.
Fixed on-screen buttons
The navigation buttons are positioned with a fixed layout, so they remain accessible while users browse the product detail page.
Visible thumbnails and hover panel
The interface discreetly displays only the product images. On hover, a descriptive panel opens and can show:
- previous / next label;
- product name;
- price, if enabled.
On mobile, the panel is triggered by tap, with behaviour optimized for touch devices.
Circular navigation
If the user reaches the first or last product in the list, navigation can continue in a loop:
- from the first product back to the last;
- from the last product back to the first.
Technical aspects of the module
The module was developed for PrestaShop 8.2 compatibility, following a modular approach across both frontend and backend.
Architecture
- custom PrestaShop module;
- integration through theme hooks;
- frontend assets loaded in the front office;
- dedicated template for the navigation markup;
- responsive behaviour handled with custom CSS;
- context logic managed in JavaScript.
User experience
The interface was designed to be visible without being intrusive:
- compact thumbnails on the sides of the page;
- expandable details shown only on hover or tap;
- optimized layout for desktop and smartphone;
- fewer clicks required to compare multiple products.
Implemented customizations
During development, several functional improvements were introduced, including:
- prioritizing products clicked within product blocks on the product detail page;
- updating the navigation context from brand pages as well;
- cyclic behaviour for the previous and next buttons;
- control over price visibility;
- markup optimization for better rendering within the site’s custom theme.
Results
This module improves catalogue browsing and makes it easier to move between similar products or products belonging to the same list.
From a UX perspective, the main benefit is reduced navigation friction: users remain focused on the product detail page and can continue exploring the catalogue without interrupting their browsing flow.
For a technical e-commerce site or a catalogue with many variants, this navigation logic can help achieve:
- faster product comparison;
- longer engagement with product pages;
- more intuitive navigation;
- better use of category, search, and brand listings.
GitHub repository
The module is also available on GitHub, where it can be downloaded, reviewed, and customized for future developments.
Repository link: GITHUB REPOSITORY
Technologies used
- PrestaShop 8.2
- PHP
- Smarty
- JavaScript
- Responsive CSS
- Git / GitHub
Do you need a similar module for your e-commerce store?
I develop custom PrestaShop modules, tailored integrations, and frontend components designed to improve usability, performance, and catalogue management.
If you want to build a custom feature for your online store, you can contact me through AndRed.it.