Product carousel: branded sneakers (TrainARs)
E-commerce product carousel experience: sneakers use case.
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..
Visualize this experience
Scan the QR code and hold your device pointing to the marker.
Visualize this experience
Scan the QR code and enjoy the AR experience.
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:
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.
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.
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.