Documentation

Motivation

Alter Product is a modern web application that enables interactive visualization and customization of products. The tool was designed with the needs of Print-On-Demand businesses, manufacturers offering customization, and creators in mind — to help them showcase their products in an attractive and modern way. The system is made up of three separate modules that work together:

  • Viewer – 3D product viewer
  • Configurator – product variant and parameter configurator
  • Customizer – design tool (e.g., for printing or graphics on the product)

Each module can be easily embedded on a website using iframe , configured via URL parameters, and integrated with your store using postMessage. Additionally, the Customizer offers a dedicated API, that allows external systems (e.g., your store) to easily fetch the designed product data.

Quick Start

How to get started?

  1. Create an account and a design Register or Log in to your account, then create your first project (design) with the selected product.
  2. Set visibility (sharing) In the design menu, go to the 'Share' tab and set the visibility of the E-commerce tools (Viewer, Configurator, Customizer) to public. If you're using the Customizer, also enable the customizer switch.
  3. Copy the iframe code Use the ready-made iframe code generated in the app. You can place it directly on your website or extend it with additional URL parameters, e.g., hide the menu or change the background.
  4. Integrate postMessage communication To enable interaction between the iframe and your site (e.g., add to cart), go to the E-commerce Settings section and set the domain where the iframe will be embedded.
  5. (Optional) Use the API If you're using the Customizer – you can fetch the designed product data via the dedicated API (e.g., after a user adds it to the cart).