Step-by-Step Product Configurator — Complete guide

Overview

DF Product Configurator turns a PrestaShop product page into a guided step-by-step configurator: the customer picks a color, adds an engraving, selects an accessory, watches the composed result build up in real time on the product photo, and the matching price surcharge is applied to the cart — server-side, tamper-proof.

The module relies on two simple concepts:

• Step: a question asked to the customer, attached to one product. Two types exist: Visual choice (the customer clicks an option) and Text / engraving (the customer types free text).
• Option: a possible answer of a visual-choice step, with its visual (photo thumbnail or color swatch), its preview layer and its price impact.

Installation

1. In the PrestaShop back office, open Modules → Module Manager → Upload a module.
2. Upload dfproductconfigurator.zip and click Install.
3. Two new tabs appear under Catalog: Configurator — Steps and Configurator — Options.

Creating a step

1. Open Catalog → Configurator — Steps and click Add.
2. Set the product: type at least 3 characters in the search field and click a result — the product ID fills in automatically.
3. Pick the step type: Visual choice or Text / engraving.
4. Enter the label in every language (for example “Color”, “Engraving”, “Accessory”). This is the text shown in the stepper.
5. Tick Required if the customer must answer this step before adding to cart.
6. Set the position to order the steps.

Engraving-specific fields

For a Text / engraving step, extra fields appear:

• Maximum length: number of characters allowed (also validated server-side).
• Price impact: surcharge applied as soon as the customer types a text (0 for free engraving).
• X / Y position: text position on the preview, as a percentage of image width and height (50 / 50 = center).
• Text size and color: overlay size in pixels and hexadecimal color.
• Placeholder: translatable prompt text shown in the field.

Creating the options of a step

1. In the steps list, click the Options row action of the relevant step (or open Catalog → Configurator — Options).
2. Click Add and enter the option’s multilingual label.
3. Set its tax-excluded price impact: positive (surcharge), negative (discount) or zero (included).
4. Pick the option card’s visual: either a hexadecimal color (shown as a round swatch) or a photo thumbnail (automatically resized to 400 px).
5. Optionally upload a transparent PNG layer (up to 1600 px): it will be stacked on the product photo in the composed preview.
6. Tick Default to pre-select this option — one default per step, enforced by the module.

How pricing works

Price impacts are defined tax-excluded, in the shop’s default currency. On the product page, the module converts them to the visitor’s currency and displays them tax-included or tax-excluded depending on the customer group, with a live-recalculated total.

That displayed total is purely indicative. At cart time, the actual surcharge is applied by PrestaShop’s native price calculation hook, server-side, from the configuration stored in the database: exchange-rate currency conversion, VAT of the customer context, rounding to the currency’s decimals. A customer tampering with the DOM or requests cannot change the billed price.

Customer journey on the product page

The configurator block displays automatically on the product page (additional-information hook) as soon as at least one active step exists for the product. The customer:

1. navigates between steps through the stepper (completed steps are checked);
2. clicks options or types the engraving — the composed preview and the total update instantly;
3. clicks Add to cart: the module validates the required steps, saves the configuration server-side, then lets the add-to-cart proceed normally.

If a required step is incomplete, the configurator opens on that step with an explicit message and the add-to-cart is blocked.

Cart, order and invoice

Each validated configuration creates a native PrestaShop customization: two different configurations of the same product produce two distinct cart lines, each with its own price. The readable summary (for example Color: Ocean blue · Engraving: Lea · Accessory: Bamboo cap) appears under the product name in the cart, the order, the invoice and the back-office order detail — no extra setting required.

On order validation, the configuration is archived in a dedicated table. Abandoned cart configurations are purged automatically after 60 days.

Combinations, guests and multi-currency

• Combinations: the configurator follows the selected combination — the preview rebuilds and the displayed base price is the combination’s.
• Guest customers: a cart is created automatically if needed when the configuration is saved.
• Multi-currency: conversion uses the shop’s exchange rate, both for display and for the server-side calculation.

Uninstall and cleanup

The module cleans up after itself:

• on product deletion, its steps, options and option images are removed;
• on uninstall, the module tables are dropped and the customization fields it created are released (product counters are decremented).

Troubleshooting

The configurator block does not show

• Check that at least one active step is attached to the right product (correct product ID).
• Clear the PrestaShop cache (Advanced Parameters → Performance).
• Check that your theme calls the displayProductAdditionalInfo hook (the Classic theme and virtually all themes do).

The composed preview is misaligned

The PNG layer does not share the cover photo’s framing. Re-export the layer with the same ratio and product position as the main image.

The surcharge does not show in the cart

• Check that the selected option actually carries a non-zero price impact.
• The cart price is recalculated by PrestaShop: clear the cache and retest with a fresh cart.

Two identical adds create two lines

That is the expected behavior when configurations differ. If they are strictly identical and added within the same session, the module reuses the same customization and increments the quantity.