PrestaShop Gestion catalogue

Configurateur de Produit par Étapes : options visuelles, aperçu live et impact prix (PrestaShop 1.7, 8 & 9)

Chaque produit devient configurable, étape par étape

Couleur, gravure, accessoire : vos clients composent leur produit dans un parcours guidé, voient le résultat en temps réel calque par calque, et le juste prix s'ajoute au panier — calculé côté serveur, infalsifiable.

En un coup d'œil

10 types de champs (listes, cartes radio, pastilles couleur, vignettes image, texte, upload, nombre, date) avec champs conditionnels « Afficher seulement si… »
Un configurateur pour plusieurs produits ou des catégories entières, duplicable en un clic
Aperçu composé en temps réel (calques PNG, teinte, texte stylé), ou désactivé pour garder les images du thème ou du page builder
Prix et poids calculés côté serveur par option : fixe, pourcentage, par caractère ou formule, frais de port au poids natifs
Creative Elements : hook dédié, lien d'information ouvrant un modèle en fenêtre, popup panier avec le détail de la personnalisation

PrestaShop 1.7, 8 & 9 Multi-devise Aperçu live Creative Elements Sans Composer

Remboursement 30 jours
12 mois de mises à jour
Support 24h

Développé par une agence certifiée PrestaShop

www.datafirefly.com/

Configurateur de produit par étapes dans PrestaShop, avec options visuelles et aperçu du prix en direct

v1.3.0 · mis à jour 2026-10-11

Ce que ça fait

La version courte.

Parcours guidé par étapes

Créez autant d'étapes que chaque produit l'exige : 10 types de champs, choix visuels, gravure, upload de fichier, avec des champs conditionnels qui n'apparaissent que si une option donnée est choisie (le choix du cadre seulement pour un tirage encadré). Numérotation et barre d'étapes s'affichent ou se masquent selon votre charte.

Aperçu composé en temps réel

Chaque option peut porter un calque PNG transparent empilé sur la photo du produit, ou teinter la silhouette. Le texte gravé se rend en direct avec la police, la taille et la couleur choisies par le client, dans des zones de placement que vous dessinez à la souris. L'aperçu se désactive d'un clic quand les images sont gérées par un page builder.

Tarification côté serveur

Chaque option porte un impact défini hors taxes : fixe, pourcentage du prix de base, par caractère, par unité ou formule, ainsi qu'un poids. Le total affiché est indicatif ; le vrai calcul passe par le mécanisme de prix natif de PrestaShop avec conversion de devise et TVA, et le poids s'ajoute au panier pour les frais de port.

Pensé pour les page builders

Placez le configurateur où vous voulez avec le hook displayDfProductConfigurator, depuis le widget Modules ou Shortcode de Creative Elements, sans toucher aux images ni aux blocs de la page. Chaque champ peut afficher un lien d'information (« Guide des matières ») qui ouvre en fenêtre un modèle mis en page dans Creative Elements.

Un configurateur, tout un catalogue

Liez un configurateur à plusieurs produits et à des catégories entières, sous-catégories comprises : chaque produit garde son propre prix de base. Dupliquez un configurateur en un clic pour décliner une gamme ; les conditions entre champs sont recâblées automatiquement sur la copie.

Panier propre, atelier servi

Chaque configuration crée une personnalisation native PrestaShop avec un récapitulatif lisible, du panier à la facture. Après l'ajout, une popup montre le produit, chaque choix et les totaux du panier avec « Continuer mes achats » et « Commander ». Le détail de commande regroupe récapitulatif, fichiers du client et visuel final.

La version longue

Tout ce que vous voudriez savoir avant d'installer.

Un regard détaillé sur le fonctionnement de Configurateur de Produit par Étapes : options visuelles, aperçu live et impact prix (PrestaShop 1.7, 8 & 9), pourquoi nous l'avons conçu ainsi, et la réflexion derrière les fonctionnalités ci-dessus.

§ 01

Vendre du sur-mesure sans exploser votre catalogue

Tableaux photo, gourdes gravées, bijoux personnalisés, mobilier configurable : dès qu'un produit se décline en tailles, finitions et options payantes, les déclinaisons natives montrent leurs limites (explosion combinatoire, stocks ingérables, aucune gravure possible). Le Configurateur de Produit ajoute un parcours guidé directement sur la fiche produit : le client choisit, voit, et paie le juste prix, sans que vous ayez créé une seule déclinaison supplémentaire.

