Discussions

Shopify

Introduction

Threekit’s Shopify Connector extends the Shopify experience 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

Connect Store to Threekit Org

Once you have the connector installed you will have to authorize the store's URL with Threekit. The token is generated in the Threekit platform. The Org Token is generated by navigating to your Threekit Org → Settings → 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’
  • Select themes.liquid layout
  • Add the following block of code around lines 9 or 10.
{{ 'https://preview.threekit.com/app/js/threekit-player.js' | script_tag }}
  • Next, Click on the Sections tab and select the product-template.liquid section
  • In the first two lines add the following code
{% assign threekit = product.metafields.threekit %}
{% assign isPdp = 'pdp' %} 
  • In the product-template.liquid, paste the following code (around row 45 in our example)
{% if threekit[isPdp] == 'true' %}
    {% include 'pdp-threekit' %}
{% endif %}
  • Create a snippet called php.threekt.liquid. Navigate to ‘Snippets’ under ‘Themes’ and click ‘Add New Snippet’ and name the snippet pdp-threekit.liquid
  • Paste this code snippet - please note that any styling choices are up to you, this is just an example.
# 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/[email protected]/dist/jquery.min.js"></script>
​
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/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 Shopify Products with Associated Threekit Items

  • 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 associated
  • Add the Threekit Asset Id, available in 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