Magento     Shopify      BigCommerce      Salesforce CPQ

Magento

About the extension

Threekit’s Connector extends the Magento Gallery by allowing users to add a 3D experience in the last position of their image gallery. The Threekit player enables Augmented Reality and product configuration via our player API.

User Overview

• Configuration

  To configure the Threekit connection within your Magento store, you will navigate to Stores → Configuration, this will take you to the Threekit form where you will need to enter the following:

  • CDN - ex: https://[insert environment name].threekit.com/app/js/threekit-player.js
  • Org Token - The Org Token is generated by navigating your Threekit Org → Settings (in left-hand navigation) → Tokens → Add Token

• Adding Products

  Once the Threekit configuration is in place on your Magento store you are able to add 3D visuals to a product in a similar way to uploading traditional photos. To access Magento products, go to Catalog → Products in the left-hand navigation panel. You can add new products by clicking the ‘Add Product’ button or edit existing products. Once in the product form, navigate to the ‘Threekit’ section and modify the following:

  Threekit Item Id - navigate to the asset in Threekit and copy the asset from the URL.
  

  AR Enabled - you can enable AR for mobile devices for this asset by toggling the ‘AR Enabled’ picklist between ‘Yes’ and ‘No’. When enabled and viewed on a mobile device, a “View in your space” button will appear. Tap to view your 3D model in your room
  

• View Product Player

  Once an asset is saved to the product, you can now view the asset in 3D and AR (if enabled and on a mobile device). Navigate to the product page. The Threekit extension extends the Magento gallery. The first image will be the thumbnail uploaded to the product (if none, it is the default Magento placeholder). By scrolling, you will see the Theekit enabled asset in the gallery and have the ability to interact with the player.

• API Reference

Shopify

About the extension

Threekit’s Connector extends the Shopify Gallery by allowing users to launch a 3D experience from the PDP. The Threekit player enables Augmented Reality and product configuration via Threekit’s player API.

This application requires some modification of Shopify theme files as well as creation of Shopify Snippets. Our guide below will walk you through the steps.

A video is also available:

App Setup

Install the Application

1. Click the Add App button on the listing page
2. On the next page, click ‘Install App’

Connecting the App to a Threekit Org

3. The Threekit Token is generated in Threekit. The Org Token is generated by navigating to your Threekit Org → Settings (in left-hand navigation) → Tokens → Add Token. If you have received a Threekit Authorization token from someone else, you do not need to generate one.

Edit the Shopify Theme

4. Navigate to Sales Channels on the left hand side, click Online Store and then Themes
5. On the theme page, click on the ‘Actions’ dropdown menu and select ‘Edit Code’
   

6. Click on the themes.liquid layout
   

7. Add the following block of code around lines 9 or 10.

{{ 'https://preview.threekit.com/app/js/threekit-player.js' | script_tag }}

8. Next, Click on the Sections tab and select the ‘product-template.liquid’ section

9. In the first two lines add the following code

           {% assign threekit = product.metafields.threekit %}
           {% assign isPdp = 'pdp' %} 

10. In the product-template.liquid, paste the following code (around row 45 in our example)

            {% if threekit[isPdp] == 'true' %}
            {% include 'pdp-threekit' %}
            {% endif %}
    

11. Create a snippet called php.threekt.liquid. Navigate to ‘Snippets’ under ‘Themes’ and click ‘Add New Snippet’ and name the snippet ‘pdp-threekit.liquid’

{height="" width="500"}.

12. Paste this code snippet

    ​
    # pdp-threekit.liquid
    {% assign threekit = product.metafields.threekit %}
    ​
    {% assign asset = 'assetid' %}
    {% assign isAr = 'ARen' %}
     {% assign shop = shop.metafields.threekit %}
    {% assign token = 'token' %}
    ​


    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    ​
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>


    <style>
     @media only screen and (max-width: 600px) {
     #tkplayer {
       height: 50vh;
       width: 70vw;
     }
    }
      @media only screen and (min-width: 601px) {
     #tkplayer {
       height: 60vh;
       width: 60vw;
     }
    }
     </style>
    <hr class="my-5" />
    ​
    <div class="row mb-4">
     <div class="card-deck col-9">
       <div class="card">
         <div class="card-body">
    ​
           <p>
             <a data-fancybox data-src="#selectableModal" href="javascript:;" class="btn btn-primary" data-touch="false">Launch 3D Player</a>
           </p>
    ​
           <div style="display: none;max-width:100vw;" id="selectableModal">
             <h2>Threekit</h2>
             <div id="tkplayer"></div>
           </div>
         </div>
       </div>
    ​
     </div>
    </div>
    ​
    <script>
      window
         .threekitPlayer({
        	authToken: "{{ shop[token] }}",
         el: document.getElementById("tkplayer"),
        	assetId: "{{ threekit[asset] }}",
         showAR: '{{ threekit[isAr] }}'
        })
         .then(async api => {
            window.player = api;
            window.configurator = await api.getConfigurator();
    ​
     });
    ​
    </script>

