With the Custom text on the product characteristic, your customers design their product themselves: they type in a text and see it straight away in the product image, exactly where it will later be printed, engraved or embroidered. Typical examples are greeting cards, business cards, signs, engravings and names on textiles. This article shows how to set up the characteristic and what your customers can do with it.
Requirements
- Frontend engine V3. That is why the data type is called Custom text 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 text 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.
Creating the characteristic
- Open the component and create a new characteristic.
- Choose Free entry as the data category and Custom text on the product (V3 only) as the data type.
- Under Text input, set the character length and a default value, e.g. “Alles Gute”. As with other input fields, you can also show the default value as a placeholder.
- Under Design on the product, set up the design zone, the fonts and the colours (see below).
- Save, check the preview and publish the component.
The design zone
The design zone is the area of the product where the text may appear, such as the inside of the card or the chest of a shirt.
- The editor shows the bottom image of the combined product image, i.e. 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 this to calculate the font sizes, so a 5 mm text is also 5 mm high on the product.
- With Rotation (°) you rotate the zone, e.g. for an area that sits at an angle.
The text never leaves the zone. The zone is what will later be produced.
Fonts, sizes and colours
| Setting | Effect |
|---|---|
| Fonts | The fonts your customer can choose from. The first ticked font is the default. All fonts are under free licences and are delivered by configento.app, not by Google. |
| Min. size (mm), Default size (mm), Max. size (mm) | The range within which your customer can set the size. If minimum and maximum are the same, there is no slider. |
| Shrink the text to fit the zone | A long text gets smaller until it fits into the zone, but never smaller than the minimum size. |
| Colours | The colour palette. The first colour is the default. Name colours the way your production knows them, e.g. “Goldfolie”. The name appears in the order. |
| Also offer a free colour picker | Besides the palette, your customer can choose any colour. Leave it off if your process can only do certain colours, such as foil stamping or engraving. |
| Alignment, Vertical alignment | Where the text sits in the zone as long as your customer does not move it. |
| Several lines, Max. lines | Allows line breaks, e.g. for a greeting over two lines. Lines that are too long wrap at word boundaries automatically. |
| The buyer may not change | Locks Font, Size, Colour, Alignment or Position. Your customer does not see locked settings. |
What your customer sees
- an input field for the text,
- depending on your settings, a font selection, a size slider, colour swatches and buttons for the alignment,
- the text live in the product image.
Your customer can move the text in the product image with the mouse or a finger, as long as you have not locked the position. When the text is selected, the arrow keys work too. While moving, a dashed frame shows the zone. Reset position puts the text back where the alignment places it.
If the text does not fit into the zone even at the smallest size, the configurator reports “The text does not fit: shorten it or choose a smaller size” and holds back the cart.
In the order
The order contains the text together with its design, e.g.:
Alles Gute (Great Vibes · 6 mm · Goldfolie)
In addition, font, size, colour, alignment and position are passed along as data, and the combined product image in the cart, in emails and in the PDF shows the text. If your customer opens the configuration again, everything is just as they designed it.
Prices, rules and the required field work as with any other input field, e.g. a surcharge as soon as a text has been entered.
The “Designer” add-on
- During the free trial you can use the characteristic without restriction.
- After that you need the booked Designer add-on. Without the add-on, the data type is locked in the editor. You can keep editing 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 image for the design zone: The component does not yet have an image in the combined product image. First add an image to a value.
- The text does not appear in the product image: Check whether a base image is selected in the preview and the Engine is set to V3.
- The text looks different from the chosen font: The font is still loading, or an ad blocker or a firewall is blocking the font files from configento.app.
- “The text does not fit”: Enlarge the zone (mm), lower the Min. size (mm) or limit the character length.
- Publishing fails with a note about the add-on: Book the Designer add-on in the service portal and publish again.