¶ Configurator on the product page - form, visual and AI

The configurator in Hummerce is part of the product page where the customer assembles or personalizes a configurable product, sees the current price, and adds the configuration to the cart. This page describes the ready-made configurators in the store templates, the technologies behind them, connecting external configurators, and sharing the configurator. Overview of the whole area: Product configurators.

As of Hummerce 2.35 (2.35.50 or newer recommended for the configurators), updated 2026-09-28.

¶ Benefits and use cases

Quick start - a product with typical components works on the ready-made BS5 configurator once it's set up in the panel and its look is adjusted.
The customer sees the result and the price before buying - fewer "that's not what I imagined" questions and returns.
Print-ready files at production resolution, straight from the customer's design.
AI-assisted personalization - a customer without an idea for text or graphics gets suggestions, which shortens the path to the cart.
An existing configurator (e.g. a manufacturer's 3D one) doesn't need to be rewritten - it can be embedded and connected to the Hummerce cart.
A configurator on partner and distributor sites - the customer configures the product at the partner's site, while the order and the price come from the store.
Ready-made configurators in the store template - typical configurable products don't need a configurator written from scratch. The open structure lets you extend it, replace it, or connect it to an external configurator while keeping the Hummerce cart, prices and orders.

¶ How it works

¶ Ready-made configurators

Configurator	For	BS5	BS4
Form-based	sets built from items and products with properties: dropdowns, number and text fields, file or photo upload, variant selection, units of measure, dependencies between options	yes (from 2.34)	-
Visual (personalization)	text and photo on a working area with a live preview: move, scale, rotate, fonts, colors, undo/redo; preview and print file	yes (from 2.34)	yes
With AI recommendations	a form configurator with a panel of configuration suggestions	yes (from 2.35)	-
Horizontal-layout personalization, print set with multiple variants, two-sided, 3D, pricing	previous-generation configurators	partly (to check per implementation)	yes

The configurator for a product is chosen by its item template - the Template type parameter (or, if empty, the template symbol). A product without a configurator template gets the standard product page.
The BS5 form configurator:
- shows components in panel order; a component with items as a dropdown, single- or multi-select fields, or information only,
- enforces minimum, maximum and default values,
- converts units (e.g. the customer enters centimetres, the store sells metres),
- runs dependencies between options - show or hide a component, set a quantity, choose a variant, choose the first available item, multiply a component,
- special components: information for the customer, unit selection, photo or file upload, selection with images, variant filters, AI text.
The BS5 visual configurator places text and photo components on the working area; it shows the remaining components as a form. On adding to cart, it saves the preview and the full design, from which a print file is generated.
AI in the configurator:
- generating personalization text for a chosen occasion (a dozen or so ready-made occasions, including birthdays, weddings, holidays, Mother's Day) based on a description from the customer,
- generating an image from a description,
- configuration recommendations (the configurator with recommendations),
- all AI features run through the n8n automation server with processes prepared for the store.
The price on the page recalculates after every change - it's calculated by the store server, which also checks that the configuration is valid (Configuration pricing).
The configurator can be opened with a saved configuration (a link), or from a cart line for editing (Saved configurations).

¶ Technologies

BS5 configurators - an app in Svelte and TypeScript embedded on the product page; the personalization working area - the Fabric.js library; fonts - Google Fonts.
Previous-generation configurators - TypeScript and jQuery, Fabric.js, three.js (3D preview).
The image on the working area has print resolution (300 dpi by default) - a print file is generated from the design.
The configurator talks to the store server through the same calls an external configurator can use:
- fetching the product structure (components, items, properties),
- checking and pricing the configuration,
- saving the configuration,
- uploading a customer photo or file.
A page event tells other store scripts about a change to the selected variant in the configurator.

¶ Augmented reality preview

A preview of the product in the customer's space (augmented reality) - e.g. a piece of furniture in the customer's own room, viewed through a phone camera - is delivered as an implementation. We've tested this in a prototype; it isn't a ready-made feature of the store templates.
It requires 3D models of the product (or its components) linked to the customer's choices in the configurator.

¶ External configurators

A store can use a configurator built outside Hummerce (e.g. a manufacturer's 3D configurator, a custom app in React or Vue):

Approach	What works	What implementation requires
Embedding in an iframe on the store page	the supplier's configurator on the product page or a content page, e.g. with an inquiry form	passing the result to the cart
An external configurator using Hummerce	fetching the product structure, pricing, checking and saving the configuration, photo upload - calls also available from other domains	adding to cart (through the store page), look and feel, customer session handling
Moving a ready-made configurator (HTML, JS) into the store	the configurator works on the product page	passing the list of chosen products to the cart
A custom configurator in place of the ready-made one	full freedom of design, while Hummerce still handles pricing, cart and orders	the whole configurator front end

Full integration with a supplier's configurator - importing the catalog, the configurator in the store, taking the finished configuration into the cart and ERP - is described on External configurator integration.

A product's configurator can be opened at a separate address, without the rest of the store page - for embedding in an iframe on another site (e.g. a manufacturer's or partner's site). Store staff open a customer's configuration for editing the same way.
The product card can have a Share configurator and API tab - it's enabled by the Tab share configurable setting.
A link to the product with the selected variant - the product page address contains the selected variant, so the customer can forward it.
A link to a saved configuration opens the configurator with the saved choices (Saved configurations).
Returning from a configurator embedded at a partner's site to the partner's own cart, a partner key, and a purchase list for a distributor - these are delivered as implementations, not ready-made in the BS5 template.

¶ Dependencies

The BS5 store template (configurators from 2.34) or BS4 (previous-generation configurators).
A configurable product with components and an item template pointing to a configurator (Configurable product - types and structure).
Component types matching the configurator (e.g. text and photo for the visual configurator).
AI - the n8n automation server with processes for generating text, images or recommendations.
An external configurator or images from another domain - the image server must allow their use by the store (CORS headers).

¶ Implementation

Requires implementation - the configurator has to be assigned to the product through the item template and adjusted to the store. Scope:
- choosing the configurator and preparing the item template,
- adjusting the look to the store (styles, layout, texts),
- filling in messages and translations,
- for the visual configurator - working area dimensions, product background and mask, print parameters,
- for AI - the n8n processes and connecting them to the store,
- tests on desktop and phone, production rollout.
Minimum estimated time:
- BS5 form configurator - from 8 h,
- BS5 visual configurator - from 16 h,
- generating text or images with AI - from 4 h (not counting preparing the n8n processes),
- a previous-generation configurator in the BS4 template - from 16 h,
- embedding an external configurator in an iframe without passing to the cart - from 8 h,
- connecting an external configurator to the cart (list of chosen products) - from 60 h,
- sharing the configurator with partners with a return to their own cart - from 40 h.
- The time for a specific implementation depends on its scope - we quote it individually.
What the time depends on:
- how customized the configurator's look and layout are,
- the number and complexity of dependencies between options,
- visualization - none, 2D preview, 3D, or augmented reality preview (quoted individually),
- the number of languages,
- the documentation and technical capabilities of the external configurator (quoted separately),
- the store version - BS5 configurators require version 2.34 or newer (an update is quoted separately).

¶ Limitations

BS5 configurators don't have a two-sided mode, a 3D preview, or an image gallery - these are only in previous-generation configurators (BS4).
The augmented reality preview isn't a ready-made feature - it's built as an implementation, from 3D models supplied for the product.
Only one configurator works on a page at a time.
Some BS5 configurator messages (upload, quantity, price) don't have default values - they need to be added during implementation. Messages only have default values in Polish and English.
The BS5 visual configurator only places text and photos on the working area.
Dependency rules between options run in the customer's browser - the server checks required components and allowed items, but not the dependency rules themselves.
By default the configurator doesn't send configuration events to Google Analytics (option selection, save) - adding to cart is reported like a regular product, with the main product's data.
No ready-made widget for embedding on external sites with a return to that site's own cart - it requires implementation.
An external configurator can't add a product to the Hummerce cart without the store page - the cart works within the customer's session in the store.
BS5 configurators don't have a separate mobile layout - the look and usability on a small screen are adjusted during implementation for a specific product and store template.
We do not review content and graphics uploaded or generated by customers (copyright, trademarks, prohibited content) - this is the store's and its terms of service's responsibility.

¶ Future development

A 3D configurator in the BS5 template.
Two-sided mode and an image gallery in the BS5 visual configurator.
A ready-made widget for embedding the configurator at partners and distributors, with a return to their own cart and a purchase list.
Configurator analytics events (start, option changes, save) for GA4.

¶ Frequently asked questions

Does the BS5 configurator have a 3D preview or a two-sided mode?
No. The 3D preview and two-sided mode are only available in previous-generation configurators (BS4).

Can a customer generate personalization text or an image with AI?
Yes, through the n8n automation server with processes prepared for the store - generating text for a chosen occasion, generating an image from a description, and configuration recommendations.

Can an external configurator (e.g. a manufacturer's 3D one) be embedded and connected to the Hummerce cart?
Yes. An external configurator can use the same calls as the built-in one - fetching the product structure, pricing, saving the configuration and uploading files - while passing the result to the cart requires implementation.

Is the augmented reality preview a ready-made feature?
No. We've tested it in a prototype and deliver it as an implementation from 3D models prepared for the product - it isn't a ready-made feature of the store templates.

How long does it take to set up the BS5 form configurator?
From 8 h. The visual configurator (personalization with a preview and print file) - from 16 h. The time depends on the complexity of the dependencies between options and how customized the look is.

Does the configurator have a layout designed for phones?
Not out of the box. BS5 configurators don't have a separate mobile layout - adjusting the look and usability on a small screen is part of the implementation for a specific product and store template.

Product configurators - overview - the full configuration cycle and the rest of the area's pages.
Configurable product - types and structure - the components the configurator uses.
External configurator integration - catalog, configurator and cart with an external supplier's configurator.
Saved configurations, message editor, Bootstrap 5 template.
On hummerce.com: Product configurators (in Polish).

Want to see what a configurator could look like in your store? Contact the Hummerce team (in Polish).

¶ Configuration details

¶ Access in the admin panel

Item template: the Template type parameter - choosing the configurator.
Product card: the Configurable set tab - set parameters, including Working area width [px], Working area height [px], Expected resolution [dpi], Actual width [mm], Print area enlargement (left, top, right, bottom), Two-sided configurator; the Share configurator and API tab.
Panel configuration: the Sets group - Tab share configurable.
Configurator messages: the message editor.

¶ REST API and MCP

MCP: the structure of components shown by the configurator - see Configurable product - types and structure.

¶ Store messages

Configurator texts are changed in the message editor. Component names and descriptions are component properties (Properties and locations). BS5 configurator keys have default values in Polish and English - there are no values in other languages.

¶ Common

Key	Default value
`msg.gallery.select`	Select
`msg.item.required.slot`	Required
`msg.configurator.select.choose`	-- Choose --
`msg.item.youSave`	You save
`msg.cart.edit`	Edit
`msg.item.addToCart`	Add to cart

¶ Visual configurator

Key	Default value
`msg.fabric.moveLeft`, `moveRight`, `moveUp`, `moveDown`	Move left, Move right, Move up, Move down
`msg.fabric.scaleUp`, `scaleDown`	Zoom in, Zoom out
`msg.fabric.rotateLeft`, `rotateRight`	Rotate left, Rotate right
`msg.fabric.undo`, `redo`	Undo, Redo
`msg.fabric.positionDetails`	Position details
`msg.fabric.angle`	Angle
`msg.fabric.initError`	Configurator initialization error
`msg.config.text.add`	Add text
`msg.config.text.color`	Color
`msg.config.text.fonts`	Font
`msg.graver.selectImage`	Select image
`msg.graver.btn.remove`	Remove
`msg.graver.badFileType`	Bad file type
`msg.graver.fileToLarge`	File too large, maximum file size is:
`msg.fabric.image`	Image
`msg.fabric.image.change`	Change image
`msg.fabric.image.loading`	Loading...
`msg.fabric.image.errorRead`	File read error
`msg.fabric.image.helpText`	* Required
`msg.fabric.preview`	Preview
`msg.fabric.acceptTitle`	Configuration approval
`msg.fabric.alt`	Configuration preview
`msg.fabric.placeholder`	Click to generate a preview
`msg.fabric.printQuality`	Print quality
`msg.fabric.generating`	Generating...
`msg.fabric.generate`	Generate preview
`msg.fabric.openNew`	Open in a new window
`msg.fabric.enlarge`	Enlarge
`msg.fabric.download`	Download
`msg.fabric.exportJson`	Export JSON
`msg.fabricTools.width`, `height`	W., H.

¶ AI - text and image

Key	Default value
`msg.configurator.ai.generate`	Generate text
`msg.configurator.ai.loading`	Generating...
`msg.configurator.ai.error`	Generation error
`msg.configurator.ai.noSuggestions`	No suggestions
`msg.configurator.ai.selectSuggestion`	Choose a suggestion:
`msg.configurator.ai.cancel`	Close
`msg.configurator.ai.showSuggestions`	Show suggestions
`msg.configurator.ai.selected`	Selected
`msg.configurator.ai.suggestionsCount`	suggestions
`msg.configurator.ai.personalize`	What do you want to include in the text?
`msg.configurator.ai.personalizePlaceholder`	e.g. For my friend Anna who loves gardening...
`msg.configurator.ai.result`	Generated text
`msg.configurator.ai.resultPlaceholder`	Generated text will appear here...
`msg.configurator.ai.image.prompt`	Describe the image you want to generate
`msg.configurator.ai.image.promptPlaceholder`	e.g. A bouquet of red roses on a white background...
`msg.configurator.ai.image.generate`	Generate image
`msg.configurator.ai.image.loading`	Generating image...
`msg.configurator.ai.image.error`	Image generation failed
`msg.configurator.ai.image.use`	Use this image
`msg.configurator.ai.image.regenerate`	Generate again
`msg.configurator.ai.image.or`	or

¶ AI - occasions

Key	Default value
`msg.configurator.ai.agent.birthday_wishes`	Birthday wishes
`msg.configurator.ai.agent.grandpa_day`	Grandpa's day
`msg.configurator.ai.agent.grandma_day`	Grandma's day
`msg.configurator.ai.agent.dedication`	Dedication
`msg.configurator.ai.agent.wedding`	Wedding wishes
`msg.configurator.ai.agent.valentines`	Valentine's day
`msg.configurator.ai.agent.mothers_day`	Mother's day
`msg.configurator.ai.agent.fathers_day`	Father's day
`msg.configurator.ai.agent.christmas`	Christmas
`msg.configurator.ai.agent.new_year`	New Year
`msg.configurator.ai.agent.thank_you`	Thank you
`msg.configurator.ai.agent.teachers_day`	Teacher's day
`msg.configurator.ai.agent.communion`	Holy Communion
`msg.configurator.ai.agent.womens_day`	Women's day
`msg.configurator.ai.agent.anniversary`	Wedding anniversary
`msg.configurator.ai.agent.graduation`	Graduation
`msg.configurator.ai.agent.newborn`	Newborn baby
`msg.configurator.ai.agent.retirement`	Retirement

¶ Messages set during implementation

Key	Location
`msg.configurator.quantity`, `msg.configurator.price`, `msg.configurator.currency`	quantity, price and currency in the configurator
`msg.configurator.upload.title`, `.uploading`, `.uploading.image`, `.uploading.file`, `.clear`	photo or file upload
`msg.configurator.upload.error.extension`, `.error.size`, `.error.cmyk`, `.error.processing.image`, `.error.processing.file`, `.error.noFile`, `.error.upload.image`, `.error.upload.file`	upload errors