360 Spin Images for eCommerce

A 360 spin (also known as a 360° product view) is a dynamic and immersive visual representation of a physical object. It allows users to see the object from all sides, simulating the experience of rotating it in real life. This technique is especially powerful in eCommerce, product presentations, and digital asset management where visual detail and engagement drive customer confidence and conversion rates.

How 360 Spin Images Are Created

To create a 360 spin, the object is typically placed on a motorized photography turntable. As the turntable rotates, a camera captures multiple images at evenly spaced angular increments. These images represent a full rotation around the object.

For example, if images are captured every 5 degrees, the full spin will consist of:

360° / 5° = 72 frames

The higher the number of frames, the smoother the rotation. Typical configurations include 24, 36, 72, or even 120 frames per spin, depending on the desired quality and performance.

Two Types of 360 Spin Images

1. Static 360 Spin Images

Static 360 spin images are automated animations that play without any user interaction. They can be rendered as:

• Animated GIFs
  
  Animated GIF (2.8 MBs) embedded using the code:
  <img src= "FlukeMeter.gif" width= "300" height= "300">
  Note the file size of the animated GIF and compare this with the animated WebP size below.
• Animated WebP files
  
  Animated WEBP (768 KBs) embedded using the code:
  <img src= "FlukeMeter.webp" width= "300" height= "300">
  Note the small file size of the animated WebP. This is a good reason to choose the animated WebP over animaged GIF whenever possible. Further, animated WebP supports transparent frames, which this file has.
• MP4 video files
  
  Video MP4 (2.7 MBs) embedded using the code:
  <video src= "FlukeMeter.mp4" width="300" height="300"
  loop autoplay muted playsinline></video>
  Note the file size of the MP4 and compare this with the animated WebP file size above.

Benefits of Static Spins:

• Easy to embed into web pages using standard HTML, as shown in the examples above.
• Play in any browser or image viewer without requiring scripts.
• Compatible with email campaigns, social media, and product listings on marketplaces.

Limitations:

• Users cannot control the spin direction or speed
• Not ideal for zoom or frame-by-frame exploration

2. Interactive 360 Spin Images

Interactive 360 spins provide a hands-on experience by allowing users to click and drag (or swipe on touchscreens) to rotate the object manually.

How It Works:

• HTML5/JavaScript viewer loads the series of images.
• Mouse or finger movement is mapped to the rotation logic.
• The viewer dynamically updates the visible frame based on input.
• Optional features include zoom, hotspot annotations, frame labeling, and fullscreen mode.

Technical Notes:

• All interaction logic is handled client-side via JavaScript
• The viewer can be embedded via <script> tags or integrated into CMS/eCommerce platforms.
• Compatible with modern browsers and responsive across devices.

Advantages:

• Full control over product exploration.
• Enhanced user engagement and longer time on page.
• Professional and modern appearance that adds credibility to your brand.

Embedding and Integration

Both static and interactive spins can be embedded into webpages using simple HTML. Static 360 spin image examples were provided above. For interactive spins, the associated JavaScript viewer must be included either inline or as an external resource running off a separate web server. For eCommerce websites such as Shopify, Big Commerce, and others, the JavaScript code can be hosted on a second web server and embedded into the Shopify web page using the iframe tag. Here is the interactive version of the Fluke multi-meter embedded into Pictomic's Shopify website with the 360 HTML5 code hosted on ftp.pictomic.com:

Interactive HTML5 embedded from ftp.pictomic.com using the code:
<iframe src= "https://ftp.pictomic.com/360Creator/Fluke/Fluke/iframe.html" width="400" height= "400" frameborder="0" allow="fullscreen" ></iframe>

The HTML5 viewer hosted at ftp.pictomic.com operates as a standard web page served from a basic web server. You can access the viewer directly by visiting:

• https://ftp.pictomic.com/360Creator/Fluke/Fluke/index.html
• https://ftp.pictomic.com/360Creator/Fluke/Fluke/iframe.html

Hosting an interactive HTML5 viewer requires a basic web server and a simple <iframe> reference on your website—even if it's an eCommerce platform. There is no need for specialized 360-degree plugins tailored to each eCommerce system. Instead, host the viewer files on your server and embed them using standard iframe syntax. The complete HTML5 viewer package, including JavaScript and assets, is automatically generated by the 360 Creator plugin in Visere Captura.

Using Visere Captura, here are the complete steps for adding interactive 360° spin images to your website:

1. Optionally, capture 360° images using a camera controlled by Visere Captura and a motorized turntable.
2. In Visere Captura, select the images that form your 360° view.
3. Click the 360 Creator icon on the right panel to load the selected images into the 360 Creator tool.
4. In the 360 Creator, choose HTML5 as the output format. Set the Output Name and Export Location, then click Export.
5. The HTML5 viewer files will be generated and saved to the designated location on your machine. For testing, you can download the zipped HTML5 viewer for the multimeter (Fluke.zip) from this location:

   https://ftp.pictomic.com/360Creator/Fluke

   Fluke.zip is the zipped version of the exported files generated by the 360 Creator.

6. Using an FTP client (e.g., FileZilla), upload the generated viewer folder (if testing with Fluke.zip, unzip the file first) to a public directory on your web server.
   
   
7. Inside your eCommerce website, access the HTML editor directly. All eCommerce sites, Wordpress, and others provide direct access to the HTML code for your web page. For Shopify look for the symbol </>
   
   After selecting to view the HTML code directly, the editor now shows the raw HTML code. This is where the HTML5 viewer for the interactive 360 is added.
8. Embed the viewer into your product page using a standard <iframe> tag, as shown in the example above. For testing use the HTML5 example we provide on this page. Access your HTML code on your eCommerce website and add the iframe code:

   <iframe src= "https://ftp.pictomic.com/360Creator/Fluke/Fluke/iframe.html" width="400" height= "400" frameborder="0" allow="fullscreen" ></iframe>

   If successful, you will see the interactive multimiter embeded in your page.

Other Integrations

In addition to web embedding, interactive 360 spins can also be integrated into PDFs (with limitations), AR/VR platforms, and custom mobile apps.

Why Use 360 Spins?

• Boost Conversion Rates: Studies show that interactive product images lead to increased customer trust and purchase likelihood.
• Reduce Returns: Customers better understand what they’re buying, leading to fewer surprises and lower return rates.
• Differentiate Your Brand: Stand out from competitors by offering richer, more informative product visuals.
• Support Complex Products: Perfect for showcasing electronics, machinery, fashion, jewelry, diamonds, and any product with physical depth or detailing.

Powered by Visere Captura

Pictomic’s Visere Captura software suite offers end-to-end automation for creating both static and interactive 360 spins. Features include:

• Turntable and camera control
• Precise angle stepping
• Plugin-based focus stacking and background removal
• Export to animated GIF, MP4, animated WebP, and interactive HTML5 formats

With Visere Captura, you can create professional-grade 360° content with minimal effort and maximum quality—scaling your product photography to match the demands of modern eCommerce and digital publishing.