PrestaShop Catalogue Management

Step-by-Step Product Configurator: Visual Options, Live Preview & Price Impact (PrestaShop 1.7, 8 & 9)

Every product becomes configurable, step by step

Color, engraving, accessory: your customers compose their product through a guided flow, watch the result build up layer by layer in real time, and the right price lands in the cart — computed server-side, tamper-proof.

At a glance

10 field types (dropdowns, radio cards, color swatches, image thumbnails, text, upload, number, date) with "Show only if…" conditional fields
One configurator for several products or whole categories, duplicated in one click
Real-time composed preview (PNG layers, tint, styled text), or turned off to keep the theme or page builder images
Price and weight calculated server-side per option: fixed, percentage, per character or formula, native weight-based shipping
Creative Elements: dedicated hook, information link opening a template in a window, cart popup with the customization details

PrestaShop 1.7, 8 & 9 Multi-currency Live preview Creative Elements No Composer

30-day refund
12 months updates
24h support

Built by a PrestaShop Certified Agency

www.datafirefly.com/en/

Step-by-step product configurator in PrestaShop with visual options and live price preview

v1.3.0 · updated 2026-10-11

What it does

The short version.

Guided step-by-step flow

Create as many steps as each product needs: 10 field types, visual choices, engraving, file upload, with conditional fields that only appear when a given option is chosen (the frame choice only for a framed print). Step numbers and the steps bar can be shown or hidden to match your design.

Real-time composed preview

Each option can carry a transparent PNG layer stacked on the product photo, or tint its silhouette. Engraved text renders live with the font, size and color chosen by the customer, inside placement zones you draw with the mouse. The preview turns off in one click when images are handled by a page builder.

Server-side pricing

Each option carries a tax-excluded impact (fixed, percentage of the base price, per character, per unit or formula) and a weight. The displayed total is indicative; the real calculation goes through PrestaShop's native price mechanism with currency conversion and VAT, and the weight is added to the cart for shipping.

Built for page builders

Place the configurator wherever you want with the displayDfProductConfigurator hook, from the Creative Elements Modules or Shortcode widget, without touching the page images or blocks. Each field can show an information link ("Material Guide") that opens a template designed in Creative Elements in a window.

One configurator, a whole catalog

Link a configurator to several products and to whole categories, subcategories included: each product keeps its own base price. Duplicate a configurator in one click to build a product range; conditions between fields are rewired to the copy automatically.

Clean cart, workshop ready

Each configuration creates a native PrestaShop customization with a readable summary, from cart to invoice. After adding, a popup shows the product, every choice and the cart totals with "Continue shopping" and "Proceed to checkout". The order detail groups the summary, the customer files and the final visual.

The long version

Everything you'd want to know before you install.

A detailed look at how Step-by-Step Product Configurator: Visual Options, Live Preview & Price Impact (PrestaShop 1.7, 8 & 9) works, why we built it the way we did, and the thinking behind the features above.

§ 01

Sell made-to-order without blowing up your catalog

Photo art, engraved bottles, personalized jewelry, configurable furniture: as soon as a product comes in sizes, finishes and paid options, native combinations hit their limits (combinatorial explosion, unmanageable stock, no engraving). The Product Configurator adds a guided flow right on the product page: the customer chooses, sees, and pays the right price, without you creating a single extra combination.

§ 02

A preview that sells for you, or your own visuals

Each option can carry a transparent PNG layer stacked in real time on the product photo, and engraved text renders with the chosen font, size and color. If your product pages are built with Creative Elements, turn the preview off: your galleries and blocks stay intact, and the configurator sits under the title and price thanks to its dedicated hook.

§ 03

The right price, applied where nobody can cheat

Each option carries a tax-excluded price impact, positive or negative, and a weight. The total updates live in the visitor's currency, but that amount is only a display: the real surcharge is applied by PrestaShop's native price calculation, server-side, with currency conversion and the customer's VAT. Option weights are added to the cart, which keeps weight-based shipping and your free-shipping threshold accurate.

§ 04

