Setting up the preview To make sure the input value will be placed in the image, we have to make sure the field ‘enable preview’ is set to ‘yes’ (default). This makes sure the input value will be placed in the image preview. And you will be provided with additional image settings. You can also modify the image settings of the attribute to display the preview value on a different slide (defaults to first slide). Text inputs
When you have enabled the preview, you will see a few additional fields that control the position of the preview in the image: Preview Top Position: the top position relative to the preview image; Preview Left Position: the left position relative to the preview image; Preview Top (Mobile): the top position relative to the preview image on mobile devices; Preview Left (Mobile): the left position relative to the preview image on mobile devices. We strongly advise you to use relative CSS units, like percentage units. That will ensure the position of the preview will remain intact when viewing the configurator on different devices.
With the top and left positions you can display your preview anywhere you like. The higher the left value, the more the preview will be displayed on the right. The same goes for the top position. Image inputs
For the file input we have some additional settings fields when it comes to controlling the preview: Preview image width: the width of the image preview; Preview image height: the height of the image preview; Preview image fill: whether to fill the preview image size with the whole image, or to contain the image within the given width and height. For the width and height of the preview image we also advise you to use relative CSS units to ensure responsiveness.
With these settings you should be able to display text and images on your main product image. Custom CSS If you can’t get the previews on the correct positions in responsive mode, you can always apply some custom CSS to make the preview location pixel perfect for all devices. Can’t get the preview right? Don’t hesitate to contact support.