Cloudinary Blog

Add the 360 Product Viewer to Your Commerce Site with Cloudinary

How To Make a jQuery 360 Product Viewer

eCommerce is a dynamic business. Visitors are constantly checking sites for the best deals or their favorite products, adding to their wishlists and exploring product recommendations from friends and influencers. At the same time, online vendors rely on numerous techniques - such as optimizing page load time, using sharp product images and aggressively targeting ads - to draw in shoppers and convert clicks into cash.

When looking for that competitive advantage and an improved shopping experience, one way for business owners to stand out is to include a 360 Degree Product Viewer.

This post will show how you can easily build your own 360 degree product viewer.

Note
All code Snippets will be located in gist.github.

First: The Product Photo Shoot

You may have sharp and crisp images of your product. But in this tutorial, we'll take it up a notch by adding a twist. We're going to use a few features unique to Cloudinary. Take a very short video of your product capturing all angles you would like a potential buyer to see once the product is online.

Be sure to get all angles of the wrist watch in a short video

Build the 360 Product Viewer

The 360 Degree Product Viewer requirements:

Set Up

In an index.html file, reference the libraries for the tools mentioned above at the beginning of the file:

Activate Product Upload and Display

In the body of the index.html file, we’ll add the UI container for an upload button and a 360 display product container:

Upload

Let’s add code for the widget function in the <script></script> tag just before the <body> tag.

Note
Replace cloud_name with yours from the Cloudinary dashboard.

We called for the openUploadWidget function, which pops up a display upload widget for us to upload the product video. In the callback function, we computed the frame gap from the video duration and specified amount of frames obtain from the video per time. In this example, it is set to 100. Then Cloudinary calculates the size of the images based on the viewport and calls the build function.

loading

Add the 360 Degree Product View Magic

The build function does the 360 degree magic:

After the video has uploaded, click the image while dragging the cursor from left to right and back. How’s the experience? Check it out for yourself!

360 degree product viewer

Conclusion

The 360 degree product viewing experience gives eCommerce vendors the advantage needed to showcase your product in a more realistic 3D fashion and improve sales. Apart from greatly improving the eCommerce experience, the 360 degree viewer can be used in countless other ways:

  • Travel - Travel experiences are displayed to help travelers understand what to expect before embarking on a journey, from the interior or exterior of a hotel to different adventures.
  • Real Estate - Prospective homeowners can invite themselves into the homes they want to explore.
  • Event Promotion - Showcase your event or venue by enabling attendees to see the event experience at the point of purchase.
  • For fun- Upload your own video now to test it out!

See the full demo in action!


Further Reading on Dynamic Media

Recent Blog Posts

Cloudinary offers ongoing support to Scene7 customers in their DAM business goals.

With the imminent shutdown of Scene7 after rebranding by Adobe as part of Dynamic Media, dozens of leading eCommerce companies, among them the world’s top three eCommerce brands, have migrated to Cloudinary as a viable alternative to Scene7. And for good reason: time is of the essence and Cloudinary promises not only a smooth migration flow and continuity of their rich-media initiative, but also numerous superb capabilities.

Read more
Applying Your Own Duotone Effect Filter With Cloudinary

The trendy duotone effect is ubiquitous in today’s websites and illustrations for good reason: it highlights content well, rendering it pleasing to the eye, especially on minimal web platforms. The sky is the limit as to how much you can play with colors while applying a duotone effect. You could keep trying them out until something stands out.

Read more
New q_auto Setting For Content-Aware Video Compression

It’s widely known that video is the most effective way of communicating your brand to your audience. It is also an extremely varied medium. Take a look at the existing videos in your media library, you’ll find videos with differing lengths, colors, brightness and density of content. All of these videos need to be optimized in a different way. Cloudinary’s new automatic video quality can intelligently analyze each and every video to encode it using the most optimized settings, ensuring the best trade-off between file size and visual quality, whilst also maintaining a consistent experience throughout. All you need to do is set the quality parameter to auto (q_auto in URLs) and Cloudinary will take care of the rest.

Read more
Automatic Video Transcoding

Delivering video files to users can be a much more complex undertaking than many people stop to consider. There are a large variety of video formats and codecs to choose between, and various optimization parameters for encoding the videos. Parameters such as bitrate, key-frame-interval, and frame-rate will have an effect on the visual quality and bandwidth requirements when delivering the video file. To make matters worse, there are so many potential viewing devices out there (desktops, laptops, tablets, mobiles, wearables, etc). Each of these devices have different browsers or apps, and they all support different formats and codecs!

Read more
Dynamic Video Platform: 7 Use Cases

Increasingly, companies large and small, across all industries are enhancing their customer and brand experiences through video. We’ve just launched our dynamic video platform and shared our thoughts on the differences between traditional online video platforms (OVPs) and dynamic ones when it comes to creating, managing, and delivering compelling and engaging videos.

Read more