Native customizations, not a fragile overlay

Rather than reinventing the cart, the module relies on PrestaShop's native customizations: each validated configuration creates its own line with a readable summary (Size: 40 × 60 cm · Type: Framed Print · Frame: Walnut) that follows the order to the invoice and the back office. After adding, a popup sums up the choices and offers to continue shopping or check out.

§ 05

An admin built for speed

One screen per configurator: the targeted products and categories, then the fields, which you reorder by drag-and-drop and collapse to keep an overview. Each field carries its options (label, price, weight, reference, color, thumbnail), its display conditions picked from a list and, if needed, an information link. A configurator can be duplicated in one click to build a range, and three demo sets can be imported from the module settings.

Everything included

The long list.

Guided step-by-step flow — Create as many steps as each product needs: 10 field types, visual choices, engraving, file upload, with conditional fields that only appear when a given option is chosen (the frame choice only for a framed print). Step numbers and the steps bar can be shown or hidden to match your design.

Real-time composed preview — Each option can carry a transparent PNG layer stacked on the product photo, or tint its silhouette. Engraved text renders live with the font, size and color chosen by the customer, inside placement zones you draw with the mouse. The preview turns off in one click when images are handled by a page builder.

Server-side pricing — Each option carries a tax-excluded impact (fixed, percentage of the base price, per character, per unit or formula) and a weight. The displayed total is indicative; the real calculation goes through PrestaShop's native price mechanism with currency conversion and VAT, and the weight is added to the cart for shipping.

Built for page builders — Place the configurator wherever you want with the displayDfProductConfigurator hook, from the Creative Elements Modules or Shortcode widget, without touching the page images or blocks. Each field can show an information link ("Material Guide") that opens a template designed in Creative Elements in a window.

One configurator, a whole catalog — Link a configurator to several products and to whole categories, subcategories included: each product keeps its own base price. Duplicate a configurator in one click to build a product range; conditions between fields are rewired to the copy automatically.

Clean cart, workshop ready — Each configuration creates a native PrestaShop customization with a readable summary, from cart to invoice. After adding, a popup shows the product, every choice and the cart totals with "Continue shopping" and "Proceed to checkout". The order detail groups the summary, the customer files and the final visual.

10 field types: dropdown, radio buttons, color swatches, image thumbnails, checkboxes, text, text area, number, date, file upload

Unlimited fields, required or optional, reordered by drag-and-drop (fields and options), collapsible in the editor

"Show only if…" conditional fields: trigger options picked from a list, several options allowed, chained dependencies

One configurator linked to several products (search by name, reference or ID) and to categories, subcategories optionally included

One-click configurator duplication, conditions and linked colors rewired on the copy

Price impact per option: fixed amount, percentage of the base price, per character, per unit, or formula (base, qty, value, char_count)

Weight per option added to the cart weight: native carrier weight ranges and free-shipping threshold

Server-side price calculation and validation, the front end only displays

Information link per field opening a window: Creative Elements template (shortcode), widget or HTML

Dedicated displayDfProductConfigurator hook and widget for Creative Elements and other page builders, automatic or manual placement

Popup after adding to cart: product, customization details, cart totals, "Continue shopping" and "Proceed to checkout", or the theme's native popup

Adjustable display: step numbers and steps bar can be hidden, name and description can be hidden, quantity built into the configurator

Optional composed preview: PNG layers with stacking order, color tint masked to the product silhouette, overlaid styled text

Always-visible preview: sticky column on desktop, compact bar pinned at the top on mobile

Placement zones drawn with the mouse in the back office, other fields' zones shown as ghosts

Text and artwork movable by the customer within their zone (or locked position), position saved with the order

Font (26 built-in fonts or theme fonts), text size and color chosen by the customer

Linked colors: a text field or PNG layer takes the color of the option chosen in another field

Secure file upload: whitelisted extensions, MIME detection, token-based file names

Final composed visual generated on add to cart, validated and re-encoded server-side (PNG)

Customizations panel in the order detail: final visual, field-by-field summary, customer files

