Launching a Quicklook
How to start an AR experience on mobile devices
Define the variant options as a key named 'options' inside a Javascript object, and then pass it to Variant.launchQuicklook();
You can specify the product either via its ID number (productId) or via a Product Code you have assigned in the Variant CMS (productCode).
This will open your product in either iOS AR Quicklook mode, or Google's AR SceneViewer
Due to content restrictions on mobile browsers, this function is only guaranteed to work if called via user input (click/tap).
1
var data = {
2
options: {
3
CHAIR : {
4
material: 'leather',
5
enabled: true
6
},
7
FOOTSTOOL :{
8
enabled: false
9
},
10
},
11
productCode: 'SKU001'
12
};
13
14
Variant.launchQuicklook(data);
Copied!
We recommend using Product Codes over Product IDs, as they can be easily edited and used to add new versions of products without updating your website code.
The keys in the options object (CHAIR, for example) are tag-names of meshes in your product file. You can set various properties of that mesh:
  • enabled: toggles objects on or off, and should always be set to the desired value, as there is no specified default value (may vary depending on platform and your file format)
  • material: replaces the tagged object’s material with the named one. If no material property is specified, the default material will be used. It’s recommended to always set a material explicitly.

Showing products without variants

All uploaded products have a default preset that will show the product without any tagged meshes. If you upload a GLTF without any tagged meshes or materials, the default preset will show that model as-is.
1
var data = {
2
productCode: 'SKU001'
3
preset: 'default'
4
};
5
6
Variant.launchQuicklook(data);
Copied!
You can also launch Variant quicklooks via just a URL by using Universal Links
Last modified 6mo ago