§ 02

Un aperçu qui vend à votre place, ou vos propres visuels

Chaque option peut porter un calque PNG transparent, empilé en temps réel sur la photo du produit, et le texte gravé se rend avec la police, la taille et la couleur choisies. Si vos fiches sont construites avec Creative Elements, désactivez l'aperçu : vos galeries et vos blocs restent intacts, et le configurateur se place sous le titre et le prix grâce à son hook dédié.

§ 03

Le prix juste, appliqué là où personne ne peut tricher

Chaque option porte un impact prix hors taxes, positif ou négatif, et un poids. Le total s'actualise en direct dans la devise du visiteur, mais ce montant n'est qu'un affichage : la surcharge réelle est appliquée par le calcul de prix natif de PrestaShop, côté serveur, avec conversion de devise et TVA du contexte client. Le poids des options s'ajoute au panier, ce qui garde vos frais de port au poids et votre seuil de livraison gratuite justes.

§ 04

Des personnalisations natives, pas une surcouche fragile

Plutôt que de réinventer le panier, le module s'appuie sur les personnalisations natives de PrestaShop : chaque configuration validée crée sa propre ligne, avec un résumé lisible (Taille : 40 × 60 cm · Type : Tirage encadré · Cadre : Noyer) qui suit la commande jusqu'à la facture et au back-office. Après l'ajout, une popup récapitule les choix et propose de continuer ses achats ou de commander.

§ 05

Une administration pensée pour aller vite

Un seul écran par configurateur : les produits et catégories ciblés, puis les champs, que vous réordonnez par glisser-déposer et repliez pour garder une vue d'ensemble. Chaque champ porte ses options (libellé, prix, poids, référence, couleur, vignette), ses conditions d'affichage choisies dans une liste et, si besoin, un lien d'information. Un configurateur se duplique en un clic pour décliner une gamme, et trois jeux de démonstration s'importent depuis les réglages du module.

Tout est inclus

La liste complète.

Parcours guidé par étapes — Créez autant d'étapes que chaque produit l'exige : 10 types de champs, choix visuels, gravure, upload de fichier, avec des champs conditionnels qui n'apparaissent que si une option donnée est choisie (le choix du cadre seulement pour un tirage encadré). Numérotation et barre d'étapes s'affichent ou se masquent selon votre charte.

Aperçu composé en temps réel — Chaque option peut porter un calque PNG transparent empilé sur la photo du produit, ou teinter la silhouette. Le texte gravé se rend en direct avec la police, la taille et la couleur choisies par le client, dans des zones de placement que vous dessinez à la souris. L'aperçu se désactive d'un clic quand les images sont gérées par un page builder.

Tarification côté serveur — Chaque option porte un impact défini hors taxes : fixe, pourcentage du prix de base, par caractère, par unité ou formule, ainsi qu'un poids. Le total affiché est indicatif ; le vrai calcul passe par le mécanisme de prix natif de PrestaShop avec conversion de devise et TVA, et le poids s'ajoute au panier pour les frais de port.

Pensé pour les page builders — Placez le configurateur où vous voulez avec le hook displayDfProductConfigurator, depuis le widget Modules ou Shortcode de Creative Elements, sans toucher aux images ni aux blocs de la page. Chaque champ peut afficher un lien d'information (« Guide des matières ») qui ouvre en fenêtre un modèle mis en page dans Creative Elements.

Un configurateur, tout un catalogue — Liez un configurateur à plusieurs produits et à des catégories entières, sous-catégories comprises : chaque produit garde son propre prix de base. Dupliquez un configurateur en un clic pour décliner une gamme ; les conditions entre champs sont recâblées automatiquement sur la copie.

Panier propre, atelier servi — Chaque configuration crée une personnalisation native PrestaShop avec un récapitulatif lisible, du panier à la facture. Après l'ajout, une popup montre le produit, chaque choix et les totaux du panier avec « Continuer mes achats » et « Commander ». Le détail de commande regroupe récapitulatif, fichiers du client et visuel final.

10 types de champs : liste déroulante, boutons radio, pastilles couleur, vignettes image, cases à cocher, texte, zone de texte, nombre, date, upload de fichier

