Back to Top

WebAR Product for Magento 2

Updated 8 March 2024

Magento 2 Augmented Reality (WebAR) Extension module allows you to show all sides of a product to your customers. It enables your customers to see your products in a more magnificent and appealing light.

It gives the buyer a realistic view of the product and allows them to make an informed decision. The admin should allow customers to see items in the actual world.

These products are a revolution in the e-commerce industry because the customer can now feel the product that the admin is selling in real life. It gives items that aren’t truly there a sensation of presence.

Check a brief overview of the plugin –

-NQsucEQ6kE

Check how the plugin works on the android device to display the product in real-life space –

Start your headless eCommerce
now.
Find out More
Wp7DA4EgqTE

Features

  • The admin can enable or disable WebAR ( Augmented Reality ) Product for the products page.
  • With the help of the Adobe Commerce WebAR ( Augmented Reality ) Product, you can add products image to your online store.
  • The admin must add the .glb and .usdz file formats for the 3D models.
  • Allows admin to add 3-D models to the product.
  • Allows admin to add the background of the 3-D image.
  • Allow customers to shop for products based on 3-D view.
  • Allow customers to Zoom in and out with the mouse wheel.
  • The module is accessible for all types of products.
  • Choose to show product image gallery with 3D models.
  • Set model viewer attributes values from the configuration section.
  • Show custom AR button in 3D Model from configuration section.

Note- For the Enterprise Edition, the gift product type also works with AR model.

Installation – WebAR Product for Adobe Commerce Cloud

Please note that the uploaded file size of simple as well as configurable products should be maxed upto 66M.

 WebAR  Product for Adobe Commerce Cloud
 WebAR  Product for Adobe Commerce Cloud

After getting the zip folder and you have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder. Hereafter you need to transfer this app folder into the Adobe Commerce root directory.

move_app_folder

After the successful installation, you have to run these commands in the Magento 2 root directory.

First command

1php bin/magento setup:upgrade

Second Command

1php bin/magento setup:di:compile

Third Command 

1php bin/magento setup:static-content:deploy

After running the commands, you have to flush the cache from the Adobe Commerce Cloud admin panel. To do so, navigate through->System->Cache management as shown below.

flush_cache_storgae

Multi-Lingual Configuration

For the Multilingual support navigate through Store>Configuration>General >Locale Options. Thereafter, select your desired language from the Locale option as required.

change-language-magento-2-locale

Translation

If a user wants to translate their module from English to German. Henceforth, they need to follow the path app/code/Webkul/WebAr/i18n in their unzipped Magento2 SMSA folder. Therein one can get a CSV file with the name “en_US.csv”.

Now they will rename that CSV as “de_DE.csv” and translate all right side content after the comma in the German language.

So, after editing the CSV, save it and then upload it to the path app/code/Webkul/WebAr/i18n where they have installed Adobe Commerce on the server. So, the module will get translated into the German Language. It supports both RTL and LTR languages.

Shipping Translation
Shipping Translation

Thus, the user can edit the CSV like the image below.

Module Configuration – WebAR Product for Adobe Commerce Cloud

Thus, after the accomplishment of the installation steps, the admin can configure the module by navigating to Store->Configuration->WebAR Configuration.

Configuration-Settings-Stores-Magento-Admin

Now, the admin will have to configure the plugin settings which include the –

  • Enable WebAR– Choose Yes to enable the plugin functionality for your website or select it as No to disable it.
  • Show Product Image Gallery with 3D Model – Choose this option as a Yes to display the 3d model along with the product images under the respective section.
magento234.webkul.com_ee2461_pub_pro1.htmlasd-2
  • 3D Model Thumbnail in Image Gallery – Here, you can choose a 3D model thumbnail image as – Product Main Image or a custom 3D model thumbnail image.
  • 3D model thumbnail Image – If you have chosen the option in the previous one as a 3D model image then here you can upload the 3D model thumbnail image. The file types supported are – jpg, jpeg, gif, png, WebP, and the recommended size is Product thumbnail size (88 x 110 px).
webar product configuration part 2

Model-Viewer Staging and Camera Attribute Settings:

  • Auto Rotate – The admin can allow the auto-rotation of the 3D model by choosing a yes else selecting it as No will disable it.
  • Auto Rotate Delay – The admin can set the delay before the auto-rotation of the 3D model begins.
  • Disable Zoom – The admin can disable the user zoom for the 3D model.
  • Disable Tap – The admin can enable or disable the tap/click behavior of users for the 3D model.

Model-Viewer Loading Attributes Settings

Here, the admin can set the 3D model poster image as required by choosing the respective file. The chosen file displays as an image or poster until the 3D Model is loaded on the product page.

magento234.webkul.com_ee2461_pub_pro1.htmlasd-1-1

Allowed file types: jpg, jpeg, gif, png, WebP.

magento234.webkul.com_ee2461_pub_admin_admin_system_config_edit_section_webar_key_98de1b26193d68f5eace7ce934f0c985b8cf5a83a1813bc27033156485a4c46f_asd-1