Select Products which require 3D Assets

13. Navigate back to the app by clicking on ‘Apps’ in the left hand navigation and then click on the “Threekit 3D Configuration & AR” app
14. Click Select Products

15. Select the product where a Threekit Catalog Item is going to be applied to
    

16. Add the Threekit Asset Id, available within the URL of the Item within the Threekit Platform, and select the checkboxes that apply

• Display on PDP - enables the Threekit Asset to be visible on the product page

• AR Enabled - enables AR for the asset related to this product. AR can be enabled for mobile devices for an asset by toggling the ‘AR Enabled’ checkbox between checked or not. When enabled and viewed on a mobile device, a “View in your space” button will appear. The button can be clicked to view a product in a users space

• To view what the product page looks like with Threekit enabled, click view next to the online store
  

17. Click Catalog
    

18. Click on the product
    

19. Click launch 3D Product

BigCommerce

About the extension

Threekit’s Connector extends the BigCommerce widget capabilities by allowing customers to show their products in 3D and AR. The Threekit player enables Augmented Reality and product configuration via Threekit’s player API.

App Setup

Install the Application

1. Locate the the application in the BigCommerce Marketplace. Click on the 'Install' button

Connecting the App to a Threekit Org

2. Add the Javascript Environment: Threekit Player URL - https:/[name of environment].threekit.com/app/js/threekit-player.js
3. Add the Org Token: The Threekit Token is a 36 character string generated in the Threekit environment. The Org Token is generated by navigating to your Threekit Org → Settings (in left-hand navigation) → Tokens → Add Token. If you have received a Threekit Authorization token from someone else, you do not need to generate one.

Adding the Threekit Widget to your BigCommerce Page

4. Once you have connected to your Threekit Org, next you will have the ability to add the Threekit Widget to your page layout. When doing so, you will need to associate that instance of the widget with a Threekit Product Id. This Id can be found in the URL of the Catalog Item in your Threekit Org.

5. Copy and paste the Id into the Threekit Product Id field in the left hand navigation (as seen below). Adjust the Width and Height of the player and then select ‘Enable AR’ and/or ‘Show Config From’ if applicable.

Salesforce CPQ

Installation Guide: Threekit Visual Configurator for Salesforce CPQ

Below are the steps to installing and setting up the Threekit for Salesforce CPQ managed package.

Installation

1. Install Salesforce CPQ
2. Once CPQ is installed, ensure 'My Domain' is enabled.
3. Once a domain is created, Deploy to all users.
4. Log into the Salesforce org on which you wish to install the Threekit Visual Configurator for Salesforce CPQ.
5. Copy the installation link and paste it into the address bar
6. Select 'Install for All Users' and click 'Install'
   
7. Once installation is complete, click 'Done'

Set up Remote Site Settings

8. Navigate to Remote Site Settings.
9. Create a New Remote Site Setting, populate the following fields:
   
10. Create a Public Token in Threekit
11. In Salesforce, navigate to the Threekit Admin tab
12. Provide the Threekit Player URL, the Threekit Domain URL, and the Threekit Token generated in Step 10, then Save:

NOTE: This can also be accomplished via Managing Custom Metadata Types

Configure CPQ Package

13. Click 'Configure' next to the Salesforce CPQ Managed Package
14. Navigate to the 'Additional Settings' Tab
15. Populate the External Configurator field
    ex: https://[domainofsalesforceorg]--tkcpq.visualforce.com/apex/ThreekitCustomConfigurator
    Note: To ensure you have the correct URL, navigate to Setup|Visualforce Pages|ThreekitCustomConfigurator|Preview, then copy the URL from the address bar

Product Set-up

16. To ensure quote lines are created by the Threekit Configurator, The Threekit ID field must be populated on each product.
    Note: The Threekit ID is located within the URL
    
17. Ensure the 'Externally Configurable' checkbox is checked on the parent bundle
    
18. On the parent bundle, create a Product Feature named 'Dynamic Options'
    

User Guide: Salesforce CPQ Connector

Below are the steps for including a Threekit configured product on a Salesforce CPQ quote.

1. Navigate to a quote

2. Add a bundle that is externally configurable (the external configurator will launch)

3. Configure the product within the Threekit Configurator
   

4. Save the configuration, return to the Line Editor.

'Threekit Assets' records related to the Parent Bundle quote line are created. An asset is created for each attribute configured in the Threekit Player. For assets related to a product, the asset id is populated in the Value field.

The Threekit Config Id and Threekit Config JSON string are saved in fields on the Parent Bundle quote line as well.