Cloudinary Blog

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

How To Create a 360 Product Viewer

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.


5 Visual Engagement Tactics That Convert Online Buyers


Step 1: Shoot a Product Video

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.

Step 2: Reference the Prerequisite Widget, Library, and JavaScript code

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

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

## Step 3: Activate the Product-Upload and Display Capabilities

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

Try Out the Viewer

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/w600,cfill,qauto/dprauto/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

Leverage the Viewer in Various Ways

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.

Want to learn more about image editing?

Have a look at these articles:

Recent Blog Posts

Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more
How to Build an Enhanced Gravatar Service, Part 2

Part 1 of this post defines the capabilities of an enhanced Gravatar service, which I named Clavatar, and describes the following initial steps for building it:

This post, part 2 of the series, explains how to make Clavatar work like Gravatar and to develop Clavatar’s capabilities of enabling requests for various versions of the images related to user accounts.

Read more