Shopify Application

We have created a standalone application that connects Shopify with our Configurator Designer, allowing you to easily integrate a custom configurator directly into your existing Shopify store. Our application ties directly into the Shopify's product system. We allow you to setup and use variants within Shopify, and will automatically work with your existing store.

NOTE: If you have not read our documentation on the Configurator Designer, please do so now, as that knowledge is assumed here.

Setup

Necessary Steps

Install our Shopify application
Insert the following tag into the template, where you want the 3D player to appear: {{ product.metafields.threekit.embed }}.

Optional Steps (Multi Product Support)

Modify the class of the "Add to Cart" button in your template, to include the following class: add-to-cart, for example:

<button type="submit" name="add" id="AddToCart" class="add-to-cart btn product-single__cart-submit btn--secondary">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

Modify the class of the element that displays the current price in your template, to include the following class: js-price, for example:

<span id="ProductPrice" class="js-price product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>

The last step is to render our configurator form. To do that we simply add a div element to your template with id "threekit-configurator".
```
<div id="threekit-configurator"></div>
```
NOTE: If you do not want to use our configurator form you can skip this step and use our api to create your own user interface, refer to our Configurator Designer docs for more info.
If you would like make any other changes to your theme when you are using our custom configurator form, we attach a value to the product metafield that is "true" when you have setup the app to use a form.
```
product.metafields.threekit.customConfigurator
```

Using the Shopify App

Select "Apps" from side bar.
Select "Threekit - 3D Product Configurators" from installed apps.
Add product(s) along with some attached variant(s) to your Shopify store.
In the shopify app, select the product that you want to associate with your configurator from the list.
Enter the Scene ID of your clara scene that has the setup configurator (this can be found in the url).

Using Shopify's Selectors

If you only performed the necessary setup steps above, and want to exclusively use Shopify variants, the only steps left would be to mirror your product variants as attributes within the configurator designer. Then whenever a Shopify variant is selected inside your store, the matching attribute within the configurator will be executed. So for example, within your Shopify product, if you had the option: Size with variants: Small, Medium, Large, within the Configurator Designer, you would add an attribute of type Options named Size, and add 3 values named: Small, Medium, and Large.

Using Custom Selectors (Multi Product Support)

To use our configurator form you must have performed all the setup steps above.

Within the Shopify app, select a configurator form from the drop down to activate your custom display.
To perform product actions you will need to retrieve their handles.
Once you have the handles, please refer back to our Configurator Designer docs on using product actions.

API & External Scripts

If you need to access our api for any reason, it is located on the global window object under threekit.api. The easiest way to include external scripts, that use our api, is to edit the product.liquid file in the Layout section for your theme to include the following script:

<script>
  var script = document.createElement('script');
  script.src = "https://your.cdn/external.js";
  script.async = false;
  document.body.appendChild(script);
</script>