Virtual Try On For Salesforce B2C Commerce

You have 2 main features image upload and video capture which means the user has the option to Virtually Try On products in both 2D and 3D format.

This allows your user to upload an image for a Virtual TryOn in case you have chosen the image format in settings. If you select the video option then your user can capture the video for the product Virtual Try-On.

It also prioritizes user data privacy and security by not storing any user information on its server; instead, all data remains on the user’s system where the application is running. This fosters trust among users for your eCommerce website.

The latest version is 1.0.0. It is compatible with all devices and browsers as well.

• Real-time image processing and augmentation.
• Virtual Try On for eyeglasses, sunglasses, and contact lenses.
• Option to upload and capture the image for 3D Try On.
• Option to show Try On images in product list pages. This helps users to choose the most suitable product.
• It provides a safe and secure app because it never stores user data on the server.
• Customizable user interface.
• Encourage customers to use the Virtual Try On feature to preview eyeglasses, sunglasses, and contact lenses.
• Compatibility with Salesforce B2C Commerce Cloud.
• No dependency on the server as all AI models run in the client browser.
• Allows high-quality Images to be uploaded and provides top-quality images.
• Option to crop images while uploading.

Before installing the cartridge, make sure you have the following prerequisites:

• Salesforce B2C Commerce Cloud instance.
• Access to Salesforce Commerce Cloud Business Manager.
• Salesforce Commerce Cloud SFCC Toolkit installed locally.

Note- For any queries related to the installation of the product or any other doubt get instant solutions from our Salesforce Consultant Team.

There are two steps in the installation. First is Deployment, and second is site Import.

• Run cd bmCartridge.
• Run npm install to install all of the local dependencies (SFRA has been tested with v12.21.0 and is recommended).
• Create a dw.json file in the root of the project.

{

    “hostname”: “your-instance-hostname.demandware.net”,

    “username”: “AM username like [email protected]”,

    “password”: “your_webdav_access_key”,

    “code-version”: “version_to_upload_to”

}

• Run npm run uploadCartridge.
• The above command will upload the webkul_virtual_try_on_bm cartridge to the instance you specified in the dw.json file. 
• Go to Administration > Sites > Manage Sites > Business Manager – Settings.
• Add webkul_virtual_try_on_bm to the cartridge path into your Business Manager Site.
• Run cd ../siteCartridge.
• Repeat steps 2 to 4.
• This will upload the webkul_virtual_try_on cartridge to the instance you specified in the dw.json file. 
• Go to Administration > Sites > Manage Sites.
• Click on your site available under Storefront Sites. 
• Add webkul_virtual_try_on to the cartridge path into your Store Front Site.
• All right Deployment is complete.
• Now you can proceed with site Import

• To import the site, open SFCC Business Manager. 
• Go to Administration > Site Development > Site Import & Export. 
• Then, upload the siteData.zip (This is available at the root of this project) file.

• After uploading, choose the Instance/siteData.zip file
• Now, click the import button.

• Now, you can proceed with the Setup

Note- To check our applications, you can visit the Webkul Appexchange listing.

• Open SFCC Business Manager.
• Go to Administration > Organization > Roles & Permissions. 
• Click on the desired Role/Profile.

• Then Go to Business Manager Modules. 
• Choose your site and click the Apply button.

• Allow the Virtual TryOn module by selecting it.
• Click the Update button to save the changes. 

• Go to merchant tools.
• Now under Merchant Tools, you can see a new module named Virtual Try-On is enabled. 
• Now, click on it to open it.

• Go to the Merchant Tools dropdown
• Then you will be able to see the Virtual TryOn option under which you must click the configuration option.
• You can also click on Merchant Tools 
• Then select Virtual Try-On
• Then it shows you the Configuration option.

• You are required to provide all the settings for applying the Virtual TryOn on your website
• You can use the Virtual Try-On in 2 ways
  1. Image
  2. Video

For Image

• If you choose an Image format in Virtual Try On from the drop-down
• Then in the field, Show TryOn in Tile is set as Yes so that the image will be shown on all product tiles.
• In Capture Page Message, you must write the message you want to display on the screen for users.
• Select the aspect ratio of the cropper which helps users to crop an image in the proper aspected ratio.
• After that, click the Save button to save these settings.

For Video

• If you choose Video format in Virtual Try On from the drop-down
• Then in the field, Show Try-On in Tile is set as Yes so that the image will be shown on all product tiles.
• In Capture Page Message, you must write the message you want to display on the screen for users.
• After that, click the Save button to save these settings.

• First, click the Merchant Drop-down arrow
• Under Products and Catalogue, click on the Products option
• Now, click the product to open the product detail page for which you want to enable Virtual TryOn.
• In the product general tab, you will find the Virtual TryOn section.
• Upload the Virtual Try-On image (or choose the previously uploaded one).
• Choose the Virtual Try On type.

• Your setup is now done. So, open the storefront product list or product page to see the changes.

There are 2 ways of using Virtual Try-On for Salesforce B2C Commerce. These 2 ways are explained below

• Image Virtual Try On For Salesforce B2C Commerce

• 1. First, the user has to capture or upload the image
  2. To capture the image click on the Capture button and the image will be captured and applied to the product tiles.
  3. If the user uploads the image then after uploading, we are providing the option to crop the image in the aspect ratio so that it can easily adjust in the product tiles.

• Then all the products will be shown using the uploaded image. This helps the user to buy the product that suits them.

• When the user opens the product view it will be shown the same as the below snapshot. The product applied to the image you captured or uploaded on the website.

• Video Virtual Try On For Salesforce B2C Commerce

• 1. First, the user has to capture the video by clicking on the capture button.
  2. Then it shows the arrow to move your face so that you can capture the video properly.
  3. The video is now available on all the product tiles which helps you choose and buy the product

We are a business software development, consulting, and PDO firm with 13+ years of experience. We provide services for different Salesforce clouds such as Sales Cloud, Marketing Cloud, Health Cloud, Commerce Cloud, Service Cloud, and Experience Cloud. Also, we have a team of certified Salesforce developers and dedicated Salesforce Consultants. There are more than 10 applications that we have published on the Salesforce AppExchange.

Please visit the Webkul Consulting Profile to check our expertise and partner navigator achievements