Customizations
Documentation — all pages
There are several ways to customize the designer to your needs. It’s crucial to understand all of them to find out the way that works best for you and your team.
Please mind: For all ways of customization developer skills are needed.
Please also keep in mind that - if you’ve implemented a customization and it works for you - there’s still a tiny risk that it will stop working after you’ve updated the product designer or your online shop system to a new version. So you should test your customizations after each update again.
If you are eligible for using our official support and you have some issues using the designer please make sure to disable all your customizations before contacting us - so you can be sure that the issues are not created by one of your customizations.
Monkey Patching 🐒
This is the recommended way to customize the designer to your needs. You don’t need too much time or money to develop customizations and keep them up to date. The designer's compiled files bundled into the shop plugin stay untouched. Monkey patching takes place in additional JavaScript and CSS files which will be loaded after the compiled files of the designer. Using this way you don’t replace logic but patch it afterwards to fulfill your requirements.
While it’s possible to achieve some great results there are some disadvantages using this approach though:
- It’s required to load more files from the server (the JavaScript/CSS files containing the customizations).
- If your customizations are complex or need a lot of lines of code it could be hard to maintain these - because the core designer logic you modify with your customizations is minified and therefore hard to read. Developers won’t get the whole picture.
- There’s a small time frame between the loading of the core designer files and your customization files. The designer initially loads in it’s original state and later on your customizations will be applied. This could be visible to the end user. There are smart ways to work-around that issue - like setting elements initially to hidden via CSS - but you have to take care about this.
- While it’s quite possible to do deep customizations using this approach it can be tricky sometimes. If you need deeper ways of customization or prefer a cleaner way this approach may not be the right for you.
Read more about monkey patching here.
Post Message API 📮
Usually data between the product designer and your online shop are shared using a GraphQL API. There’s one exception: The moment the customer finishes the design & the product designer gets closed there’s a post message sent from the iframe to the HTML page of the web shop. The post message payload contains some information of the newly created design like the price and the basket image preview URL. You could listen for the Post Message API request and handle it on your own.
Read more about the Post Message API here.