How to Embed Aircada Product Configurator on Shopify 2.0 Themes | Aircada Docs

Watch this quick video walkthrough to learn how to embed the Aircada 3D product configurator onto your Shopify storefront using a Theme App Block with any Online Store 2.0 theme.

Overview

Connecting your Aircada 3D configurator to your Shopify store takes just a few clicks inside your Shopify Admin and Theme Editor. You can choose to display the 3D customizer directly inline on the product page or as a 'Start Designing' button that opens a full-screen interactive modal.

Step 1: Configure Display Mode & Custom Styles

1. In your Shopify Admin left sidebar, click Aircada Product Configurator.

2. Navigate to Configurators in the app menu. Your published 3D projects from Aircada Studio will be listed here.

3. Click on your target configurator (for example, Chrono Voyager).

4. Adjust your display preferences:

- Show Customize Button (Toggle OFF): The 3D configurator renders inline directly inside your product page layout.

- Show Customize Button (Toggle ON): Replaces the inline viewer with a 'Start Designing' button that opens a full-page 3D modal when clicked.

- Custom CSS Box: Inject custom CSS to style any DOM container on the page (for example, setting #aircada-root { height: 86svh; } for seamless theme sizing).

5. Click Save changes.

Step 2: Link Your Shopify Product to the Configurator

1. In the Aircada app menu, click Products.

2. Find your product in the catalog list (for example, Chrono Watch), and click Settings.

3. Select the configurator project you want linked to this product from the dropdown.

4. Keep the settings set to Inherit so it automatically syncs display and style preferences from the parent configurator.

5. Click Save changes.

Step 3: Add the Theme App Block in Shopify Theme Editor

1. Go to Online Store > Themes in your Shopify Admin.

2. Click Customize on your active Online Store 2.0 theme (e.g. Dawn, Horizon, Impulse, Prestige).

3. At the top of the Theme Editor, open the template dropdown and navigate to Products > Default product (or select a custom product template like aircada-inline).

4. In the left template section sidebar, click Add block (or Add section).

5. Switch to the Apps tab and select Aircada Product Configurator.

6. Drag and reposition the block to your desired location on the page (e.g., above or below product details, or full width).

7. Click Save in the top right corner.

Step 4: Verify Product Template Assignment (Common Gotcha)

If the 3D configurator is not appearing when you preview your product on the storefront, double check the product's assigned theme template:

1. In Shopify Admin, go to Products and click on your product (e.g. Chrono Watch).

2. Scroll down on the right sidebar to the Theme template card.

3. Make sure the dropdown is set to the template where you added the Aircada block (e.g., aircada-inline or Default product).

4. Click Save.

Step 5: Test on Live Storefront

1. Open your product page on your live storefront (your-store.myshopify.com/products/chrono-watch).

2. Depending on your setting in Step 1, verify that either:

- The Interactive 3D Configurator loads inline with real-time materials and orbit controls, OR

- The Start Designing button appears, and clicking it launches the full-screen 3D customization modal.

3. Test customizing options and clicking Add to Cart to verify seamless cart and checkout synchronization.

Need to Build a 3D Configurator First?

If you haven't published a 3D configurator in Aircada Studio yet, follow this complete walkthrough showing how to build an interactive glass bottle customizer from scratch using Aircada Studio and the Aircada SDK: