Shopify Theme API References

Initialization Method

To get started, call the GlamAR.init method. This adds the GlamAR SDK into the target container and configures it with the provided Access key and optional configuration.

GlamAR.init(containerId, accessKey, payload);

Initialization Payload

Name	Type	Description
platform	string	Platform you're targeting (e.g. web)
category	string	Supports lots of categories

Following are all the configuration options that can passed under thepayload object.
Subcategories defined in overview section can be passed in the category parameter.

Basic Example

GlamAR.init("containerId", "accessKey", {
  "platform": "web"
});

Advanced Example (with Configuration)

GlamAR.init("containerId", "accessKey", {
  "platform": "web",
  "category": "sunglasses"
});

Sku config

Our SDK currently processes sku's in two formats:

• Id : This is an unique id we give to every SKU created with GlamAR console < Product Inventory. You can check the sku-id in the inventory under column SKU ID
• Config : This is an object that can be created using the exsisting SKU in your inventory.

Any SKU config must contain 4 key item

{
  category: "desired-category", // `eyeware`,`jewellery`,`accessories` etc.
  subCategory: "desired-subCategory", // `sunglasses`, `necklace`, `earring`
  status: "PUBLISHED",
  arEffect:{
    // Copy this entire object as it contains all the necessary rendering data we need to show the desired SKU as custimized in the console
  }
}

You can also add in 'productName' and 'productImage' properties in the object. These will be used in displaying SKU in our SKU selection area at the bottom.

We provide a Model Viewer for viewing your model in 3D. It supports displaying the dimensions of model, if provided to it. These dimensions are shown in 'cm' measurment. To use this feature, you can add a meta tag inside your object. Example:

{
  category: "eyeware",
  subCategory: "sunglasses",
  status: "PUBLISHED",
  arEffect:{
    // Details
  }
  meta:{
    dimensions: {
        length: "length-of-model",
        width: "width-of-model",
        height: "height-of-model",
    },
  }
}

Parameters	Type	Description
category	string	eyeware, makeup, jewellery etc.
subCategory	string	sunglasses, necklace, earrings etc.
productName	string	Name for the product
productImage	string	Image URL for the product
arEffect	ArEffectOptions	Object contains data that is used to render model accurately
meta	MetaOptions	Object contains miscellaneous data

ArEffectOptions

Parameters	Type	Description
transform	object	Contains position and rotation settings
envSettings	object	Contains lighting and environment settings
effectAssets2D	string[]	Contains urls of images for SKU rendering
effectAssets3D	EffectAssets3DOptions	Contains url of 3D file for rendering

EffectAssets3DOptions

Parameters	Type	Description
id	string	Always send "full"
url	string	Valid url to the desired asset. Supported extension is .glb and .txt

MetaOptions

Parameters	Type	Description
dimensions	object	Contains length, width and height properties

Post-Initialization Methods

applyBySku

GlamAR.applyBySku(skuId, callback);

Load a virtual try-on using applyBySku method and passing the relevant SKU Id.
Return Value: None

Parameters	Type	Description
SKU Id	string	A SKU ID.
callback	function	function, fires after the Sku is applied

applyByCategory

GlamAR.applyByCategory(subcategory);

Pass a subcategory (e.g., sunglasses,necklace,earrings), which the SDK will use to fetch all corresponding SKUs from the Console’s product inventory.
Return Value: None

Parameters	Type	Description	Options
subcateogry	string	Pass any compatible subcategory	sunglasses, necklace, earrings etc. Check supported subcategories

applyMultipleConfigData

GlamAR.applyMultipleConfigData(skuConfigArray);

Display multiple SKU types at once. The input should be an array of sku configs. Each item can be of diffrent subcategory eg: sunglasses, caps, earrings, etc.
Return Value: None

Parameters	Type	Description
skuConfigArray	object	An Array of SKU Configs

Following is an example of above skuConfigArray for applyMultipleConfigData.

