How to Create 360° Product Viewer

With a 360° product viewer, your product will look gorgeous and perfectly optimized for every device.. With PandaSuite, you can build a fully custom 360° product viewer from a set of images or a video without any coding. Embed it in any web page or export it as an application.

In this video you'll learn how to:

create a 360° product viewer with a sequence of images
allow users drag to rotate with the scrolling area
create custom cursor
use the accelerometer to rotate the product
create thumbnails
trigger the display of an annotation thanks to a position marker

Duration: 8:47 minutes

[TRANSCRIPT]

With a 360° product viewer, your product will look gorgeous and perfectly optimized for every device.. With PandaSuite, you can build a fully custom 360° product viewer for e-commerce or catalogue without any coding. Embed it anywhere or export it as an application.

In this video, let’s see how to build this 360° spin of a Dark Vador object.

First you need to shoot your product. Most 360° product spins are photographed or filmed on a turntable. Be sure to capture all the angles of your product in the video. In PandaSuite you can create 360° product viewer from a sequence of photos or from a video.

Import your photos or videos in PandaSuite Studio. In this example, we’ve got 125 photos.

Select all the photos and choose Create Sequence.

Wait until the sequence is processed.

By adding it to your screen, a Sequence component is automatically created. Or you can insert a Sequence component and choose its source manually. If you have a video, import it as a video and add it as the source of the Sequence to transform it automatically.

Double-click on it to see the product viewer that has been automatically created. You can preview it using the Play and Stop button. Photos have been turned into frames.

The Quality is automatically Optimized for every device. In the properties, choose the duration of the sequence, which is the time to go from the first to the last frame.

You can add repetition to start again the sequence once it goes to the last frame. Make sure to choose a specific number when your sequence is synchronized to another component.

If you want to auto play this 360° product spin, select Autoplay in the properties. Like in a video, users don’t have to do anything to see the product.

If you want users drag to rotate, unselect Autoplay and exit the Sequence component. Add a scrolling area component. Place it above the Sequence component. No need to add something inside, it is transparent. Place it above the sequence of images. In the properties choose Horizontal for the users to rotate from right to left and left to right. In termes of width, the wider the area is, the less sensitive the control will be. Hide the scrollbar.

Add a Synchronization component to synchronize the spin sequence and the scrolling area. Add both components and in the Properties of the synchronization, check Horizontal position and Frames.

Now users can manipulate this 360° product viewer using the finger or the mouse.

Now if you want to add a cursor instead, design the scrollbar, add a scrolling area and inside add a cursor.

If you want to know in details how to build this cursor, have a look at the video tutorials: Create Audio Player + Progress Bar in our Youtube Channel

Synchronize this cursor with the sequence by adding them in the same synchronization component.

You can also make users rotate product by tilting their iOS or Android device. For that you’ll be using the accelerometer of the device. Add a Motion Sensor, set its properties and choose the Horizontal or Vertical axis. Again synchronize the Sequence and the Motion Sensor to get this motion effect.

You can also add thumbnails that automatically rotates the product. Add the images of the tumbnails and create markers on the sequence. To add markers, enter inside the sequence. Make it play and pause it when you want. Click on the Add frames button to create the marker. You can adjust the frame you want by clicking on the Settings .

Select the image and choose a triggering event. Choose Interact with a component > Sequence > Change frame and select the frame you want.

With the marker, you can also set the default frame of the 360° product viewer. Add a marker and click on the pin icon to make it default.

With the markers you can display annotations depending on the object rotation. Any frame can trigger a Multi-state change to show or hide an annotation. Prepare a Multi-state that includes 2 states to hide or show the content. Select the Sequence and add an action. As a triggering event, choose one of the markers you set. Then add the action : Interact with a component

You can do almost anything you want with this 360° product viewer.

Once it’s done, you can embed it in an e-commerce website, share it with a link, add it to a product catalog or as an application. It is automatically available in web, iOS and Android format.

Via PandaSuite Studio, you can also use 3D objects, 360° images and videos. We’ll see tips and examples in other video tutorials, subscribe to our YouTube channel to stay informed!