Templates, Modules, and Layout

Create a product template

Where to go: Asuka Designer > Assets > Product templates

1. Create a new template and give it a purpose-based title.
2. Choose Standalone, Customer, or Admin mode.
3. Open Template workspace and review Modules, Layout zones, and Portals.
4. Save the template, then assign it to a test configuration.

Understand the module groups

• Creation and editing: Views, Designs, Text, Images, Shapes, Layers, Elements, Variations, Element editor, Drawing Areas, Marker, Colors, and Studio.
• 3D product tools: Product parameters, Materials, and Camera.
• Utilities and output: Zoom, Download, Magnifier, Ruler, History, State, Pricing, Pricing Rules, GLB optimizer, and License.
• Contextual tools: Font family, Text formatting, Text curve, and Transform.
• Image shortcuts: Upload, QR code, AI image, Pixabay, Pexels, and Facebook.

Choose where a module appears

One enabled module may use more than one destination.

• Layout navigation: a persistent button in Top, Left, Right, or Bottom.
• Selection menu: a contextual action shown beside compatible selected objects.
• Embedded page content: the module remains continuously mounted in a page portal without a navigation button.
• A module may be in layout navigation and the selection menu at the same time.
• An enabled but unplaced module remains available to the API but has no customer entry point.

Choose the opening behavior

• Floating: an independent panel near the workspace.
• Popover: a compact panel anchored to the trigger.
• Panel: a panel using the selected layout zone.
• Modal: a focused overlay for larger workflows such as Studio.
• Inline: content inside the selected host.
• Drawer: a panel sliding from a screen edge.
• Overlay: content layered over the designer.

Configure layout zones

Where to go: Template workspace > Layout zones

• Choose Default, Panels, or Inline behavior for each zone.
• Choose whether the zone starts collapsed.
• Choose whether the customer may collapse it.
• Keep creation modules together and utilities in a predictable zone.
• Preview narrow mobile widths before publishing.

Configure portals

Where to go: Template workspace > Portals

A portal is the HTML destination where a module panel or embedded module is mounted.

<div id="asuka-product-tools"></div>

• Inside the designer: use the plugin-managed workspace.
• Shared page portal: use one selector shared by several modules.
• Document body: mount under the page body when appropriate.
• Custom CSS selector: target a dedicated theme or page-builder element.

Handle portals rendered later

WooCommerce blocks and page builders may create the destination after the designer initializes.

• The plugin observes the page and mounts when the selector becomes available.
• Keep the selector stable between desktop and mobile templates.
• Do not target an element that is repeatedly destroyed and recreated during normal interaction.
• Test a hard reload, variation change, AJAX fragment refresh, and mobile layout.

Respect licensing, integrations, and permissions

A template cannot force an unavailable module to load.

• Core modules are available when their permission is enabled.
• Premium modules require the signed feature and matching add-on chunk.
• Provider shortcuts require both the entitlement and the configured provider credential.
• 3D-only modules remain irrelevant until a 3D view is active.
• Locked or setup-required badges explain why a module cannot be enabled.