With the Custom image on the product characteristic, your customers upload a photo or logo and see it straight away in the product image, exactly where it will later be printed, engraved or embroidered. They move, rotate, mirror and crop the picture themselves. Typical examples are photo mugs, T-shirts with a logo, signs, labels and promotional items. This article shows how to set up the characteristic and what your customers can do with it. For text there is the sister characteristic Custom Text on the Product; you can combine both on the same product.
Requirements
- Frontend engine V3. That is why the data type is called Custom image on the product (V3 only). A component with this characteristic runs with V3 automatically. More on this: Frontend engine: Legacy or V3.
- Combined product image. The customer's picture is drawn into the combined product image. The component therefore needs at least one characteristic whose values have images for the combined product image. See Image Visualisation & Uploading Images.
- “Designer” add-on. To publish, you need the Designer add-on, which you book in the service portal under your services. It is always included during the free trial, and in the Enterprise licence at no extra cost.
Creating the characteristic
- Open the component and create a new characteristic.
- Choose Free entry as the data category and Custom image on the product (V3 only) as the data type.
- Under Design on the product, set up the design zone, the picture placement and the resolution (see below).
- Save, check the preview and publish the component.
As with any characteristic, Required field decides whether your customer has to upload a picture.
The design zone
The design zone is the area of the product where the picture may go, for example the front of the mug or the chest of a shirt.
- The editor shows the bottom picture of the combined product image, that is the base product. Drag the box to the right place and change its size using the corner.
- Enter Width (mm) and Height (mm): the real size of the zone on the product. configento.app uses it to calculate the print resolution of the picture in dpi.
- Rotation (°) rotates the zone, for example for a slanted area.
The picture never leaves the zone. The zone is what will be produced.
A zone that grows with the format
If your customer chooses the size of the product, for example a sign in width × height, the design zone can grow with it:
| Setting | Effect |
|---|---|
| Width from, Height from | Fixed size uses the mm values above. If you choose a number field or a formula instead, the zone takes the value your customer sets there. |
| Margin (mm) | Subtracted from the chosen size on every side, for example for an unprinted border. |
The zone on the picture is then the largest possible area; it takes on the chosen aspect ratio.
Placement, resolution and locks
| Setting | Effect |
|---|---|
| Picture placement | Show the whole picture fits the whole picture into the zone; there may be empty edges. Fill the zone fills the whole zone and crops the picture to do so. |
| Warn below (dpi) | If the picture is below this value at the chosen print size, your customer sees a hint. Default: 150. 0 = no warning. |
| Refuse below (dpi) | If the picture is below this value, the configuration cannot go into the cart. Default: 0 = never. |
| The buyer may not change | Locks Position, Size, Rotation, Mirror or Crop. Your customer does not see locked tools. |
Your customers upload PNG or JPG up to 20 MB. configento.app deletes pictures that nobody puts into the cart after 30 days.
What your customer sees
- the Upload picture button with the hint “PNG or JPG, up to 20 MB”,
- after the upload, a small preview with file name and resolution, for example “508 dpi”,
- depending on your settings, the tools Size, Rotation (slider plus Turn left / Turn right), Mirror and Crop,
- Replace and Remove,
- the picture live in the product image.
Your customer can move the picture in the product image with the mouse or a finger, as long as you have not locked the position. When the picture is selected, the arrow keys work too. Reset position puts it back where it started.
Crop opens a window in which your customer chooses a section. Whole picture removes the crop again, Apply applies it.
If the picture is made so large that its resolution falls below Warn below (dpi), the message “The resolution is low at this size: the print may look blurry.” appears. The resolution always refers to the real print size.
In the order
The order contains the picture with its file name and resolution, for example:
logo.png · 508 dpi
On top of that comes the original picture as a download, exactly as your customer uploaded it. Position, size, rotation, mirroring and crop go along as data, and the combined product image in the cart, in emails and in the PDF shows the picture in its place. If your customer opens the configuration again, everything is as they designed it.
Prices, rules and required fields work as with any other characteristic, for example a surcharge as soon as a picture has been uploaded.
The “Designer” add-on
- During the free trial you can use the characteristic without restriction.
- After that you need the booked Designer add-on, which covers custom text and custom image. Without the add-on, the data type is locked in the editor. You can still edit existing characteristics, but when you publish, configento.app points you to the add-on.
- If the add-on ends, a component that is already published keeps running unchanged in your shop.
Troubleshooting
- The editor shows no picture for the design zone: The component has no picture in the combined product image yet. First add a picture to a value.
- “Please upload a PNG or JPG picture.”: Other formats such as PDF, SVG or HEIC are not accepted. Your customer saves the picture as PNG or JPG first.
- “The picture is larger than 20 MB.” or “The picture has too many pixels.”: Your customer uploads a smaller version.
- The resolution warning appears straight away: The zone is large in mm and the picture has too few pixels for it. Check Width (mm) and Height (mm), lower Warn below (dpi) or ask your customers for larger pictures.
- The picture does not appear in the product image: Check that a base picture is selected in the preview and that the Engine is set to V3.
- Publishing fails with a hint about the add-on: Book the Designer add-on in the service portal and publish again.