Product carousel: branded sneakers (TrainARs)

Experience overview 📖

In this experience we show an example of a sports products carousel, representing an e-commerce type experience, in which the user can recognize an image from an advertisement, flyer or clothing catalog, and start an AR web experience to visualize the different products. In addition, some logic is included to modify the look and feel of the web experience, including buttons to add items to a shopping cart, and the result of those actions, in the user interface.

The scene is composed of several 3D models of each of the products, as well as graphical elements to represent the components of the screen: buttons, banner, cart, etc.. 

In addition, the online code editor is used to include the logic of the navigation buttons, as well as the add to cart button. The programming of the buttons is done by means of a code block inside the JavaScript editor.

Uses and benefits 🌱

These types of experiences with interaction within an e-commerce environment are experiences that add value to the current digital shopping experience. It is a way to take advantage of existing resources that are generated as part of any marketing and commercialization process at a graphic level. Through this type of experiences, an additional level of interaction is added to this type of dynamics and ads, so that the customer has a new shopping experience.

With these web AR experiences associated with sales and e-commerce, numerous benefits can be achieved for the buyer and the company:

• Reduced decision making times for the buyer: they visualize the product in greater detail.
• Greater traceability of ads through the inclusion of digital analytics tools.
• Reduction of product return requests.
• Increased sales channels within the branding process associated with new product launches.

Features and tips💡

The following Onirix features are used in this experience:

Content cards

Cards with extra information associated with the AR content (title, image and description) that appear associated with each of the products.

Access the documentation on content cards.

Code editor: HTML, CSS and JavaScript

We used the code editor to add different custom blocks to the scene with HTML section, and CSS to give them some styling: 

• Top block with brand logo
• Top shopping cart icon
• Bottom block with navigation buttons, product name and navigation buttons.

In the JavaScript part we programmed the change of content depending on the click of the navigation buttons, as well as the change of state depending on the addition of products to the shopping cart.

Access the documentation of the online code editor.

Image tracking scenes

In this case a customer acquisition image (poster, flyer, bus shelter) acts as a marker. Anywhere the user will be able to interact with this type of advertisement to enter a next level of relationship with the store and product brands. 

Access here the online documentation on image-tracking scenes.