Model-Viewer Lighting and Skybox Attribute Settings

  • Apply Skybox Configuration – if enabled then the admin can choose the background image for the 3D model. After enabling this option the default nature_HDR.hdr image is added to the backdrop of the 3D model. You can also delete this and add an image as per your requirements.
magento234.webkul.com_ee2461_pub_pro1.htmlasd-1
  • Apply Environment Image Configuration – Choose it as a Yes or No, selecting it as Yes brings up the option to add the Environment image that can be of the type – Neutral, Legacy, or a URL to a .hdr or .jpeg file. It is used to set the environmental lighting without changing the background.
  • Shadow Intensity – Allows to control the opacity of the shadow, use 0 to completely turn off the shadow of the 3D model else use the different values as required.
  • Shadow Softness – Allows to control the blurriness of the shadow. Use 0 for soft shadows.
  • Exposure – Allows to control the exposure of both the 3D model and skybox, for use primarily with HDR environments.

AR Button Settings

The admin can choose the button type for AR – Default AR or Custom AR button. In the case of a custom AR button for mobile devices, the admin can set the title for the AR button.

Screenshot_20230714_163912_Samsung-Internet
Screenshot_20230714_164407_Samsung-Internet

Admin End Management – WebAR Product for Magento 2

For Simple Product

The admin will set webAR for simple products. to do so, the admin will navigate through Catalog -> Products, as seen in the screenshot given below.

WebAR-moule
  • Ar Model File (Android) – Android File section is used to upload a media file (Image) for android and the format of the image for android is GLB.

    GLB is a 3D file format that allows motion and animation and is used in virtual reality (VR), augmented reality (AR), games, and online applications. The format’s modest size and quick loading times are further advantages.
  • Ar model File (ios) – The iOS File section is used to upload a media file (Image) for iOS (Apple) and the format of the image for iOS is USDZ.

    Apple created their own AR Viewer (AR Quick Look) and integrated it into IOS apps including Safari, Messages, News, and even Notes. It has the ability to immediately show USDZ files in 3D or AR. In both 3D and AR modes, it can see models with realistic materials, reflections, lighting, movements, and even real-life size.

For Configurable Product

The admin will set web AR for configurable products. to do so, the admin will navigate through Catalog -> Products, as seen in the screenshot given below.

configurable_product_options
  •  Allow GLB In Child Products: If enabled, then you need to upload GLB files for associated products only and if disabled, then upload the GLB (which has configured all variants) file for the main product only.
  • Ar model File – Android File section is used to upload a media file (Image) for android and the format of the image for android is GLB.
  • Ar model File (ios) – The iOS File section is used to upload a media file (Image) for iOS (Apple) and the format of the image for iOS is USDZ.
  • Allow GLB in Child products – Enable it to use the GLB file in the child products.
  • Model Variant Attribute – If the configurable product has more than one super attribute then based on selected attributes, the variant will be changed.

    For Example – If color and size are the attributes, and if color is selected in the model variant attribute, then on changing the color the variant will also change.

*Note:

For Android-The admin needs to upload a glb file on the main product. In glb file admin needs to configure attribute type.
and
For iOS- The usdz file will be uploaded for each associate product of the main configurable product.
No need to upload on the main product.

In iOS, if you haven’t uploaded the USDZ file and there is only GLB uploaded, model-viewer can auto-generate a USDZ on the fly. And you don’t need to upload the USDZ file. But if a proper view of the model is not being displayed then you can upload the usdz file at the appropriate place.

Storefront working – WebAR Product for Adobe Commerce

For Simple Products

The module allows customers to shop simple products based on a 3-D view as seen in the screenshot given below.

store fron Web Ar feature

For Android and iOS – To view the product in your own space you need to click on View in your space on your android and iOS device.

mobile view web Ar

The customer needs to permit this module to access your mobile camera to view the AR images on their device. afterward, the customers can see the product in your real space by the help your mobile camera like this.

actual AR view in real world

One more example you can see of this red chair in own space.

Chair example webAr feature
realworld example webAr feature

For Configurable Products

On choosing to buy a configurable product, the customer has to select the given attributes. It helps customers choose relevant variants for that product as seen in the screenshot given below.

Admin can choose to show product image gallery with 3D models for configurable products.

Sports-Shoe

The customer can view each and every side of the product as seen in the screenshots given below.

selection_3214

The customers can also see the associated products in their real space with the help of their mobile camera like this.

product in real environment in AR

Conclusion

At last, I conclude that WebAR Product for Adobe Commerce is a powerful tool for merchants in this age of social distancing. It allows customers to interact with products in a similar way that they would in a physical store. It increased engagement leads to increased sales.

However, It makes it easier to represent merchandise and giving the consumer a better sense of what they are purchasing. Web AR Products for Adobe Commerce Cloud can help bridge the gap between shopping in a physical location and shopping online.

Support

So, that was much about the WebAR ( Augmented Reality ) Product for Adobe Commerce plugin. For any queries or doubts reach out to us at [email protected]. You can also raise a ticket at our HelpDesk system webkul.uvdesk.com

Current Product Version - 5.1.1-p3

Supported Framework Version - 2.0.x, 2.1.x , 2.2.x ,2.3.x ,2.4.x

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content