> For the complete documentation index, see [llms.txt](https://docs.colormass.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.colormass.com/configurator/integrations/shopify.md).
# Shopify
### 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:
```html
```
### 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!