# Previewing a logo on a product before ordering

> A distributor of customisable promotional products was receiving artwork by email for manual approval before every order.

- Source canonique : [https://allaux.fr/en/realisations/studio-personnalisation-produit](https://allaux.fr/en/realisations/studio-personnalisation-produit)
- Langue : EN
- Dernière mise à jour : 2026-09-30

## The context

Most products sold weren't bought as-is: they were meant to carry a logo or company artwork before manufacturing. Before this project, the end customer would send their file by email, someone would position it manually on a mock-up of the product, send back a preview for approval, and the whole thing could take several rounds before final sign-off. This process slowed down the sales cycle and used up human time on a task that was largely mechanisable.

The goal was to let the customer see the rendering of their artwork on the chosen item directly on the product page, before even placing an order.

## What I did

1. **Defining printable areas** — For each customisable product, marking out the areas where artwork can be placed, with their real size and shape constraints.
2. **Building the configurator** — An interface for importing a file and positioning, resizing and rotating it on a product preview, directly in the browser.
3. **Automatic compliance checks** — Built-in checks on the resolution of the imported file and compliance with the allowed areas, to catch upfront artwork that would cause problems in manufacturing.
4. **Handover to production** — Generating a production file carrying the artwork positioned exactly as approved by the customer, linked to the corresponding order.

## What needed the most care

- **Rendering accuracy** — The preview shown to the customer had to stay representative of the final result, to avoid disappointment and disputes after manufacturing.
- **Accepted file formats** — Support for several common image formats on the customer's side, with automatic conversion and checking before integration into the configurator.
- **Usability on mobile** — A significant share of visitors browsed the catalogue from a phone: the configurator had to stay usable under these conditions, not just on a computer.

## Result

> The number of email exchanges needed before an artwork approval dropped markedly, and the customer now sees the result before committing to an order.

## FAQ

### Does the configurator work for every type of product?

It adapts as long as the printable areas and constraints specific to each product are defined. A complex-shaped item needs more extensive calibration work than a flat one.

### Can the customer still request human approval after the configurator?

Yes, the automatic preview doesn't rule out a manual check before manufacturing starts, particularly on large-volume orders.

### Which file formats can the customer import?

Common image formats are supported, with resolution checked automatically to catch a file that would give a poor printed result.

### Does this kind of configurator slow down the product page?

Rendering happens in the browser with optimised previews, without reloading the page on every adjustment, so it stays smooth even on a modest connection.