const data = [
  {
    category: "eyewear",
    subCategory: "eyeglasses",
    status: "PUBLISHED",
    arEffect: {
      envSettings: {
        useDefaultEnvironment: true,
      },
      effectAssets3D: [
        {
          id: "full",
          url: "VALID-ASSET-URL", // We support .glb files
        },
      ],
    },
  },
  {
    category: "accessories",
    subCategory: "caps",
    status: "PUBLISHED",
    productName: "Test cap",
    productImage:
      "https://cdn.pixelbin.io/v2/dummy-cloudname/original/05-DP1YgvlO2.png",
    arEffect: {
      envSettings: {
        useDefaultEnvironment: true,
      },
      effectAssets3D: [
        {
          id: "full",
          url: "VALID-ASSET-URL", // We support .glb files
        },
      ],
    },
  },
  {
    category: "jewellery",
    subCategory: "earring",
    status: "PUBLISHED",
    productName: "Test earring",
    arEffect: {
      envSettings: {
        useDefaultEnvironment: true,
      },
      effectAssets3D: [
        {
          id: "full",
          url: "VALID-ASSET-URL", // We support .glb files
        },
      ],
    },
    meta: {
      size: "",
    },
  },
];
GlamAR.applyMultipleConfigData(data);

Users will see separate tabs for each category type in the SDK UI.

addEventListener

GlamAR.addEventListener(eventName, handlerFunction);

Adds the listener to the given event name.
Return Value: None

Parameters	Type	Description
eventName	string	A Name of specific event or "*" To listen to the all the events.
handlerFunction	function	Your handler function that will listen to callback.

removeEventListener

GlamAR.removeEventListener(eventName, handlerFunction);

Removes the given listener for the event name.
Return Value: None

Parameters	Type	Description
eventName	string	A Name of specific event or "*" To remove all the events.
handlerFunction	function	Your handler function that will listen to callback.

isLoaded

GlamAR.isLoaded();

Returns the status of module loading.
Return Value: true if loaded, otherwise false

Parameters	Description
None	No parameters required.

open

GlamAR.open();

Opens the AR widget.
Return Value: None

Parameters	Type	Description	Options
mode	string	Opens Live-Tryon, Model/Image-tryon and Model Viewer	modelViewer imgTryOn
imgURL	string	Valid image URL	Any valid URL

• No parameters: Start Live VTO

  GlamAR.open();

• Model Viewer: Start Model Viewer

  GlamAR.open("modelViewer");

• Image Try-On:

  • Opens the image/model selection screen:

    GlamAR.open("imgTryOn");
  • Opens try-on directly with a specific image:

    GlamAR.open("imgTryOn", "url_of_image");

Switching Views

• While in Live or Image mode, calling:

  GlamAR.open("modelViewer");

  will open the model viewer. Calling GlamAR.open() again returns to the selected Try-On type.

• To switch from Live to Image mode, call:

  GlamAR.back();

  This resets the Try-On session and then call GlamAR.open() with desired parameter

Note: The SKU must already be applied. If not, the SDK will display an error.

reset

GlamAR.reset();

Removes all the current effects from the canvas.
Return Value: None

Parameters	Description
None	No parameters required.

close

GlamAR.close();

Closes canvas and returns to the main widget page.
Return Value: None

Parameters	Description
None	No parameters required.

snapshot

GlamAR.snapshot();

Takes a snapshot of the current result window. Result of the screen can be get from photo-loaded event in base64 format.
Return Value: none

Parameters	Description
None	No parameters required.

comparison

GlamAR.comparison(state, skus);

Toggles comparison mode in AR widget.
Return Value: None

Pass a state (i.e, open or close) to toggle between UI and with it 2 SKU ids or Skuconfig of same subcategory say sunglasses or necklace. Diffrent subcategory comparision is not supoorted. The first sku will be shown on the left side and the other one on the right side.

Parameters	Type	Description	Options
state	string	State to show or hide the UI respectively	open close
skus	string[] | object[]	Provide 2 SKU Ids or 2 SKU json in an array	["skudID1", "skudID2"] ["SkuConfig1", "SkuConfig2"]

GlamAR.comparison("open", ["skudID1", "skudID2"]); // replace skudID1 and skudID2 with two SKU id's
GlamAR.comparison("close"); // When we send close we don't need to send SKUs

Eye PD Measurement Flow

We provide an integrated supports for eye pupillary distance (PD) scanning. This is activated when viewing any eyeware categories. If user wants to show his own UI and use this service we have function GlamAR.eyePD() for that case.

GlamAR.eyePD("start"); // To launch or restart Eye PD flow
GlamAR.eyePD("close"); // To exit Eye PD and return to active Try-On

Events

Check Events Page for event details.