Native PrestaShop customizations: separate cart lines, readable summary from cart to invoice

Three display modes: embedded block, full-screen popup, or product page replacement

Classic theme: the configurator keeps the customer's choices when the page reloads after a quantity change

Option to hide the theme's native add-to-cart button

Works with combinations, multiple currencies and guests

One-click demos: mug, vase, t-shirt, embroidered patch, beanie and photo art (wall art without preview)

Self-repairing updates: schema and hooks repaired automatically

Module interface translated into 7 languages (FR, EN, ES, DE, IT, PL, NL)

Vanilla JavaScript, no jQuery dependency, no Composer

Changelog · 5 releases

What's shipped.

Every release goes through compatibility testing against the last three platform minors. No feature hidden in a fix, no fix hidden in a feature.

Fix v1.3.0 2026-10-11

PrestaShop 1.7.7 and 1.7.8 support (PHP 7.1 and above), in addition to PrestaShop 8 and 9
One configurator linked to several products and to categories (subcategories optional), one-click duplication
Conditional fields: trigger options picked from a list, several options allowed, chained dependencies
Information link per field opening a window (Creative Elements template, widget or HTML)
Dedicated displayDfProductConfigurator hook and widget to place the configurator from a page builder
Popup after adding to cart with the customization details, or the theme's native popup
Display settings: step numbers and steps bar can be hidden, optional internal name, quantity built into the configurator
Drag-and-drop for fields and options in the editor, collapsible fields
Classic theme: the configurator keeps the customer's choices when the page reloads after a quantity change
New photo art demo (wall art, no preview)

Fix v1.2.1 2026-10-04

Live preview identical to the visual sent to the workshop: long text no longer wraps inside its zone
Validation messages, price labels (per character, per unit, calculated price) and front-end messages translated into the 7 languages
Conditional fields: a hidden step no longer leaves an empty pill in the steps bar
Zone editor respects the preview proportions (wide formats such as patches and banners)
Back office: the linked color selector shows the field name, transparent option images on a checkerboard, last hard-coded strings translated
Caches cleared automatically on update (templates, CSS, JS)

Fix v1.2.0 2026-09-14

Linked colors: a text field or PNG layer can take the color of the option chosen in another field (one embroidery choice drives border, symbol and text)
Visual recoloring: the option PNG becomes a mask filled with the linked color, in the preview and the final visual
One-click demo imports from the module settings (mug / vase / t-shirt, embroidered patch + beanie)
Cache-proof option and base images (automatic versioning)
Preview always visible while configuring: sticky column on desktop, compact bar pinned at the top on mobile

Fix v1.1.0 2026-09-03

Font, size and text color chosen by the customer: built-in Google Fonts catalog (26 fonts) or theme fonts, whitelist and bounds validated server-side
Final composed visual generated on add to cart and re-encoded server-side
Customizations panel in the order detail: final visual, field-by-field summary, downloadable customer files
Mouse-driven placement zone editor: move, resize handles, other fields' zones shown as ghosts
Three display modes: embedded, full-screen popup, or product page replacement with quantity selector
Module interface translated into 7 languages (FR, EN, ES, DE, IT, PL, NL)

Major v1.0.0 2026-07-16

Initial release
Per-product configuration steps: visual choices and text engraving
Real-time composed preview with PNG layers and overlaid text
Per-option price impact applied server-side (multi-currency, VAT)
Separate cart lines through native customizations
Two back-office tabs with product autocomplete

Questions

Anything still unclear?

Does the module work on PrestaShop 1.7?

Yes, since version 1.3.0: PrestaShop 1.7.7 and 1.7.8, as well as 8.x and 9.x. The module was tested on PrestaShop 1.7.8.11 with the Classic theme on PHP 7.4.

Can I use it with Creative Elements or another page builder?

Yes. Set the placement to "Manual" in the settings, then place the configurator with the Creative Elements Modules widget (hook displayDfProductConfigurator) or the Shortcode widget ({hook h='displayDfProductConfigurator'}). Turn the preview off: images and blocks created in the page builder are never modified. Each field's information link can open a Creative Elements template in a window.

