Documentation

Motivation

Alter Product is a modern web application designed for interactive product visualization, configuration and personalization. It was built for Print-On-Demand businesses, manufacturers offering customization, online stores and creators who want to present products in a dynamic, fully interactive 3D environment.

The platform consists of four core components that work together as a complete e-commerce ecosystem:

  • Designer – central workspace for defining variants, print areas, products and runtime settings
  • Viewer – 3D e-commerce product viewer for visual presentation
  • Configurator – 3D e-commerce product variant and parameter configurator (sizes, materials, colors, etc.)
  • Customizer – advanced e-commerce design tool for adding graphics, text, layouts and print elements on products

Viewer, Configurator and Customizer can be embedded on your website using iframe, configured with URL parameters and integrated via secure postMessage communication.

The Designer module acts as the central management layer: it defines variants, print areas and runtime settings. Viewer, Configurator and Customizer use those settings and the design prepared in Designer to render the e-commerce experience; they do not open the Designer workspace itself. The Designer can also be embedded for merchant workflows. In embedded or local-storage setups, assets and design data are stored on your server, while Alter Product manages licensing and runtime access.

For integrations, Alter Product provides a dedicated Public API that allows your store or backend system to fetch design data and synchronize Customizer orders. For WordPress/WooCommerce stores, Alter Product also provides an official WordPress plugin; see the WooCommerce integration guide for setup details.

Quick Start

Use this short setup path to connect Alter Product with your store.

  1. Create an account and choose an integration path Register or log in. WooCommerce stores should start with the official plugin and Auto Connect; custom or headless stores should use the Public API.
  2. Install and connect your store For WordPress/WooCommerce, install the plugin, enable permalinks and connect it from the WordPress admin. The full flow is described in the WooCommerce integration guide. For custom stacks, generate server-side API credentials and allow the storefront domain.
  3. Create and map the design Open the WooCommerce product edit page and use the Alter Product tab to create or select a design. Define variants, print areas and runtime settings in Designer so Viewer, Configurator or Customizer can render the correct e-commerce experience.
  4. Embed the selected tool and handle runtime events The WooCommerce plugin can show the selected tool on product pages or WordPress pages. Custom integrations embed the iframe, create a short-lived embed session token on the backend and use postMessage for add-to-cart, current payload and Customizer order synchronization.