Getting Started with Aircada

Watch the full walkthrough to see to learn how to turn a 2D shopify product into a 3D interactive configurator.

Tutorial Breakdown

Follow along step-by-step to build your ceramic mug configurator.

Shopify Setup & Importing Assets

Start by preparing your baseline product in Shopify and importing your 3D models into the Aircada Studio.

Create a simple product in Shopify with variant options (e.g., Black, White, Gray).
In Aircada, create a new blank scene and turn on the grid for better spatial awareness.
Drag and drop your GLB files (mug and lid) directly into the studio.
Use the resizer tool to scale your models appropriately against the grid.

Make your 3D assets look realistic by tweaking materials and dialing in the perfect lighting setup.

Disable 'Use Original Material' to unlock Aircada's material customization.
Adjust the Metalness and Roughness sliders to achieve a shiny, ceramic look.
Apply an ENV map for realistic reflections.
Add and position a secondary light source to eliminate harsh shadows, adjusting intensity and decay for balance.
Enable transparency on the lid component to give it a realistic plastic/glass feel.

Set up the perfect viewing angles so your customers can interact with the product seamlessly.

Apply the 'Auto Frame' effect to keep the mug perfectly centered in the viewport.
Add an 'Orbit Cam' to allow users to click and drag to view the mug from 360 degrees.

Switch to UI Mode to build the overlay buttons that your customers will click to customize the product.

Set the Air Viewer to 100% width and height.
Create a new absolute-positioned layer pinned to the bottom of the screen to house your controls.
Use flexbox to center your UI elements and add a gap between them.
Design circular color swatch buttons, applying custom border radiuses, background colors, and subtle drop shadows.

Wire up your new UI buttons to actually change the 3D model in real-time.

Use Option Groups to handle the variant logic. Ensure Data IDs exactly match your Shopify variant names.
Define the specific hexadecimal colors for each variant option in the data definitions.
In XR mode, physically drag a connection line from the Option Group's data value straight to the 3D model's color property.

The final step: hooking the 3D configurator up to Shopify's cart and live pricing.

Add a 'Checkout' button and use the String Builder to dynamically pull in the Shopify price.
In the Aircada dashboard, link your new configurator project to the specific Shopify product.
Connect the Purchaser Plugin to the Checkout button's submit action.
Map your Option Group output directly to the Shopify Variant Name input (e.g., 'Color').
In Shopify, add the Aircada app block to your default product theme and ensure 'Show Customize Button' is toggled on.