Champs illimités, obligatoires ou optionnels, réordonnables par glisser-déposer (champs et options), repliables dans l'éditeur

Champs conditionnels « Afficher seulement si… » : options déclencheuses choisies dans une liste, plusieurs options possibles, dépendances en chaîne

Un configurateur lié à plusieurs produits (recherche par nom, référence ou ID) et à des catégories, sous-catégories incluses en option

Duplication d'un configurateur en un clic, conditions et couleurs liées recâblées sur la copie

Impact prix par option : montant fixe, pourcentage du prix de base, par caractère, par unité, ou formule (base, qty, value, char_count)

Poids par option ajouté au poids du panier : tranches de poids des transporteurs et seuil de livraison gratuite natifs

Calcul et validation des prix côté serveur, le front n'est qu'un affichage

Lien d'information par champ ouvrant une fenêtre : modèle Creative Elements (shortcode), widget ou HTML

Hook dédié displayDfProductConfigurator et widget pour Creative Elements et les autres page builders, placement automatique ou manuel

Popup après ajout au panier : produit, détail de la personnalisation, totaux du panier, « Continuer mes achats » et « Commander », ou popup native du thème

Affichage réglable : numérotation et barre d'étapes masquables, nom et description masquables, quantité intégrée au configurateur

Aperçu composé optionnel : calques PNG avec ordre d'empilement, teinte couleur masquée sur la silhouette du produit, texte stylé superposé

Aperçu toujours visible : colonne sticky sur desktop, barre compacte épinglée en haut sur mobile

Zones de placement dessinées à la souris dans le back-office, zones des autres champs en fantôme

Texte et graphique déplaçables par le client dans leur zone (ou position verrouillée), position enregistrée avec la commande

Police (26 polices intégrées ou polices du thème), taille et couleur du texte au choix du client

Couleurs liées : un champ texte ou un calque PNG prend la couleur de l'option choisie dans un autre champ

Upload de fichier sécurisé : extensions en liste blanche, détection MIME, noms de fichiers à jeton

Visuel final composé à l'ajout au panier, validé et ré-encodé côté serveur (PNG)

Panneau Personnalisations dans le détail de commande : visuel final, récapitulatif champ par champ, fichiers du client

Personnalisations natives PrestaShop : lignes de panier isolées, récapitulatif lisible du panier à la facture

Trois modes d'affichage : bloc intégré, popup plein écran, ou remplacement de la fiche produit

Thème Classic : le configurateur garde les choix du client quand la fiche se recharge après un changement de quantité

Option pour masquer le bouton panier natif du thème

Compatible déclinaisons, multi-devises, invités

Démos en un clic : mug, vase, t-shirt, patch brodé, bonnet et tableau photo (art mural sans aperçu)

Mises à jour auto-réparantes : schéma et hooks réparés automatiquement

Interface du module traduite en 7 langues (FR, EN, ES, DE, IT, PL, NL)

JavaScript vanilla, aucune dépendance jQuery, sans Composer

Changelog · 5 versions

Ce qui a été livré.

Chaque version est testée en compatibilité avec les trois dernières versions mineures de la plateforme. Aucune fonctionnalité cachée dans un correctif, aucun correctif caché dans une fonctionnalité.

Majeure v1.3.0 2026-10-11

Compatibilité PrestaShop 1.7.7 et 1.7.8 (PHP 7.1 et plus), en plus de PrestaShop 8 et 9
Un configurateur lié à plusieurs produits et à des catégories (sous-catégories en option), duplication en un clic
Champs conditionnels : options déclencheuses choisies dans une liste, plusieurs options possibles, dépendances en chaîne
Lien d'information par champ ouvrant une fenêtre (modèle Creative Elements, widget ou HTML)
Hook dédié displayDfProductConfigurator et widget pour placer le configurateur depuis un page builder
Popup après ajout au panier avec le détail de la personnalisation, ou popup native du thème
Réglages d'affichage : numérotation et barre d'étapes masquables, nom interne optionnel, quantité intégrée au configurateur
Glisser-déposer des champs et des options dans l'éditeur, champs repliables
Thème Classic : le configurateur garde les choix du client quand la fiche se recharge après un changement de quantité
Nouvelle démo tableau photo (art mural, sans aperçu)

Majeure v1.2.1 2026-10-04