Do I have to rebuild the configurator for every product?

No. A configurator can be linked to several products and to whole categories; each product keeps its own base price. For a close variant, duplicate the configurator in one click: the copy is created inactive, with no linked product, and its conditions rewired.

How do I calculate shipping without combinations?

Give each option a weight (for example per size or per medium): PrestaShop adds it to the cart weight and your carriers' weight ranges apply as usual. Option prices count in the cart total, so the free-shipping threshold works too. Carrier dimension limits only read the product's own dimensions, not the chosen options.

How is it different from PrestaShop's native combinations?

Combinations create one reference per variant, each with its own stock and image: unmanageable beyond a few options. The configurator works on top of the product: no combination created, free price impacts (even negative), text engraving, and a composed preview combinations cannot produce. Both coexist: the configurator follows the selected combination.

Can the price be tampered with in the browser?

No. The total shown on the product page is purely indicative. The real surcharge is applied server-side from the configuration stored in the database, formulas and per-character pricing included. Tampering with the DOM or requests never changes the invoiced price.

How does the configuration appear in orders?

Each configuration creates a native PrestaShop customization with a readable summary, for example Color: Ocean blue · Engraving: Lea · Great Vibes 34px Gold [pos. 42% / 61%]. This summary follows the line in the cart, the order, the invoice and the back office, with no extra module.

Can a single customer choice drive several preview elements?

Yes. A text field or PNG layer can be linked to another field's choice: the customer picks the embroidery color once and the border, symbol and text all take that color, in the live preview, the summary and the final visual. Linked colors are validated server-side like everything else.

What does the workshop receive for production?

Three things in the order detail: the field-by-field summary (choices, texts, font, size, color, position), the files uploaded by the customer in their original quality, and the final composed visual as a downloadable PNG.

How does the composed preview work?

Each option can carry a transparent PNG layer with its stacking order, tint the product silhouette, or the field can render styled text inside a placement zone you draw with the mouse. The customer can move their text or artwork within the zone; the position is saved with the order. The preview is optional.

Can the customer choose the font, size and color of their text?

Yes, field by field: you tick the offered fonts among the 26 of the built-in catalog (or declare theme fonts with @font-face), set size bounds and define a color palette, or link the color to another field's choice. Each value is validated server-side against your lists.

Does the module handle multi-currency and VAT?

Yes. Impacts are set tax-excluded in the shop's default currency, then converted automatically into the visitor's currency and shown tax-included or excluded according to their group. The server-side calculation applies the same logic to the cart.

Do I need to modify my theme?

No. Three display modes are built in: a block on the product page, a Configure button opening a full-screen popup, or full replacement of the product page with its own quantity selector. For precise placement, a dedicated hook can be used from the page builder or the theme. Vanilla JavaScript, no Composer.

€129.00

One-time · 12 months updates

Read the docs

Unlimited dev & staging installs
Source code included
30-day refund
24h support · EN / FR

5.0/5 20 reviews

giuliano 9 October 2026 ★★★★★

“very useful module, with the bulk matching we restored the catalogue after importing from WooCommerce where we only had one image per variation, then just had…”
Assign Images to Combinations by Color for PrestaShop 8 & 9
giuliano stella 2 October 2026 ★★★★★

“very useful for managing products on the front page”
DataFirefly Product Positions — Drag & drop categories for PrestaShop 8 & 9
giuliano stellac 2 October 2026 ★★★★★

“great module for omnichannel management, it lets you assign products to the catalogue even without stock quantities that stay hidden from b2c customers but are available…”
Hide Products by Customer Group for PrestaShop 8 & 9 + In-Store Tablet Catalog
Giuliano 30 July 2026 ★★★★★

“Exceptional technical support, fast, available and knowledgeable.”
DataFirefly Mega Menu & Burger

Step-by-Step Product Configurator: Visual Options, Live Preview & Price Impact (PrestaShop 1.7, 8 & 9)