PS PrestaShop PrestaShop Beginner

360° Product View (df360spin) — Documentation

Install, configure and feed the df360spin 360° product viewer: preparing spin images, global settings, creating a sequence and shooting best practices.

Updated Module version 1.0.0

Overview

360° Product View (df360spin) adds an interactive viewer to your product pages that rebuilds a full rotation of the item from a simple image sequence. Visitors drag the product with mouse or finger to spin it, with autoplay, fullscreen, a frame counter and keyboard navigation. The module overrides no template: it inserts itself through a display hook that you choose.

A 360° view is not a 3D model: it is a series of photos taken all around the product. The quality of the result depends first on how consistent your shoot is.

Prepare the images

Photograph the product on a turntable, taking an even number of equally spaced views, in the same framing and lighting. Rotate the turntable by a constant angle between each shot (for example 10° for 36 images, i.e. 360° ÷ 36).

  • 24 images (15° per step): decent rotation, lightweight sequence.
  • 36 images (10° per step): good smoothness / weight balance, recommended in most cases.
  • 72 images (5° per step): very smooth rotation for high-value products, heavier sequence.

The module accepts up to 120 frames per sequence. Below 24 images, the rotation looks choppy.

Naming and format

Name the files in rotation order, with leading zeros to guarantee correct sorting: frame_01.jpg, frame_02.jpg, … The module automatically sorts images by filename on upload. Export as JPG, PNG or WebP at a consistent size. Images wider than the configured maximum width are resized automatically server-side.

A neutral, uniform background (white or light grey) and fixed lighting give the cleanest rotation. Lock the camera’s exposure and white balance to avoid brightness variations from one frame to the next.

Installation

  1. In the back office, open Modules > Module Manager, click Upload a module and select the df360spin ZIP file.
  2. Once installed, click Configure to set the global options.
  3. A new 360° Spin Views tab appears under Catalog to manage your sequences.

Global settings

From the module configuration page, you define the default behaviour of all viewers:

  • Display position: below the product thumbnails (recommended), in the additional information block or in the product page footer.
  • Autoplay by default: starts the continuous rotation on load. Can be overridden sequence by sequence.
  • Autoplay speed (ms per frame): how long each image is shown during autoplay. The lower the value, the faster the rotation. As a guide, 60 ms over 36 images gives a full turn in about 2 seconds.
  • Drag sensitivity: number of drag pixels needed to advance one frame. A lower value makes the rotation more responsive.
  • Maximum frame width (px): beyond this width, uploaded images are resized automatically.
  • Lazy loading: loads images only when the viewer enters the visible area of the screen.

Create a 360° sequence

  1. Open Catalog > 360° Spin Views then click Add a 360° sequence.
  2. In the Product field, type the product name, reference or ID: a suggestion list appears, select the right product.
  3. Keep the sequence active and choose the autoplay mode (use global setting, enabled or disabled).
  4. Save: the frame management panel appears.

A product can have only one sequence per shop. In multistore, each shop manages its own sequence for the same product.

Upload and order the frames

  1. Drag and drop your images into the dropzone, or click to select them. You can send several at once.
  2. Images are uploaded in batches with a progress bar, then sorted by filename.
  3. Reorder them by dragging the thumbnails; the new order is saved automatically.
  4. Hover a thumbnail and click the red cross to delete an image.
  5. Click Preview rotation to replay the sequence directly in the back office before publishing.

Front-office experience

On the product page, visitors drag the product to spin it both ways, with mouse or finger, with inertia at the end of the gesture. The control bar offers a play / pause button, a frame counter and a fullscreen button. On the keyboard, the left and right arrows advance frame by frame and the space bar starts or pauses the rotation. The system reduced-motion preference is respected: autoplay does not start if the user has disabled motion in their system.

Troubleshooting

The viewer does not appear

Check that the sequence is active, contains at least two images, and that the display position chosen in the settings matches a hook present in your theme. The module targets classic-based themes.

The rotation is choppy

Increase the number of images in the sequence (aim for 36 or more) and check that the angle between each shot is consistent.

Images are slow to load

Keep lazy loading enabled, lower the maximum frame width in the settings and favour the WebP format on export.

Compatibility

  • PrestaShop 8.0 to 9.x, classic theme and child themes.
  • Multistore: one sequence per product and per shop.
  • Touch screen and mouse, browser fullscreen.
  • Vanilla JS without jQuery, no template override.
Was this page helpful?

Still stuck? Contact support