Knowledge Base

Your Go-To Resource for Quick Solutions and Expert Advice!

View Categories

How to Use the AR Functionality on All Devices (Customer Tutorial)

To enhance customer experience, understanding the frontend workflow of the WooCommerce Product View in AR plugin is critical.

This guide sheds light on how users work with AR features across desktops, Android devices, and iOS devices.

Workflow on Different Devices #

1. Desktop Workflow #

Desktop Workflow

Users using modern web browsers on a desktop computer can view an interactive 3D model, but there is no AR mode available to them.

Steps:

  • Open the product page using any desktop web browser (Chrome, Firefox, Safari).
  • Scroll to the product’s 3D model section.
  • Use the following interaction options:
    • Click and drag to rotate the model.
    • Zoom in or out using the mouse wheel.
    • Hold the right mouse button and move the mouse to pan the model.
  • With a 3D model viewer, the users can see the precise details of the product models, such as textures, shapes, and dimensions.

2. Android Workflow #

Android Workflow

Android users can use a 3D model, and AR features through .glb file interaction.

Steps:

  • Open the product page using an Android smartphone or tablet.
  • Find the AR button (e.g. “View in AR”).
  • Click on the AR button to enter the 3D model viewer.
  • Choose one of these options:
    • 3D Model Mode: Interact with the model by rotating or zooming in and out or panning across the model.
    • AR Mode: Switch over to the AR mode to visualize the model in real-life environments.
  • When in AR mode, to anchor the model, point the device camera at a flat surface.
  • Interact with the model by moving, scaling, or rotating it in AR.

3. iOS Workflow #

iOS Workflow

iOS customers can employ the AR functionality via a .usdz file format designed for integration with Apple’s ARKit.

Here’s how:

  • Open the product’s page on an iPhone or an iPad that supports AR functionalities.
  • Find and click the AR button (for example, “View in AR”).
  • The .usdz file will be launched in the iOS default AR viewer.
  • Follow these steps:
    • Let the camera identify a flat surface for placing the model.
    • Adjust the model’s position by moving, rotating, and resizing it to fit properly.
  • The customers can aim their device camera to see the product in their environment.

Key Features of the Front-End Workflow #

  • Interactive 3D Models: Lets clients pan, zoom, and rotate models for deeper examination.
  • Seamless AR Integration: Accepts realia visualization of .glb files on Android, and .usdz on iOS.
  • Cross Device: Enables access from desktops (3D view), Android (also AR view and 3D), and iOS (in addition to AR, also 3D) view.
  • Easy to Use Controls: Buttons and motions for interaction with the 3D models and AR Views are self-explanatory.
  • Live Visualization: Permits clients to visualize products in their actual environment which aids in making choices.

Best Practices #

  • Reduce File Weights: Minimize the size of .glb and .usdz files to improve loading speed and ensure more fluid interactions.
  • Cross-Device Testing: Test different devices and all major browsers to ensure usability across the platform.
  • Design for Mobile First: Shift your focus to increasing mobile friendliness for better smartphone AR experiences.
  • Emphasize the AR Capabilities: Emphasolic buttons and labels for example, markings like “View in AR” to draw user’s attention to the augmented reality mode.
  • Offer Sample Models: Enable customers to use AR before buying by providing example files for testing.