PrestaShop Catalogue Management

Step-by-Step Product Configurator — Visual Options, Live Preview & Price Impact (PrestaShop 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
  • Unlimited steps per product: visual choices (photo thumbnail or color swatch) and engraving fields
  • Real-time composed preview: transparent PNG layers stacked on the product photo + positionable engraved text
  • Price impact per option (positive or negative), applied server-side through the native price calculation — nothing can be tampered with in JavaScript
  • Every configuration creates a native customization: isolated cart line and readable summary in cart, order and invoice
  • Compatible with PrestaShop 8.0 to 9.x, multi-currency, combinations and guest checkout
PrestaShop 8 & 9 Multi-currency Live preview No Composer
  • 30-day refund
  • 12 months updates
  • 24h support
www.datafirefly.com/en/
Step-by-step product configurator in PrestaShop with visual options and live price preview
v1.0.0 · updated 2026-07-16
What it does

The short version.

01

Guided step-by-step flow

Create as many steps as each product needs: a clear stepper guides the customer (1 · Color, 2 · Engraving, 3 · Accessory…). Every step can be required or optional, visual choice or free text.

02

Real-time composed preview

Each option can carry a transparent PNG layer stacked on the product photo. The customer watches the bottle turn blue, the bamboo cap appear, the engraving settle on the product body — before ever adding to cart.

03

Server-side pricing

Every option carries a surcharge (or a discount) defined tax-excluded. The displayed total is indicative; the real calculation goes through PrestaShop's native price hook with currency conversion and VAT. Impossible to falsify from the browser.

04

Native customization, clean cart

Each validated configuration creates a native PrestaShop customization: two different configurations of the same product make two distinct cart lines, and the summary (Color: Ocean blue · Engraving: Lea) shows up naturally in cart, order, invoice and back office.

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 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

Engraved bottles, personalized jewelry, configurable furniture, composed gift sets: as soon as a product comes in colors, finishes and paid options, native combinations hit their limits — combinatorial explosion, unmanageable stock, no engraving possible. The Product Configurator adds a guided flow right on the product page: the customer picks, sees, and pays the right price, without you creating a single extra combination.

§ 02

A preview that sells for you

Each option can carry a transparent PNG layer, stacked in real time on the product photo. Add the engraving overlay — text position, size and color tuned to the percent from the back office — and the customer sees exactly what they will receive. It is the most direct conversion lever in made-to-order: nobody abandons a cart they have already visualized.

§ 03

The right price, applied where nobody can cheat

Every option and every engraving field carries a tax-excluded price impact, positive or negative. The total updates live in the visitor's currency, but that amount is display only: the actual surcharge is applied by PrestaShop's native price calculation, server-side, with currency conversion and the customer's VAT context. A cart tweaked in the browser console will never change the billed price.

§ 04

Native customizations, not a fragile overlay

Rather than reinventing the cart, the module builds on PrestaShop's native customizations: each validated configuration creates its own line, with a readable summary (Color: Ocean blue · Engraving: Lea · Accessory: Bamboo cap) that follows the order through to the invoice and the back office. Your fulfillment workflows do not change, neither do your accounting exports.

§ 05

A back office built for speed

Two tabs under Catalog are all it takes: Steps, attached to a product through an autocomplete search, and their Options, with thumbnail and layer uploads resized automatically. Default option, required steps, negative impacts for base bundles: everything is configured without touching the theme. On order validation the configuration is archived; abandoned cart configurations are purged automatically after sixty days.