How to Implement a Variant Selector for the ARitize 3D Buttons


If you have different variants (e.g., colours) and you want to display different 3D models, you can add a selector to switch between variants. The purpose of these instructions is to demonstrate how to dynamically create a selector for the product variants in the case that your site does not have its own selector to switch between variants. In the case that your site does have a variant selector then it is recommended to create a new on-click event to change the below Div's data-threedy-web-id and data-threedy-sku. These instructions will help your clients swap between the 3D model variants for a better user experience on your site. These instructions are intended for developers.



We will make API calls through to get result data. If a SKU has more than one Option Id existing in the portal, it will populate a Select option to let you choose the product with different Option Ids. Thus, if your products have different variants, you should have the same SKU with different Option Ids for those variants in the portal as in a figure below.



Code to paste:

const clientKey = 'REPLACE_WITH_CLIENT_KEY';
const cdnLink = '';
const qARLink = '';
const models = [{
(function (sc, d, t, u, k, s, p) {
if (sc.QUICK_AR_INIT) return; sc['QUICK_AR_INIT'] = { key: k };
s = d.createElement(t), p = d.getElementsByTagName('head')[0]; s.src = u;
})(window, document, 'script', cdnLink + '/latest/threedy.js', clientKey);
(function () {

// Appending the ARitize buttons to your HTML using JavaScript
if (window.QUICK_BTN_INIT) return; window['QUICK_BTN_INIT'] = true;

models.forEach(model => {
let s = document.createElement('div'), p =
if (!p) { return; }
s.setAttribute('data-threedy-web-id', model.webId);
s.setAttribute('data-threedy-sku', model.optionId);
s.innerHTML = "<button class='threedy-3d-btn threedy-embed-btn'"
+ " style='display: none;'>View in 3D</button>"
+ "<button class='threedy-qar-btn threedy-embed-btn'"
+ " style='display: none;'>View in AR</button>";
// Fetching API data for the 3D Models based on SKU
let myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
let raw = JSON.stringify({
"client_key": clientKey,
"sku": => el.webId),
"action": "model-search"
let requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
// Fetch the different model
fetch(qARLink + "/api/search", requestOptions)
.then(response => response.text())
.then(result => {
result = JSON.parse(result)
if (!result["success"] || !result["data"]?.length || result["data"]?.length <
2 || !Array.isArray(result["data"])) {
// Creating the Selector on the page using JavaScript
const grouped = Object.values(result["data"].reduce((acc, item) => {
// Append the item to the array for each SKU
acc[item.sku] = [...(acc[item.sku] || []), item];
return acc;
}, {}))
if (!grouped?.length) {
// Get the resulting variants for each unique SKU (different option ids)
// Create a new select element and get the threedyContainer for eachSKU using the webId
grouped.forEach((el, i) => {
let threedyContainer = document.querySelector(`[data-threedy-web-id="${el[0].sku}"]`);
if (!threedyContainer || el.length < 2) {
let select = document.createElement("select");
select.setAttribute("id", "threedy-select");
let option = document.createElement("option");
option.innerHTML = "Select a model to View in 3D";

option.setAttribute("selected", "selected");
option.setAttribute("hidden", "hidden");
el.forEach((el2, i) => {
// Add options for each select element
option = document.createElement("option");
option.setAttribute("value", el2.option_id);
option.innerHTML = el2.option_id;
// Add an event listener to change the model
select.addEventListener('change', function () {
threedyContainer.setAttribute("data-threedy-sku", this.value);
}, false);
.catch(error => console.log('error', error));





  1. REPLACE_WITH_CLIENT_KEY needs to be replaced with your client key. For more information, please view this document.
  2. REPLACE_WITH_WEB_ID needs to be replaced with the "SKU" associated with the product.
  3. REPLACE_WITH_OPTION_ID needs to be replaced with the "Option Id" associated with the product.
  4. REPLACE_WITH_PARENT_NODE needs to be replaced with the class selector of the parent we want to insert after.


Live Experience

Once the tag is live, two user experiences for the 'View in AR' button differ depending on if the shopper is on a mobile or desktop device:

  1. Mobile Web - when the shopper interacts with the 'View in AR' button, the experience launches via WebAR on the mobile device. Here they can see the model in their space.
  2. Desktop Web - When the shopper interacts with the 'View in AR' button, a QR code is shown. If scanned with a mobile device camera it will lauch the mobile WebAR experience.