--- title: "Holition - Virtual Try-On / Makeup Tutorials" canonical: "https://red-ant-documentation.refined.site/space/RET/493617196/Holition%20-%20Virtual%20Try-On%20%2F%20Makeup%20Tutorials" format: markdown --- > Macro (toc) ## Overview In the era of remote interactions, delivering personalised and engaging experiences is essential for successful retail operations. Introducing Holition's virtual try-on AR and AI technology which is seamlessly integrated into RetailOS. This guide outlines how RetailOS empowers virtual consultations by harnessing the power of Holition's AR technology, allowing your sales team to provide immersive and tailored shopping experiences to customers, no matter their location. ### Key Benefits 1. **Unparalleled Customer Engagement:** The combination of RetailOS and Holition's Virtual Try-On AR transforms virtual consultations into interactive and engaging sessions, strengthening the bond between customers and your brand. 2. **Enhanced Product Understanding:** Customers can visualise products in a lifelike manner during consultations, fostering better understanding, and informed decision-making. 3. **Higher Conversion Rates:** By enabling customers to virtually try on products before purchasing, you'll see an increase in conversion rates as hesitations are minimised, and confidence in product choices is maximised. 4. **Efficient Consultations:** Your sales team can provide targeted recommendations and guide customers effectively through the virtual try-on process, creating efficient and enjoyable consultations. ### **Key Features** 1. **Seamless Integration:** Holition's Virtual Try-On AR is seamlessly incorporated into RetailOS's interface, making it easily accessible to sales representatives during virtual consultations. 2. **Comprehensive Product Catalog:** Leverage RetailOS's extensive product database during consultations, showcasing a wide range of products that customers can virtually try on. 3. **Real-Time AR Try-On:** Customers can see how products, such as apparel, accessories, and cosmetics, look and fit on themselves in real time, all within the context of their environment. 4. **Interactive Guidance:** Sales representatives can guide customers through the virtual try-on process, helping them select products, adjust settings, and explore alternatives. 5. **Multi-Platform Accessibility:** RetailOS and Holition's AR technology are designed to work seamlessly across various devices, ensuring a consistent experience on desktops, tablets, and smartphones. 6. **Secure and Private:** Customer data and AR try-on sessions are encrypted and securely stored within RetailOS, ensuring privacy and data protection. ## Virtual Try-On: Functionality Overview > ℹ️ The functionality outlined below is only available during a virtual consultation. ### 1. Adding products to the consultation Sales associates can add products to the consultation by selecting the grey ‘+ Add product’ box, this will load the product catalogue. Once the user has selected the products they would like to add to the consultation, they should select the ‘done’ CTA at the bottom of the screen which will take them back to the main consultation screen. ### 2. Activating a virtual try-on product Products that support virtual try-on are depicted with a camera icon situated against the product entry within the consultation. ![image](media://cd7f0263-c5e1-41b0-a02a-a28f1bc95df7) Once the sales associate makes a product ‘active’ a green lozenge will be displayed to indicate the active item - this will also trigger the product to be displayed on the customer’s side. ![image](media://bc0c0ae9-86b9-4a16-81f0-c1b2ddd4839d) > ℹ️ Only a single product can be made active at a time. ![image](media://35da8618-871f-4d7b-947f-1a860a5acca5) Whilst a product is ‘active’, the customer will be able to select the ‘**TRY IT ON ME**’ button. ### 3. Trying on products Once the customer has initiated the virtual try-on they will be presented with a welcome message, top tips for best results, and an option to allow camera access. ![image](media://2041a29a-634e-4d01-87d2-bb61c1b4ab44) > ℹ️ The welcome message screen is only shown once prior to the customer allowing access to their camera. Selecting to ‘allow camera access’ will invoke a native alert from the browser requesting the customer to ‘allow’ or ‘block’ access to their camera on their device. Once the customer has allowed access to their camera the virtual try-on experience will be initiated. During the virtual try-on, the customer will be able to: - Interact with the before and after slider - Add/remove the product from the basket - Close and exit the virtual try-on ![image](media://539d83f1-8b40-4860-9d12-ef1b57854a31) > ℹ️ In the video above the example product is made up of two shades. The customer can select between the shades during the virtual try-on. In the event the sales associate attempts to change the active item whilst the customer is in the virtual try-on, the sales associate will be displayed an on-screen alert informing them that the customer is trying on an item and that changing the active item will close the virtual try-on experience for the customer. ![image](media://99e923b1-536e-4a25-917b-7bb47407784c) ## Makeup Tutorial: Functionality Overview The steps to activate the makeup tutorial for the customer are the same as the virtual try-on functionality outlined above. Whilst a product is ‘active’, the customer will be able to select the ‘**HOW TO APPLY**’ button. Similarly to the virtual try-on experience, once the customer has initiated the makeup tutorial they will be presented with a welcome message, top tips for best results, and an option to allow camera access. During the makeup tutorial, the customer will be able to: - Cycle through a series of instructional steps on how the product should be applied with an accompanying animation overlayed on the customer's face - Add/remove the product from the basket - Close and exit the makeup tutorial > ℹ️ The ‘**HOW TO APPLY**’ option will only be available for products that have been configured to support the makeup tutorial experience. ![image](media://397531b8-0fe5-4c80-b6f8-ec2687563440) ## Configuring the Experience There are two parts to setting up the virtual experience. First the look and feel of the experience. Second the products that are available to the users within. ### Look-and-feel The following UI elements found within the virtual try-on and makeup tutorial can be configured to align with the retailer's branding and tone of voice: - The icons used throughout - The font used for the on-screen text - The text displayed within the welcome message, alerts, and accompanying error messages - The primary brand colour (this is used on all primary buttons) > ℹ️ The instructional text that is shown during the makeup tutorial is fetched from the retailers product API. ### Configuring products The retailer is responsible for setting up and configuring the virtual products within Holition’s CMS, this includes defining whether they are virtual try-on products, makeup tutorial products, or both. Within Holition’s CMS, you can set product images (thumbnails and packshots), names, descriptions, and also the colour calibrations of the products themselves. Once the products have been set up in the CMS the retailer will need to add the Holition ID(s) to their product feed. When the product is added to a virtual consultation RetailOS will be able to identify whether the product(s) added are virtual try-on or makeup tutorial product(s) or both (this defines whether we show the ‘**TRY IT ON ME**’ or ‘**HOW TO APPLY**’ buttons to the customer when the product is active) Once the customer initiates the virtual try-on/makeup tutorial experience RetailOS makes a request to Holition to fetch the data (e.g. product image, tutorial instruction text, etc.) based on the Holition ID associated with the product. ## **Browser Support** The following are the minimum specifications required for Holition to operate: ### Mobile - Apple: iPhone 6+, iOS 11+, Safari 11+ *[On iOS only safari can access the camera. It will not work on other browsers such as Chrome or Firefox, or in-app browsers such as Facebook. This is because Apple has not granted getUserMedia access to WKWebView or UIWebView to third-party app browsers.]* - Android: Android 7+, Android Chrome 61+, Android Firefox 56+ ### Desktop - Apple: OSX Sierra+, Safari 11+, Chrome 44+, Firefox 47+ - Microsoft: Windows 10, Chrome 44+, Firefox 47+ ## Camera Access The user must grant the web-app access to their camera to allow the experience to operate. A pop-up provided by the browser will be presented to the user upon initialisation. ## FAQs
What happens if a customer chooses to 'block' access to their camera? If the customer chooses to ‘block’ camera access they will be presented with a full-screen alert informing them that camera permissions have been denied - they will not be able to initiate the virtual try-on or makeup tutorial without allowing access to their camera. If the customer later decides to allow access they can select ‘**TRY AGAIN**’ which will re-initialise the virtual try-on or makeup tutorial experience. ![image](media://2c7c7988-4225-411f-ac2b-40adf8f93c94)