Implement Virtual Try-on with iframe Tag

Through the <iframe> tag, front-end developers can easily embed Kivisense AR Sneaker Try-on into any Web page, including your Shopify website. Provide customers with real-time try-on experience and reshape omni-channel sales in Metaverse. See the steps below on how to implement Shopify AR try-on quickly.

Part 1. Get UID and SKU on Kivisense AR Try-on SaaS Platform

Sign up for a free account on the Kivisense AR Try-on SaaS Platform and create at least one try-on scenario. Here is a detailed guide on how to create AR try-on in 2 minutes.

NOTE: Creating a try-on on your Shopify or any other website requires two important parameters, which are the user ID (UID) and the scenario SKU.

Go to your account profile, click on the "Account Center" and directly copy your UID.

Inputting product SKU information is needed when creating your scenario, such as reference, style, item number, and this is your scenario SKU. Please note that the SKU value of the same account can’t be duplicated.

Part 2. Embed Shopify AR Try-on with <iframe> Tag

Add the <iframe> tag to where you want to embed try-on and set the “allow” attribute to “camera”.

Set the try-on link for the SRC attribute of the iframe tag: https://tryon.kivisense.com/viewer?user=[YOUR_USER_UID]&sku=[YOUR_SCENARIOS_SKU]&lang=[PAGE_LANGUAGE]

Kindly not that there are three query parameters in this link, with the following meanings:

• user: UID is a required parameter and you can see how to get it in Part 1.

• sku: Your Product SKU, such as reference, style, item number, is also a required parameter.

• lang: The page language is optional, and the default is the browser language. We support Chinese, English, and Portuguese. If this parameter is not provided, the browser's language will be used by default. If the browser's language is not within the supported range, English will be used as the default. The parameter value follows the "IETF BCP 47" standard, and the parameter format is "language-REGION". Currently supported values are zh-CN / en-US / pt-BR .

Optional Parameters:

no-footer: When set to 1, it hides the product menu at the bottom of the AR try-on page. If any other value is provided or the parameter is omitted, the bottom menu will be displayed.

Auto-init: When the 3D display feature is enabled in the current scene, there is no impact. If the 3D display is not enabled and the value "1" is passed, the system will attempt to automatically activate the camera for an AR experience when the page is opened. If the browser does not support automatic activation, this parameter will be ignored. Passing other values or omitting the parameter will lead to the landing page, where the user can manually initiate the AR experience by tapping.

Complete Example URL:

https://tryon.kivisense.com/viewer?user=myuserid&sku=mysku&lang=en-US&no-footer=1&auto-init=1

That's all about how to embed Kivisense AR shoes try-on into your Shopify website. Implementing Shopify virtual try-on is as simple as ABC.