Skip to main content

Shopify Theme Integration Guide

Welcome to the official integration guide for connecting the GlamAR AR Try-On SDK with your Shopify store. Use the following steps to install and configure the SDK to unlock immersive AR features.

Prerequisites​

  • A Shopify Partner or Merchant account
  • Access to console.pixelbin.io
  • Valid GlamAR API Token and Access Key

Installation​

Image 1

  1. Open your Shopify account and select the online store where you want to integrate the SDK.
  2. Click on the "Edit Code" option to access the online editor.

Image 1

  1. Inside your "Assets" folder, create a new script where you will perform the SDK initialization.
  2. Open the script and copy the following code to load the script of GlamAR SDK:
document.addEventListener("DOMContentLoaded", function () {
  const glamScript = document.createElement("script");
  glamScript.src = "https://www.glamar.io/sdk/wrapper";
  glamScript.type = "text/javascript";
  glamScript.onload = () => {
    console.log("GlamAR SDK loaded");
    initializeSDK(); // After loading the script we will send initialization payload
  };
  document.head.appendChild(glamScript);
});
  1. For keeping our integration simple and centered around our SDK integration we will create a custom element inside our JS code. But feel free to create a new template or popup as per your need.
const popup = document.createElement("div");
popup.innerHTML = `
<div id="holder_views" style=" width: 100%; height: 100%; margin-left: auto; margin-right: auto; display: block;">
<div id="sdk-div" style="width: 100%; height: 510px; margin-left: auto; margin-right: auto" ></div>
</div>
`;
popup.style.display = "block";

We will use this custom popup as a holder for loading and showing our GlamAR SDK.

  1. To load the script this custom script , open the theme class and load it inside the head of HTML.

Image 1

<script src="{{ 'your-script-name.js' | asset_url }}" defer="defer"></script>
  1. Now we can start initialization process of our SDK. To initialize GlamAR, call the initialize function
GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  category: "sunglasses",
});

Replace 'YOUR CONTAINER ID' with your CSS container ID and 'YOUR ACCESS KEY' with your organization AccessKey.

If you copied the code we provided your "CONTAINER ID" is "sdk-div".

  1. Event listeners are essential soon after initialization is called to start listening to GlamAR SDK callback events.
GlamAR.addEventListener("*", (e) => {
  switch (e) {
    case "loaded":
      console.log("SDK Loaded");
      //will be triggered when sdk is loaded and subsequent processes can be handled here.
      //i.e GlamAR.applyBySku("c3dd1bac-a060-4bc2-bfae-05092049d1fa");
      break;
    case "closed":
      console.log(" Close SDK Div");
  }
});
  1. Now if our SDK is properly initalized we start can showing VTO's. To load a virtual try-on using "applyBySku" method, pass it a relevant SKU Id. From your shopify product listing.
GlamAR.applyBySku("YOUR SKU ID");

Initialization options​

Open the SDK with Live mode (web camera) straightaway. This bypasses the SDK home screen.

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  configuration: {
    global: {
      openLiveOnInit: true,
    },
  },
});

Opens the SDK Home screen with relevant category module setup.

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  category:”required category”, //sunglasses/watches/makeup etc
});
//sets up the sdk home screen with desired category type and pre-loads the model without SKU.

Open the SDK later in Live mode (web camera) .

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
});

//When you want to open the live camera without user interaction
GlamAR.open();

Open SDK with disabled previous button and cross button.

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  configuration: {
    global: {
      openLiveOnInit: true,
      disableCrossIcon: true,
      disablePrevIcon: true,
    },
  },
});

//When you want to disable the previous button and/or cross button of the sdk.