Documentation
Embedding and Advanced Integration
Use WooCommerce binding, Gutenberg, shortcode attributes, CSS portals, and theme integration appropriately.
Most stores should use WooCommerce product binding. Gutenberg and shortcodes are useful for demos, landing pages, standalone configurators, and custom application layouts.
Who this is for
WordPress implementers and frontend developers
What you will achieve
The designer mounts once in the correct host, loads only the required renderer, and preserves normal WordPress and WooCommerce behavior.
Before you begin
- A published product configuration ID.
- A stable page or template host.
- A clear decision between commerce-bound and standalone usage.
Prefer WooCommerce binding for products
Binding preserves product, variation, cart, price, order, and production context automatically.
- Use it on ordinary simple and variable product pages.
- Choose the supported display mode.
- Test the production theme and fallback mount.
- Avoid rendering a second shortcode instance on the same product page.
Use the Gutenberg block
Where to go: Page editor > Add block > Asuka Designer
- Enter the product configuration ID.
- Choose the mode.
- Set a responsive CSS height.
- Preview the page and test mobile.
Use the shortcode
- id: product configuration ID.
- product_id: related WooCommerce product ID.
- variation_id: related variation ID.
- mode: standalone, customer, or admin.
- height: valid CSS height.
- class: additional CSS class.
- resume_design_id and resume_token: controlled saved-design access.
Avoid this: Do not expose private resume tokens in public reusable page content.
Create a dedicated portal
<div class="product-customizer-tools" data-asuka-tools></div>- Add the host to the WordPress theme or page-builder template.
- Use a stable ID or data attribute.
- Enter the selector in the Product template.
- Choose page content or opened-module destination.
- Test delayed rendering and AJAX updates.
Avoid duplicate mounts
- Render one designer instance for one visible product workflow.
- Do not combine product binding, shortcode, and Gutenberg block for the same instance.
- Destroy custom instances when a single-page application removes their host.
- Use unique portal selectors for multiple designers.
- Test memory and event cleanup after repeated navigation.
Renderer code splitting
The distribution separates the main runtime, Fabric, and Babylon bundles.
- A 2D-only product loads the Fabric renderer and should not load Babylon.
- A 3D-only product loads Babylon and should not load Fabric unless a 2D view is opened.
- A mixed product loads the active renderer first and the second when the customer changes view.
- Premium modules remain separate add-on files.
Need to verify the result?
Run Asuka Designer > QA & Diagnostics, then repeat the customer workflow in a private browser window.