Asuka Product Designer

Personalized products without the proof-email loop

Selling customized products should not mean collecting unclear instructions, rebuilding customer files by hand, or sending proof after proof before an order can move forward.

Asuka Product Designer gives shoppers a visual editor directly on the storefront. They personalize the product, see every change before checkout, and add the configured result to the WooCommerce cart. The preview, selected options, pricing data, and design reference remain connected to the order, giving the merchant a consistent workflow from first edit to production.

From setup to checkout in five steps

1. Install and activate Asuka Product Designer.
2. Create a reusable custom-product configuration in WordPress.
3. Add 2D or 3D views, then choose the tools, assets, and options customers can use.
4. Connect the configuration to a WooCommerce product or to individual product variations.
5. Let customers personalize, preview, add to cart, and return to edit the same customization when needed.

Give customers a visual product editor

• Add and edit text with fonts, colors, alignment, transforms, and curved-text controls.
• Upload customer artwork and place reusable designs, images, and vector shapes.
• Work with layers, ordering, locking, duplication, history, undo, and redo.
• Offer product colors, components, materials, and nested variation choices.
• Present multiple product views in responsive 2D or interactive 3D.
• Rotate and zoom 3D products while keeping configured artwork and part variations synchronized.
• Keep the designer usable across desktop, tablet, mobile, and fullscreen layouts.

Build once, reuse across your catalog

• Create reusable custom products instead of rebuilding the same configuration on every WooCommerce item.
• Maintain shared libraries for designs, elements, shapes, fonts, colors, and printing methods.
• Reuse product templates and visual themes for a consistent storefront experience.
• Assign one default configuration to a product and override it for individual WooCommerce variations.
• Carry previews, customization metadata, price information, and design references into cart and order records.
• Export and import portable product packages with their views, media, templates, and themes.
• Translate the storefront and administration with the managed translation workspace or standard gettext tools such as Loco Translate.

2D and 3D in one workflow

Use flat artwork and layered product views, interactive GLB/glTF products, or both inside the same catalog. The Fabric.js and Babylon.js renderers load only when the active view needs them, so a product does not have to choose between a complete 2D editor and a real 3D configurator.

Free core, optional advanced workflows

The WordPress.org plugin works without a license and includes the core 2D and 3D product-customization experience.

An optional, separately installed Asuka Product Designer Pro add-on extends the same editor with advanced modules such as spatial assembly, product parameters, drawing areas, fixed markers, advanced pricing rules, Studio tools, GLB optimization, and eligible server-side production exports. Premium implementation files are not included in this WordPress.org package.

Suitable for many customizable products

Use Asuka Product Designer for apparel, footwear, accessories, promotional products, stationery, signage, packaging, home decor, furniture, configurable components, and other products that benefit from visual choices before checkout.

WooCommerce is optional. The designer can also be embedded with the supplied block, shortcode, or integration APIs.

External services

The core editor runs in the browser and does not require an external Asuka service. The following services are contacted only when the related optional feature is configured and used:

• Asuka license service (https://api.asukadev.com/v1/licenses/resolve): contacted only when an administrator has entered an optional commercial license key and the plugin needs to resolve its current entitlement. It sends the configured license key, site hostname, generated installation identifier, plugin version, product identifier, audience, and WordPress channel. Service terms: https://designer.asukadev.com/terms-of-service/. Privacy policy: https://designer.asukadev.com/privacy-policy/.
• Asuka Support Center (https://api.asukadev.com/v1/support/wordpress/access): contacted only when an authorized administrator explicitly clicks the button to open licensed support. It sends a short-lived signed license token together with the site hostname, generated installation identifier, plugin version, product identifier, audience, and WordPress channel. The service returns a short-lived access URL for https://portal.asukadev.com. Service terms: https://designer.asukadev.com/terms-of-service/. Privacy policy: https://designer.asukadev.com/privacy-policy/.
• Asuka AI and server-side export services (https://api.asukadev.com): contacted only when an eligible user explicitly requests an AI operation or a server-rendered export. The request can include the signed license token, selected operation, and the product or design payload required to complete that operation. Service terms: https://designer.asukadev.com/terms-of-service/. Privacy policy: https://designer.asukadev.com/privacy-policy/.
• Google Fonts catalog (https://www.googleapis.com/webfonts/v1/webfonts): queried only when an administrator has supplied a Google Fonts API key and requests the live font catalog. The configured API key, alphabetical sort option, and WOFF2 capability filter are sent to Google. Terms: https://policies.google.com/terms. Privacy policy: https://policies.google.com/privacy.
• Google Fonts styles and font files (https://fonts.googleapis.com and https://fonts.gstatic.com): loaded only when a Google font selected by an administrator is displayed. The visitor IP address and standard browser request headers may be sent to Google. Terms: https://policies.google.com/terms. Privacy policy: https://policies.google.com/privacy.
• Pixabay (https://pixabay.com/api/): queried only after an administrator supplies an API key and a user opens Pixabay search. Search terms and the configured key are sent to Pixabay. Terms: https://pixabay.com/service/terms/. Privacy policy: https://pixabay.com/service/privacy/.
• Pexels (https://api.pexels.com/): queried only after an administrator supplies an API key and a user opens Pexels search. Search terms and the configured key are sent to Pexels. Terms: https://www.pexels.com/terms-of-service/. Privacy policy: https://www.pexels.com/privacy-policy/.
• Facebook: contacted only when an administrator configures the Facebook image integration and a user opens it. The data sent depends on the Facebook application configuration. Terms: https://www.facebook.com/terms.php. Privacy policy: https://www.facebook.com/privacy/policy/.

Administrators can leave every optional integration unconfigured.

Source code

The human-readable TypeScript, TSX, and CSS source for the bundled AsukaDesigner WordPress.org runtime is included under source/asuka-designer/.

To rebuild the browser files:

1. Install Node.js 20 or newer.
2. Run npm ci inside source/asuka-designer/.
3. Run npm run build.
4. The rebuilt files are written to dist/product-wordpress/.

The build uses Vite, TypeScript, Preact, Tailwind CSS, Fabric.js, and Babylon.js. Third-party licenses are included in assets/vendor/asuka-designer/THIRD_PARTY_NOTICES.md.