Aperçu en direct identique au visuel envoyé à l'atelier : un texte long ne passe plus à la ligne dans sa zone
Messages de validation, libellés de prix (au caractère, à l'unité, prix calculé) et messages du front traduits dans les 7 langues
Champs conditionnels : une étape masquée ne laisse plus de pastille vide dans le rail d'étapes
Éditeur de zones : respecte les proportions de l'aperçu (formats larges comme les patchs et bandeaux)
Back-office : le sélecteur de couleur liée affiche le nom du champ, images d'options transparentes sur damier, dernières chaînes en dur traduites
Caches vidés automatiquement à la mise à jour (templates, CSS, JS)

Majeure v1.2.0 2026-09-14

Couleurs liées : un champ texte ou un calque PNG peut prendre la couleur de l'option choisie dans un autre champ (un seul choix de broderie pilote bordure, symbole et texte)
Recoloration de visuels : le PNG de l'option devient un masque rempli par la couleur liée, dans l'aperçu et le visuel final
Imports de démonstration en un clic depuis les réglages du module (mug / vase / t-shirt, patch brodé + bonnet)
Images d'options et de base insensibles au cache (versionnage automatique)
Aperçu toujours visible pendant la configuration : colonne sticky sur desktop, barre compacte épinglée en haut sur mobile

Majeure v1.1.0 2026-09-03

Police, taille et couleur du texte au choix du client : catalogue Google Fonts intégré (26 polices) ou polices du thème, liste blanche et bornes validées côté serveur
Visuel final composé généré à l'ajout au panier et ré-encodé côté serveur
Panneau Personnalisations dans le détail de commande : visuel final, récapitulatif champ par champ, fichiers du client téléchargeables
Éditeur de zones de placement à la souris : déplacement, poignées de redimensionnement, zones des autres champs en fantôme
Trois modes d'affichage : intégré, popup plein écran, ou remplacement de la fiche produit avec sélecteur de quantité
Interface du module traduite en 7 langues (FR, EN, ES, DE, IT, PL, NL)

Majeure v1.0.0 2026-07-16

Version initiale
Étapes de configuration par produit : choix visuels et gravure de texte
Aperçu composé en temps réel avec calques PNG et texte superposé
Impact prix par option appliqué côté serveur (multi-devises, TVA)
Lignes de panier isolées via les personnalisations natives
Deux onglets back-office avec autocomplétion produit

Questions

Une question avant de commander ?

Le module fonctionne-t-il sur PrestaShop 1.7 ?

Oui, depuis la version 1.3.0 : PrestaShop 1.7.7 et 1.7.8, ainsi que 8.x et 9.x. Le module a été testé sur PrestaShop 1.7.8.11 avec le thème Classic sous PHP 7.4.

Puis-je l'utiliser avec Creative Elements ou un autre page builder ?

Oui. Passez l'emplacement en « Manuel » dans les réglages, puis placez le configurateur avec le widget Modules de Creative Elements (hook displayDfProductConfigurator) ou le widget Shortcode ({hook h='displayDfProductConfigurator'}). Désactivez l'aperçu : les images et les blocs créés dans le page builder ne sont jamais modifiés. Les liens d'information de chaque champ peuvent ouvrir un modèle Creative Elements en fenêtre.

Faut-il recréer le configurateur pour chaque produit ?

Non. Un configurateur peut être lié à plusieurs produits et à des catégories entières ; chaque produit garde son propre prix de base. Pour une variante proche, dupliquez le configurateur en un clic : la copie est créée inactive, sans produit lié, avec ses conditions recâblées.

Comment calculer les frais de port sans déclinaisons ?

Donnez un poids à chaque option (par exemple par taille ou par type de support) : PrestaShop l'ajoute au poids du panier et les tranches de poids de vos transporteurs s'appliquent normalement. Le prix des options compte dans le total du panier, donc le seuil de livraison gratuite fonctionne aussi. Les limites de dimensions des transporteurs ne lisent que les dimensions du produit, pas les options choisies.

Quelle différence avec les déclinaisons natives de PrestaShop ?

Les déclinaisons créent une référence par variante, chacune avec son stock et son image : ingérable au-delà de quelques options. Le configurateur travaille par-dessus le produit : aucune déclinaison créée, impacts de prix libres (même négatifs), gravure de texte en plus, et un aperçu composé que les déclinaisons ne peuvent pas produire. Les deux coexistent : le configurateur suit la déclinaison sélectionnée.

Le prix peut-il être manipulé dans le navigateur ?

Non. Le total affiché sur la fiche produit est purement indicatif. Le vrai supplément est appliqué côté serveur à partir de la configuration stockée en base, formules et tarification par caractère comprises. Trafiquer le DOM ou les requêtes ne change jamais le prix facturé.

Comment la configuration apparaît-elle dans les commandes ?

Chaque configuration crée une personnalisation native PrestaShop avec un récapitulatif lisible, par exemple Couleur : Bleu océan · Gravure : Léa · Great Vibes 34px Or [pos. 42 % / 61 %]. Ce récapitulatif suit la ligne dans le panier, la commande, la facture et le back-office, sans module supplémentaire.

Un seul choix du client peut-il piloter plusieurs éléments de l'aperçu ?

Oui. Un champ texte ou un calque PNG peut être lié au choix d'un autre champ : le client choisit une fois la couleur de broderie et la bordure, le symbole et le texte prennent tous cette couleur, dans l'aperçu en direct, le récapitulatif et le visuel final. Les couleurs liées sont validées côté serveur comme tout le reste.

Que reçoit l'atelier pour la production ?

Trois choses dans le détail de commande : le récapitulatif champ par champ (choix, textes, police, taille, couleur, position), les fichiers uploadés par le client dans leur qualité d'origine, et le visuel final composé de la personnalisation en PNG téléchargeable.

Comment fonctionne l'aperçu composé ?

Chaque option peut porter un calque PNG transparent avec son ordre d'empilement, teinter la silhouette du produit, ou le champ peut rendre un texte stylé dans une zone de placement que vous dessinez à la souris. Le client peut déplacer son texte ou son graphique dans la zone ; la position est enregistrée avec la commande. L'aperçu est optionnel.

Le client peut-il choisir la police, la taille et la couleur de son texte ?

Oui, champ par champ : vous cochez les polices proposées parmi les 26 du catalogue intégré (ou déclarez des polices du thème en @font-face), fixez les bornes de taille et définissez une palette de couleurs, ou liez la couleur au choix d'un autre champ. Chaque valeur est validée côté serveur contre vos listes.

Le module gère-t-il le multi-devises et la TVA ?

Oui. Les impacts sont définis HT dans la devise par défaut de la boutique, puis convertis automatiquement dans la devise du visiteur et affichés TTC ou HT selon son groupe. Le calcul côté serveur applique la même logique au panier.

Faut-il modifier mon thème ?

Non. Trois modes d'affichage sont intégrés : un bloc sur la fiche produit, un bouton Configurer ouvrant une popup plein écran, ou le remplacement complet de la fiche avec son propre sélecteur de quantité. Pour un placement précis, un hook dédié s'utilise depuis le page builder ou le thème. JavaScript vanilla, sans Composer.

€129.00

Achat unique · 12 mois de mises à jour

Lire la documentation

Installations dev & pré-prod illimitées
Code source inclus
Remboursement 30 jours
Support 24h · EN / FR

5,0/5 20 avis

giuliano 9 octobre 2026 ★★★★★

“module très utile, grâce à l'association massive on a pu restaurer le catalogue après l'importation depuis WooCommerce où on n'avait qu'une seule image par variation, sauf…”
Associer les Images aux Déclinaisons par Couleur PrestaShop 8 & 9
giuliano stella 2 octobre 2026 ★★★★★

“très utile pour gérer les produits en première page”
DataFirefly Positions Produits — Drag & drop catégories pour PrestaShop 8 & 9
giuliano stellac 2 octobre 2026 ★★★★★

“super module pour une gestion omnicanale, il permet d'assigner au catalogue des produits même sans quantité qui ne restent pas visibles pour les clients b2c mais…”
Masquer des Produits par Groupe Client PrestaShop 8 & 9 + Catalogue Tablette Magasin
Giuliano 30 juillet 2026 ★★★★★

“Assistance technique exceptionnelle, rapide, disponible et compétente.”
DataFirefly Mega Menu & Burger

Configurateur de Produit par Étapes : options visuelles, aperçu live et impact prix (PrestaShop 1.7, 8 & 9)