🎨 Variation Wizard — Series 2 of 7
The color slide presents circular color swatches to the customer. When they tap a swatch, the Wizard fires a live event that updates the corresponding material(s) on the 3D model in real time — no page reload. This is the most visually impactful slide type and the one that makes the 3D viewer interactive.
Configuration Fields
NP Variation Wizard admin
→
Select product
→
Add Slide → Color
| Field | What to Enter | Notes |
|---|---|---|
| Slide Title | Step heading shown to customer | e.g. “Main Color”, “Logo Color”, “Trim Color” |
| WooCommerce Attribute | Select a pa_* attribute | The attribute’s terms define the available swatch colors. Each term should have a color value set in WooCommerce. |
| 3D Material Slot | GLB mesh material name(s) | Find names in Material Slots section on the product edit page. For multi-zone: Logo1,Logo1_All (comma-separated, no spaces). |
ℹ️ The color applied to the 3D slot comes from the WooCommerce term’s color attribute. Set term colors in Products → Attributes → [attribute name] → terms.
Frontend Result
Wizard color step — swatch selected updates 3D model live
Logo1 → Red applied live
Main Color
Red selected
✅ Multi-zone example: A cap product with a bill and a body can update both zones from one swatch by entering
Body,Bill in the 3D Material Slot field — both materials change together when the customer picks a color.Ready to add 3D to your WooCommerce store?
Get the NP Matrix plugin suite or try it instantly — no install required.
The playground runs entirely in your browser — no account needed.