Back to Top

Guide for Cs-Cart 3D Viewer Using Augmented Reality

Updated 11 January 2024

CS-Cart 3D Viewer Using Augmented Reality add-on changes how customers see products. It lets them view products in a 3D way using augmented reality.

Customers can use their phones to see products as if they were right in front of them. They can look at products from all angles and zoom in to see the details. It’s like trying things on without actually having them physically!

Check the video mentioned below for an overview of this add-on:

yJQUd9MSLyM

Features

  • Visualize products in your personal space using your mobile phone.
  • Rotate, zoom, and explore products from different angles.
  • Cs-Cart 3D Viewer Using Augmented Reality supported on both iOS and Android devices.
  • Seamless integration of augmented reality functionality.
  • Experience products in real-time using your smartphone camera.

Installation

When you download the add-on, you get a zip file and the install.txt file. Please follow the steps carefully:

First, click on the icon and select manual installation to upload the zip file as per the screenshot below.

Find the Best CS-Cart
Development Company
Find out More
Installation_CS-Cart-AR

Now, Click on “Local” to browse the zip file and then click on “Upload & Install”.

Installation_CS-Cart-AR--Upload & Install

After installation of the add-on, you will find the “AR Product View” in the list of available add-ons.

Installation_CS-Cart-AR.03

Admin Initial Configuration

Once the module is installed, the admin can access the CS-Cart admin panel and navigate to the 3D Product AR section.

Click on the “Settings” tab within the 3D Product AR section.
In the settings tab, you will find an option to enable or disable the module. then, click on the checkbox to mark it.

Installation_Admin Initial Configuration

Module Workflow

Once you have enabled the module, you can enable the Augmented Reality feature by uploading 3D models of your products in the GLB format. by following these steps:

Prepare the 3D models of your products in the GLB format and go to the product page in the admin panel.

Select the product you want to associate with a 3D/AR model and click on the “Edit” Option

Module Workflow

On the product page Locate the “AR Model File” section, now upload the .glb file format by choosing the options (Local, Server, URL) mentioned below for the respective product.

Admin can also enable/ disable the AR model from the product by clicking on Radio Button 

product page

Note: The file size limit is 8 MB. If your file exceeds this limit, you will receive an error message.

Front End View

As a front-end user, you can browse through the product list when you visit the Cs-Cart store. Users can see the AR effect on the products page as well 

Front End View

When customers click on Quick View of the product, they will be taken to the product Quick View page.

Customers can see the Augmented effect on the product page as well as the description page

product Quick View page

View on Mobile Device:

Now, customers can access this website on their mobile devices and also see the product at its proper place by using their mobile device camera before buying the product also they can view the product in 3D view.

AR View on Mobile Device:

After clicking on the cube button, you can see the product in your real space with the help of your mobile camera like this.

Real time image

You can now use touch gestures to interact with the AR model. Swipe to rotate the product, pinch to zoom in and out, and explore it from different angles.

The AR model will be in real-time sync with your movements, creating an immersive and interactive shopping experience.

To exit the AR mode, simply tap the close button or navigate back to the product view page.

After your satisfaction with your product, you can add the product to the cart list and buy that particular product.

View on Mobile Device:

Now you can check your selected product from the cart and view the cart.

Now click on checkout, then fill in the terms and conditions then confirm the order with the view of necessary details like quantity, total price, model, and product name

After this, your order will be placed successfully 

Support

That’s all about the “Cs-Cart 3D Viewer Using Augmented Reality“. However, if you still have any questions regarding the CS-Cart extensions

Please create a support ticket by clicking Webkul Support System or send an email to [email protected].

Current Product Version - 1.0

Supported Framework Version - (4.14.x - 4.16.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