Skip to content

Adding a 360-Degree Product Viewer to Your E-commerce Site With Cloudinary

E-commerce is a dynamic business. Shoppers are constantly browsing sites for the best deals or for the latest of their favorite products, adding to wish lists, and exploring product recommendations from friends and influencers. On the other hand, online vendors are always on a tear to try to draw in shoppers and convert clicks to cash with various techniques, such as by reducing page-load time, posting compelling product images, and aggressively targeting ads.

One way for e-businesses to maintain a competitive edge and deliver a riveting shopping experience is to display merchandise through a 360-degree product viewer (360 product viewer for short). This post shows you how to easily build one with jQuery on Cloudinary.

Note:

All the code snippets in this post are on GitHub Gist.

Cloudinary offers unique capabilities through which you can enhance rich media, no matter how sharp and crisp they might already be. As a first step, take a short video of a product that showcases how it looks from all angles, similar to this one:

Note:

Be sure to capture all the angles of your product in the video.

Create an index.html file and reference at the beginning of the file the following—

—with the code in this Gist file (gistfile1.txt).

Add to the index.html file the code for the following:

Button Labeled Upload Or Take Your Own Video

This process is now in place:

  1. When called, the openUploadWidget function pops up a widget with which you can upload a product video.
  2. The widget function computes the frame gap from the video duration and the number of frames to obtain from the video each time. In this example, that number is 100.
  3. Cloudinary calculates the size of the images based on the viewport and calls the build function.

Loading of Video in Progress Magic

Have a try of this 360 product viewer: upload a video, click its image, and drag your cursor from left to right and back. What do you think?

This [30-second demo]https://cloudinary-res.cloudinary.com/video/upload/w_600,c_fill,q_auto/dpr_auto/360_demo.mp4) walks you through the steps for creating the 360 product viewer on a smartphone. Easy as pie!

A 360-Degree View of a Wrist Watchewer

By offering a 360-degree view, e-businesses can showcase products three-dimensionally, delivering more details and potentially attracting purchases. You can deploy this view for many purposes, for example:

  • Travel. From interior to exterior views of hotels to tours and sights, excursion previews that present a 360-degree view better prepare travelers for upcoming trips.
  • Real estate. A 360-degree view accords prospective home buyers a richer virtual-tour experience.
  • Event promotions. With a 360-degree view, attendees can take in the nuances of an event or venue from the point of purchase.

Have a look at these articles:

Back to top

Featured Post