Shopify

Learn how to integrate 3D models into your Shopify store. Our step-by-step documentation will show you how to embed interactive 3D viewers directly into your product pages to boost customer engagement

Step 1: Copy the Link from colormass

First, you need to get the specific URL for your 3D model.

Open your 3D configurator setup in the colormass platform:

1. Navigate to your project.

2. Click Publish 3D.

3. Select Copy Configurator URL.

Step 2: Open your Shopify Product

Log into your Shopify Admin dashboard.

1. Click on Products in the left-hand navigation menu.

2. Select the specific product where you want to add the 3D viewer (for example, a "Bose Headphone").

Step 3: Embed the iFrame in the Description

Once you are on the product edit page, locate the Description text box.

1. Click the Show HTML button (the </> icon) located on the far right of the description formatting toolbar.

2. Paste your iframe code snippet into the code editor, placing your copied colormass link inside the src="" attribute.

It should look similar to this:

<iframe
  src="YOUR CONFIGURATOR URL HERE"
  style="width: 100%; height:100%; border:0"
  allowfullscreen=""
></iframe>

Step 4: Save and Preview

Once you have pasted the code:

1. Click the Save button at the top right of the page to apply your changes.

2. Click the Preview button (or navigate directly to your live storefront) to see the result.

The 3D viewer will now seamlessly load alongside or in place of your traditional product media, allowing your customers to interact with the 3D model in real-time!