Connectors
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.
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
- Click the Add App button on the listing page
- On the next page, click ‘Install App’
Connecting the App to a Threekit Org
- 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
- Navigate to Sales Channels on the left hand side, click Online Store and then Themes
- On the theme page, click on the ‘Actions’ dropdown menu and select ‘Edit Code’
-
Click on the themes.liquid layout
-
Add the following block of code around lines 9 or 10.
- Next, Click on the Sections tab and select the ‘product-template.liquid’ section
- In the first two lines add the following code
- In the product-template.liquid, paste the following code (around row 45 in our example)
- 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"}.
- Paste this code snippet
Select Products which require 3D Assets
- Navigate back to the app by clicking on ‘Apps’ in the left hand navigation and then click on the “Threekit 3D Configuration & AR” app
- Click Select Products
-
Select the product where a Threekit Catalog Item is going to be applied to
-
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
-
Click Catalog
-
Click on the product
-
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
- Locate the the application in the BigCommerce Marketplace. Click on the 'Install' button
Connecting the App to a Threekit Org
- Add the Javascript Environment: Threekit Player URL - https:/[name of environment].threekit.com/app/js/threekit-player.js
- 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
- 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.
- 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.
Change the following Session Settings
Enable clickjack protection for customer Visualforce pages with headers disabled - set to false
Enable XSS protection - set to true
Installation
- Install Salesforce CPQ
- Once CPQ is installed, ensure 'My Domain' is enabled.
- Once a domain is created, Deploy to all users.
- Log into the Salesforce org on which you wish to install the Threekit Visual Configurator for Salesforce CPQ.
- Copy the installation link and paste it into the address bar
- Select 'Install for All Users' and click 'Install'
- Once installation is complete, click 'Done'
Set up Remote Site Settings
- Navigate to Remote Site Settings.
- Create a New Remote Site Setting, populate the following fields:
- Create a Public Token in Threekit
- In Salesforce, navigate to the Threekit Admin tab
- 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
- Click 'Configure' next to the Salesforce CPQ Managed Package
- Navigate to the 'Additional Settings' Tab
- 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
- 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 - Ensure the 'Externally Configurable' checkbox is checked on the parent bundle
- 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.
-
Navigate to a quote
-
Add a bundle that is externally configurable (the external configurator will launch)
-
Configure the product within the Threekit Configurator
-
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.